How to Easily Add Links as Content Cards in WordPress

Engage Visitors with Rich Link Previews

Have you ever noticed how social media platforms like Facebook and Twitter automatically generate preview cards when you share a link, allowing visitors to quickly view key details without having to click through?

According to recent studies, content with rich link summaries receives up to 30% higher engagement and clickthrough rates compared to plain text links.

Luckily, adding this same rich, engaging content card functionality when linking to external sites is now easier than ever in WordPress…

What are Content Cards and Why Do They Matter?

Content cards, also sometimes referred to as rich link previews or link embeds, are embedded blocks that display summary information from a linked web page.

They usually include elements like:

• Title
• Description
• Thumbnail image
• Website logo, icons, etc.

Visitors can quickly preview key details before deciding whether to click through to the full page.

Benefits of content cards include:

• Over 25% higher user engagement
• Up to 30% increased clickthrough rates
• Visually appealing content
• Save space instead of lengthy quotes
• Enhanced reader experience

According to WordPress developers, usage of automatic content card generation has grown over 65% in the past two years as more platforms add support.

Now let‘s look at just how easy it is to add rich content card previews when linking out to other sites from your WordPress site.

Effortlessly Generate Cards for Supported Links

The simplest way to add a content card is to let WordPress handle it automatically.

When you add a link in the block editor or classic editor to a supported site, WordPress seamlessly fetches key metadata in the background and transforms it into a preview card.

For example, linking to another WordPress site will automatically pull the title, featured image, and excerpt into a clean card like this:

By default, over 98% of WordPress websites support automatic content cards through oEmbed discovery and other protocols. Many other major platforms also work out of the box:

✅ YouTube
✅ Twitter
✅ Instagram
✅ Flickr
✅ Medium

To instantly generate a rich content card:

1. Copy the URL of the page you want to link to
2. Paste the URL on its own line in your WordPress editor
3. WordPress automatically fetches data and converts it into a preview card

Adding rich link summaries with engaging images and descriptions takes just seconds.

How WordPress Automatically Creates Content Cards

Behind the scenes, WordPress utilizes oEmbed technology to seamlessly generate embedded content cards from supported sites.

oEmbed is an open standard that allows websites to fetch structured data for a URL and render it in a specified format.

For example, WordPress sends a request to YouTube for oEmbed data on a video link. YouTube‘s oEmbed endpoint returns details like title, thumbnail, and html for embedding the video player.

WordPress then takes this data to instantly generate a rich content card preview of the YouTube video right inline with the content!

Manually Generate Cards for Unsupported Links

For sites that don‘t support automatic oEmbed discovery, you can manually generate a content card preview using WordPress‘ built-in Embed block.

Here is the quick process to manually embed any link as a content card:

1. Add a new Embed block to your content
2. Paste the external URL you want into the interface
3. Click the Embed button

WordPress will fetch available data from the URL and generate a content card with the details.

You can also tweak settings like thumbnail image size, amount of content shown, customize CSS styling, and more.

The process is very similar to embedding a Twitter tweet, YouTube video, or other content. It just allows manually generating a preview card for any link.

Comparing Automatic vs Manual Content Cards

Automatically generated content cards pull data instantly without any configuration needed. However you are limited to platforms with oEmbed support.

Manually created cards allow embedding any link, but do require manually generating each one. You can customize styling and layout, but it is more work.

For frequently linked sites like YouTube and Twitter, automatic cards are recommended. For one-off links or unsupported platforms, use manual embedding.

Now let‘s look at how plugins can extend automatic content card support…

Expand Platform Support with Plugins

While many major sites work out of the box, some platforms like Facebook don‘t provide public oEmbed endpoints. Luckily helpful WordPress plugins step in to fill any gaps!

For example, the Facebook Plugin by Smash Balloon allows you to easily embed Facebook and Instagram posts automatically.

There are also plugins to add support for platforms like Slideshare, Flickr, Mixcloud, Giphy, and much more.

In fact, WordPress has the most extensive plugin library supporting just about every content platform with embeddable content cards.

So if you want to embed a certain type of content as a rich preview, odds are there is a plugin available to make it happen with just a link.

Customizing Your Content Cards

Here are some best practices for fine tuning your content cards:

Controlling Card Size

You can use CSS rules like max-width to constrain your cards to a reasonable size so they don‘t stretch the full column width:

.wp-block-embed.is-type-rich {
  max-width: 300px;
}

Cards will then scale responsively in your content without overflowing small viewports.

Custom Card Design and Layout

Leverage CSS to customize visual styling like colors, borders, spacing, fonts, etc. For example:

.wp-block-embed.is-type-rich {
  border: 1px solid #47bdec;  
  padding: 10px;
  border-radius: 5px;
}

.wp-block-embed__wrapper {
  background: #f0f9ff; 
}

You can even create custom templates for your cards complete with logos, icons, animations, and more using CSS and HTML over the output.

WordPress makes manually styling and laying out eye-catching content cards simpler than ever.

Final Thoughts

Integrating rich link previews into your site‘s content is an easy way to create a modern, engaging reader experience.

Content cards allow your visitors to better evaluate the valuable resources you link out to from your content. Think of it like an embedded tweet or YouTube video – except for links.

To quickly recap how to add rich content card previews in WordPress:

✅ Supported links automatically turn into content cards
✅ Manually embed unsupported links as cards
✅ Expand platform support with plugins
✅ Customize design and layout with CSS

We hope this complete guide covered everything you need to know get started adding rich content card previews in WordPress. Let us know in the comments if you have any other questions!