Understanding WordPress and Social Media Sharing
I’ve spent a lot of time recently trying to understand the principles behind social media sharing. In particular I have been learning how different social media sites “see” your content and present it to their users. As it turns out, there are a lot of different standards outs there that each social network uses to analyze your site’s content and prepare previews for use on their network. In this post I’ll review what I’ve learned about WordPress social media sharing. I’ll discuss the different standards that are used by each social network, and of course how can you ensure your own content is compliant with all of them.
FaceBook Open Graph
Developed by FaceBook, the Open Graph protocol is by far the most popular and well defined social media sharing schema around. From their own website, the Open Graph protocol is described as follows:
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
That’s pretty generic and not terribly useful for describing what Open Graph actually is, but what it comes down to is this: Open Graph is a set of well known HTML meta tags. Any Open Graph enabled system can read these tags to quickly analyze your content and prepare a preview if needed.
Open Graph specifies a lot of different well known tags, but there are 4 in particular you care about:
- og:title – The title of your Open Graph object, in this case the HTML page title.
- og:type – The object type which can be website, article, video, and many more
- og:image – A link to an image that can be used to represent the object.
- og:url – A canonical URL for the object. For website objects, this is usually just set to the page URL.
There are other Open Graph tags you can use for things like description and locale, but the ones above are the most important. And depending on which object type you use, you may need to specify other less common tags. For example, there is an Open Graph type of video. When you specify an object of this type, you can also specify additional tags such as director, actors, release date, and more.
This site implements Open Graph for all articles, and here is an example snippet of HTML for this page that implements some Open Graph tags:
<meta property="og:type" content="article" />
<meta property="og:title" content="Understanding WordPress and Social Media Sharing - Custom WordPress Websites" />
<meta property="og:description" content="I’ve spent a lot of time recently trying to understand the principles behind social media sharing. In particular I have been learning how different social media sites “see” your content and present it to their users. As it turns out, there are a lot of different standards outs there that each social network uses to …" />
<meta property="og:url" content="https://elvtn.com/wordpress/understanding-wordpress-social-media-sharing" />
<meta property="og:image" content="https://gct9k4x4m5db48zh-zippykid.netdna-ssl.com/wp-content/uploads/2018/02/wordpress-social-media-sharing-cover.jpg" />
These are just a handful of the Open Graph tags you’ll find on all the pages on this site. And since Facebook is the developer of Open Graph, they’re kind enough to provide a useful debugging tool to help troubleshoot Open Graph issues. With this tool, you can enter any URL and see all the Open Graph tags that are present, as well as any warnings or errors that need to be addressed. It also provides a graphical preview of how the page will look when shared on the Facebook platform.
Here is a screen shot of the Open Graph debugging tool in action:
Even though Facebook created the Open Graph protocol, other sites can and will use the Open Graph tags, so it’s important that you implement them at a minimum. You’ll see below that other social networks have their own protocols and schemas for describing content, but in almost every case they will use Open Graph if they don’t find the markup they are looking for. Therefore you should at least implement Open Graph tags on all of your content, and below you’ll see that it’s pretty simple to do for WordPress sites.
Not to be outdone by their rival social network, Twitter has also developed their own set of meta tags you can (and should) use to help describe your content. They call them cards, and just like Open Graph, it simply boils down to adding a handful of well known HTML meta tags to the header of all your pages.
Twitter cards are based on the Open Graph protocol and thus look pretty similar. The minimal set of meta tags you should add for all of your content is below:
- twitter:card – This is analogous to the Open Graph
- twitter:title – Same as Open Graph title, and usually just the HTML title from the web page.
- twitter:image – Just like Open Graph, this is the URL of a preview image to use
Here is an example of Twitter card tags from this page:
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Understanding WordPress and Social Media Sharing - Custom WordPress Websites" />
<meta name="twitter:image" content="https://gct9k4x4m5db48zh-zippykid.netdna-ssl.com/wp-content/uploads/2018/02/wordpress-social-media-sharing-cover.jpg" />
The Twitter card specification also allows for additional meta tags that help link your content you Twitter profiles:
- twitter:site – Twitter handle associated with the site owner.
- twitter:creator – Twitter handle associated with the author of the content.
These can be the same handle or different, or can be omitted entirely if you and your organization do not have Twitter accounts.
As mentioned earlier, Twitter will also honor Open Graph tags when the Twitter card tags are not found. You are free to mix and match as you see fit, but ideally you should use both. And just like with Open Graph, Twitter provides a handy card validator tool you should use to ensure your content is being analyzed properly.
Pinterest Rich Pins
In the world of Pinterest, the main data object you’ll be concerned with is pins, which are similar to Twitter cards. Pins are a graphical summary of web content, and luckily the kind folks at Pinterest have not introduced yet another set of meta tags for pins. Instead, Pinterest understands both Open Graph meta tags, as well as Schema.org markup (which we’ll discuss below). This means, once again, if nothing else your content should contain Open Graph meta tags and you’ll keep Pinterest happy.
Pinterest makes heavy use of the og:type meta tag we saw earlier. They have setup some detailed guidelines on how to set this for your content, but it really comes down to 3 values that will discuss briefly.
Suitable for most content. This can be how-to content, reference or research, news or current events, etc. Basically if your content doesn’t fir either of two types below, then use this. The normal Open Graph tags we discussed above will suffice for these cases.
This is suitable for sites that sell things. It will help generate pins that are geared towards advertising your products. When you using this type, there are additional meta tags you can (and should) add to each product to help Pinterest better understand what’s being sold.
<meta property="product:price:amount" content="14.99" />
<meta property="product:price:currency" content="USD" />
<meta property="og:band" content="Apple" />
<meta property="og:availability" content="instock" />
The amount and currency tags are required, while the others are optional.
As the name suggest this type is best suited for food bloggers. It’s a little more complex than the other two as it requires more than standard Open Graph tags to describe your content. For recipes, you have to include either Schema.org markup or use the h-recipe microformat to describe the various aspects of a recipe: ingredients, prep time, instructions, nutritional information, and more. All of these will help Pinterest create nicely formatted previews of your recipes that are great for sharing.
After you pick your content type from the 3 options above, there’s an important consideration when creating meta tags for Pinterest. Pinterest behaves slightly different from other social networks in that you proactively have to “enable” pins for your content. Whereas Facebook and Twitter have their own crawlers that constantly crawl the web like Google, Pinterest requires you to submit a link (just one) from your site once in order for them to begin analyzing your content. Luckily this is a one time process. Just pick any link from your site that contains any of the content type above and submit it here: https://developers.pinterest.com/tools/url-debugger/.
One final note on Pinterest. There’s a lot of information above, and no doubt it’s confusing. The bottom line is this: if you’re concerned with your content satisfying Pinterest markup requirements, I suggest you read their developer guidelines. Start with implementing Open Graph data (which is discussed below). If you’re running a simple blog, that will be sufficient. If you’re managing an e-commerce store or food blog, you’ll want to also ensure your content contains the additional meta data and markup to help Pinterest analyze and display your content in pins. This usually requires a 3rd party plugin. For food blogs I recommend WP Recipe Maker, and for e-commerce, assuming you’re using WooCommerce, I would recommend using the Yoast WooCommerce Plugin.
As mentioned earlier, schema.org is a generic way to classify your content so that web crawlers and social networks can better understand it. It’s a lot more general that Open Graph, as it can be used across a variety of content types. And not only does it let you classify objects, it also has mechanisms for classifying actions and relationships between objects.
Let’s look at an example. Say you run a movie blog, and you write a review of the classic 1985 movie Brazil. You could use schema.org to ensure search engines and other crawlers know you’re talking about the movie and not the country. There are 2 main ways to specify schema.org data in your content: adding attributes to your existing HTML elements, or using the JSON-LD or RDFa microformat in your header.
Using the first approach, your document might look as follows:
<div itemscope itemtype="http://schema.org/Movie">
<h2 itemprop="genre">Science fiction</h2>
<h2 itemprop="director">Terry Gilliam</h2>
<p>Here is a review of the 1985 hit movie Brazil...</p>
Notice there are 3 keys pieces of data that are used to create schema.org markup:
- itemscope: This is just a marker attribute that indicates the elements contained underneath the marked up element contain schema.org markup.
- itemtype: This is a reference to one of the many well known schema.org schemas, in this case the Movie schema.
- itemprop: A reference to any of the available properties for the selected item type. In this case, the Movie schema allows us to define things like director, year released, actors, reviews, and much more.
Using the JSON-LD approach you would add a snippet like below into the head section of your HTML:
"genre": "Science fiction",
"director": "Terry Gilliam",
This is a contrived example, but it shows how you would incorporate schema.org markup into your own content. The number of schemas available is pretty staggering and there is a schema available for just about every type of content you would possibly write about. Each schema will have its own set of item properties you can specify. Keep in mind that the properties for each schema are not all or nothing. Specify as many or as few as you want, just remember the more you specify the more that search engines and crawlers will understand your content.
So who uses schema.org? As mentioned above, Pinterest uses it for creating recipe type pins. Google, as one of the co-founders of schema.org, uses it extensively for both their search engine results and Google Plus social network. In fact, they provide a schema.org validator tool to help ensure your schema.org markup is valid. Aside from Google, most other search engines will look for schema.org markup to help create more meaningful search results on their sites.
For site owners, you can also use Google Search Console to see which schema.org markup Google has found in your content, as well identify any errors in the markup that may impact Google’s ability to analyze your data.
Implementing Social Media Meta Data in WordPress
Up until now, we’ve looked at different ways of specifying meta data for your content. Whether you’re working with Open Graph, Twitter Cards, or schema.org one thing is clear: creating all the extra data for these protocols would be impossible to do manually. Luckily WordPress is designed to handle such bulk tasks, and there are some very high quality plugins available to help add various markup to your content automatically.
First and foremost, Yoast SEO is my goto plugin for all things SEO in WordPress. Not only does it help you craft content that will satisfy Google and other search engines, but it handles a lot of tedious tasks for you automatically. For example, it manages your sitemap.xml file, ensuring all your latest content is included without you ever having to worry about it. It also adds Open Graph meta tags to your content, using suitable default values to ensure you’re specifying the minimum set of meta tags. For example, it uses the page title you set in WordPress for the Open Graph title tag. It will also use any cover image you set on your pages and posts for the Open Graph image tag. It does the same thing for Twitter cards, automatically inserting your site and user Twitter handles when you configure them.
All of this is great, because it means you spend more time writing content and less time specifying boring meta data that your human visitors will never see. However, there may be times where you want full control over the Open Graph and Twitter tags on your posts and pages, and Yoast is great for that too. In fact, Yoast is so powerful and flexible it’s part of my standard WordPress plugin stack that I use on every site. The free version will satisfy most site owners, but definitely check out their premium version if you’re serious about blogging and making money off of it.
For schema.org, things gets a little more complex. Remember that schema.org is much more broad than Open Graph. It aims to describe a wide variety of content types. There is no single plugin that will do it all. The Yoast plugin mentioned above will automatically insert a couple pieces of schema.org markup to your content:
- Adds RDFa markup to breadcrumbs.
- Adds JSON+LD to your home page for site search links.
Aside from that, there isn’t much schema.org support. Yoast does offer some additional plugins, as well as a premium version of their core SEO plugin, that does provide additional markup support for things like WooCommerce products and embedded videos. In addition, some themes also provide schema.org support out of the box. For example, it’s no secret I love the Jupiter theme, and one reason is that it inserts schema.org markup on blog posts and other areas that make sense.
In general, you should look for plugins that support schema.org for your specific content. I mentioned WP Recipe Maker earlier for food bloggers. It lets you easily enter recipe data (ingredients, steps, nutrition info, etc) and also knows how to map that data into the proper schema.org Recipe markup. Likewise, The Events Calendar plugin lets you easily manage a calendar of events. It also knows how to translate your event data into the schema.org Event and Calendar markup. Plugin developers can usually provide more relevant and targeted schema.org markup for their products than a generic schema.org plugin can.
Before I took a serious look at WordPress social media sharing, I admit I was clueless about all the different ways of marking up content. I had heard of Open Graph and schema.org, but had no idea what either meant. But after doing some research, neither system is difficult to understand. I would summarize them as follows:
Open Graph simply requires the addition of certain well-known HTML meta tags into the header section of every page on your site. These tags will not affect how humans see your site, but they will help social networks categorize your content and prepare meaningful previews of the content when shared on those networks.
Schema.org is more generic and powerful means of describing content. It can be implemented either with tags inside the HTML body or with JSON-LD or RDFa markup in the header section. Schema.org provides hundreds of schemas that can categorize just about any type of content.
At a minimum you should implement Open Graph for all of your content. Using a plugin like Yoast is a great way to start, and serious bloggers should consider their premium version for even more control over how your content is categorized and annotated. Additionally, specialized sites like food blogs should use specialized plugins to help create and manage content. These plugins often implement the schema.org markup that is appropriate for that content type.