Everything You Need to Know: Open Graph, Twitter Cards & Rich Pins

Understanding what Open Graph Tags and Twitter Cards are, how to maximize their effectiveness, and how they work with the Social Warfare plugin.

Have you ever shared a link on social media and noticed how that link automatically produces a rich snippet? This is when you see a big image pulled in along with the title and brief description of the page being shared.

Well, these don’t happen by accident. This is the direct result of having proper meta data or “tags” added in the web page’s source code.

tl;dr Just buy Social Warfare and you’re all set.

In the case of social networks like Facebook, Google+, LinkedIn and a few others, Open Graph tags are the source of these rich snippets.

In the case of Twitter, however, there are Twitter-specific tags needed to populate media-rich snippets in tweets.

Additionally, Pinterest has a very simple requirement that, when activated, allows for pins to contain extra information much like the snippets for Twitter and other social networks.

Since social sharing has become such an integral part of the anatomy of a website, we thought it would be helpful to understand how these tags work and how Social Warfare manages to put their customization right at your fingertips.

Why are These Tags Important?

Shared links with carefully crafted Open Graph meta tags have the potential to garner far more visibility than those without them. Cyrus Shepard said it best in his article for Moz:

Think of it as conversion rate optimization for social exposure.Click To Tweet

Many website owners take the time to optimize their web pages for conversion, but many fail to understand that they can do this with their shared social content as well.

Just take a look at each network comparison below, contrasting the plain post type and a rich post type:

Facebook post rich snippet vs. no rich snippet:

Google+ post rich snippet vs. no rich snippet:

Twitter rich tweet vs. non-rich tweet:

Pinterest rich pin vs. non-rich pin:

The social posts with rich data are far more eye-catching than the ones without. On top of the added visibility, social networks gain further knowledge of your content and are able to make your content more searchable. Better search-readiness for your social content means more opportunity for discovery.

Richer content sharing means better social search discoverability. That's HUGE.Click To Tweet

And I’m sure we don’t have to convince you that you want your content to be discovered on social media better.

As such, we make sure that if you have Social Warfare installed, Open Graph meta tags and Twitter cards (if activated) will be generated for all of your posts and pages.

What are Open Graph Tags?

Open Graph meta tags are designed to communicate information about your website to social networks when links to your website are shared. These tags allow you to craft custom titles, descriptions, and images to be used when your pages are shared on Facebook, LinkedIn, and Google+.

So, much like when Google or another search engine will visit your site and look for the relevant data (or tags) in order to properly display your website in search results, social networks do the same thing. The only difference is, social networks are looking for these specific Open Graph tags (or Twitter tags).

Here’s a sample of what these tags look like in standard HTML:

<meta property="og:type" content="article" /> 
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />

Some WordPress themes will already insert these fields for you if they’ve implemented them alongside of any SEO optimizations. Some SEO plugins for WordPress offer Open Graph Tag and Twitter Card output as well. However, some themes or plugins will not give you the ability to customize these fields as our plugin does and will instead simply generate them automatically from the page content.

What are Twitter Cards?

Twitter cards are pretty much exactly like Open Graph meta tags, except that there is only one network, Twitter, that looks at them. Unlike Open Graph, Twitter actually gives you two types of cards that you can implement on your website:

• Summary Cards: Title, description, thumbnail, and Twitter account attribution.
• Summary Cards with Large Image: Similar to a Summary Card, but with a prominently featured image.

What’s the difference, you ask? Take a look for yourself:

As you can see, the large image cards take up a lot more real estate and are much more visually engaging than the standard summary card with a small image.

To generate these types of cards for your site, you need to output the following tags in the header of your web page:

<meta name="twitter:title" content="TITLE OF POST OR PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name="twitter:image" content="LINK TO IMAGE">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@USERNAME">

Twitter gives you the opportunity to identify both the author of the post/page as well as the publisher, which is typically the name of the website. Both of these values are not required, but do help add further data for those who would like to add it.

Twitter even offers unique insights as to the performance of your Twitter Cards via their suite of analytics tools. Click here to learn more about measuring your Twitter performance with Twitter Card analytics.

What are Pinterest Rich Pins?

Pinterest gives a far more diverse set of options for website owners who want to be very specific about the types of content being shared from their site. What they’ve done is categorized types of potential pins and created specific rich pins for them. These include:

• Article pins (Open Graph)
• Product pins (Open Graph)
• Place pins (Schema)
• Recipe pins (Schema)
• Movie pins (Schema)

For the most part, Article and Product pins are the dominant formats used. As you’ll see in the next section, we’ve decided to steer clear of anything that might interfere with SEO and as such our plugin only supports Article pins.

For Article and Product pins, Pinterest simply uses standard Open Graph tags as mentioned above. The only difference between an Article rich pin and a Product rich pin is that the <meta property="og:type" content="article" /> will have the appropriate type of pin listed in the content parameter.

Important: Unlike other social networks, Pinterest requires one extra step in order to have Rich Pins enabled for your site. Simply visit the Rich Pins Validator tool once you’ve got the propper meta tags added to your site and run one of your post URLs through the validator.

Do Open Graph tags or Twitter Cards have any impact on SEO?

Open Graph and Twitter Card meta tags were created specifically for Social Media sharing. As such, they have absolutely no impact on SEO.

Google and other search engines ignore these tags completely because they know that these are webmaster’s specific communications to Social Media sites and are intended to be different than what is presented to search engines.

Most of the social networks have multiple different tags and fields that they look at in order to populate the information needed to make a share look good. You might consider this a hierarchy of fallbacks wherein if they cannot find one meta tag to use for a title, for example, they then fall back to another.

For example, Facebook checks first for an Open Graph title tag, but if it isn’t present on the page, then they use the actual page title.

All of the networks except for Google+ and Twitter recognized Open Graph tags as the first place that they look for these bits of information. Twitter, of course, looks first for Twitter cards. Google+, however, looks first for Schema markup, and if that’s not present then they look at Open Graph tags.

Important: Although Google+ looks first for Schema markup, so does Google, the search engine, along with other search engines like Yahoo and Bing. As such, we will not use Schema for Google+. It is outside the scope of a social media plugin to use tags that could impact SEO. We only use Open Graph tags which Google Plus will use if Schema is not present on the page.

What specific Open Graph & Twitter Card tags are available and what does each one mean?

Open Graph tags and Twitter Cards use very specific tags to communicate very specific information to the various social networks. Here is a list of each of these tags, what they communicate to the social networks, some best practices to maximize your social conversions, and a few notes about how to customize these fields inside the Social Warfare plugin.

Title and Description

Definition & Usage: This title and description is what will be picked up by all the networks using Open Graph.

Best Practices:

• Keep your titles around 60 characters long.
• Users generally scan for the first three and last three words, make those the most compelling
• Don’t use hashtags in titles, it’s a waste

How the Social Warfare plugin handles these tags: You can customize this from the Social Media Title & Description fields on the Social Warfare custom options section of the post editor. We’ll also use these same two fields to populate your Twitter cards. If a Social Media Title or Description has not been added, we’ll use the title of the post or the post excerpt respectively to fill these tags.

Social Media Image

Definition & Usage: The Social Media Image field allows you to populate a large image into the share snippet.

Best Practices:

• Use Facebook’s image restrictions since they are the only non-dynamic image previews (1200px X 630px)
• Use minimal text as Facebook has restrictions on this also
• Avoid large amounts of the color red as image compression on most social networks tends to wreak havoc on that color

How the Social Warfare plugin handles these tags: If a Social Media Image has not been set, then we’ll look for a post thumbnail. If that’s not set, then we won’t be outputting an image tag.

Open Graph Author & Publisher

Definition & Usage: The Author tag refers to the individual who wrote the post and requires a Facebook username or a link to a Facebook user profile. The Publisher refers to the site itself and requires a link to the Facebook page that represents your website.

and is taken from the Facebook Author URL field on the user profile settings page in WordPress.

Best Practices:

How the Social Warfare plugin handles these tags:

The author information is taken from the Facebook Author URL field on each users profile settings page in WordPress.

The publisher information is taken from the Facebook Page URL field on the Social Identity tab of the Social Warfare options page.

Twitter Creator & Site

This works the same way as the Open Graph author and publisher. The creator Twitter handle is taken from the Twitter Username field of the user profile settings page.

The site is taken from the Twitter Username field on the Social Identity tab of the Social Warfare options page.

How does Social Warfare coordinate with Yoast’s Open Graph settings?

When developing the core logic for how we wanted to generate Open Graph and Twitter Card meta tags, we quickly realized that Yoast SEO also has options for generating these as well.

Since Yoast SEO is one of our absolute favorite plugins, we took special care to make our plugin not only detect the presence of Yoast SEO and it’s settings, but also to directly interact with it in order to create only one set of each tag, carefully crafted to get you the maximum exposure possible on Social Media networks.

Here’s how we craft these meta tags for you:

1. If Yoast is not present, we simply generate the tags without question so that you don’t have anything to worry about.
2. If Yoast is present and Open Graph tags are turned on in their settings, we do not output a set of Open Graph tags unless you manually craft at least one of our Open Graph fields on the post editor screen.
3. If a user crafts a title, description, or image for our Open Graph fields, then not only are we going to output that specific tag, but we’re going to ensure that an entire set of Open Graph tags are generated.

Here’s how we will populate the value for each field. We’ll go through each necessary field that needs to be output using the following sequence of checks to determine what to output in that field.

1. First, we’re going to check if you filled out the Social Media field in the Social Warfare options for that post. If that’s not filled out, we’ll move on to step 2.
2. Second, we’ll check if you filled out the Facebook field for Open Graph and Twitter fields for Twitter Cards in the Yoast SEO options for that post. If that’s not filled out, we’ll move on to step 3.
3. Third, we’ll check if you filled out the SEO field in the Yoast SEO options for that post. If that’s not filled out, we’ll move on to step 4.
4. If nothing else is filled out, we’ll automatically generate some content from the post.

If we determine that we need to generate Open Graph tags, we will turn off open graph tags from Yoast, and pull the values from Yoast into our own Open Graph tag set.

We don’t want to have two sets, but at the same time, we do want to use their values if they’re available. This allows the two plugins to work perfectly in conjunction with one another.

How do I test how my Open Graph, Twitter Cards and Rich Pins are working?

Just in case you want to test how your site is outputting your social meta tags, each network has built tools in which to validate your website data.

Facebook Open Graph Debugger

Facebook provides a tool called the Facebook Open Graph Debugger that allows you to simply input a link to your page and have them reexamine it instantly.

Visit Facebook’s Debugger

As mentioned above, Facebook scrapes your page automatically when your page is shared and looks for Open Graph tags. Once they do, they cache and reuse that information for about a week or so. So when you first add Open Graph tags, Facebook might not see them right away. Instead, they might continue to use the information they saw the last time they checked it out.

If you ever notice your shared posts are not looking as they should, you can use Facebooks’ debugger to rescrape your page and see if there are any errors.

Important: If you’re using Bitly link shortening, be sure to use the Bitly version of the link. Facebook will see that the Bitly link forwards to your page and use the open graph information from your page when the Bitly link is shared.

Here’s how you can find the Bitly link that Social Warfare uses for Facebook sharing:

1. Go to the post editor, navigate to the top and open the “Screen Options” tab at the top right of the page. Ensure that “Custom Fields” are activated.
2. Scroll down to the custom options section of the editor. From there, you can find the Bitly links for each network.
3. Grab the one for Facebook and put that through the debugger.

Twitter Card Validator

Twitter has the same thing in the form of their Twitter Card Validator.

Visit Twitter’s Validator

The same rules apply if you are ever encountering any trouble with your shared links on Twitter. Follow the same steps as outlined above with Facebook except replace the Facebook Debugger with the Twitter Card Validator.

Pinterest Rich Pins Validator

As mentioned above, you will need to utilize the Rich Pin Validator to activate Rich Pins on your site in the first place. And if you’re seeing any issues with your Rich Pins displaying correctly, you can use the same tool to troubleshoot.

Visit Rich Pin Validator

Happy Open Graphing, Twitter Carding and Rich Pinning!

Wow, you made it all the way through! That is one hefty piece of technical walkthroughs that you just finished. Give yourself a pat on the back.

We hope this article helps you better understand both how all this social card stuff works as well as how Social Warfare makes your life one-million times easier by handling it all for you.