Last week we took a refined look at which meta tags are required and/or relevant in 2017, what they do, the HTML syntax, and how exactly they should be implemented. Social media meta tags aren't required, but they help webpages become more sharable, and as a result, they'll boost social media engagement.
Everything from the text used to the image chosen can be tweaked to increase the amount of likes, shares and retweets, and often enough, this text isn't the text that appears in the <title>, or an image that appears on the website. Often enough, the most sharable text/image combination is specifically designed for each social channel and hidden from view on the website itself.
With these meta tags, you can create unique text/image combinations for sharing.
An Example
When you share this site on social media, this is the image that is used:
However, as you can see, this image doesn't appear on the website itself. In fact, there aren't really any sharable images on the website — none that would look attractive in a tweet anyway. That's where social media meta tags come into it.
Open Graph (Facebook and Pinterest)
Open Graph is a syntax used by both Facebook and Pinterest. For Facebook, it allows developers to specify which title, URL and image to use when sharing the webpage (+ some other things), and for Pinterest it's pretty much the same.
Here's what a standard Open Graph snippet looks like:
<meta property="og:url" content="[url]">
<meta property="og:type" content="article">
<meta property="og:title" content="[title]">
<meta property="og:description" content="[description]">
<meta property="og:image" content="[image url]">
<meta property="article:author" content="[your facebook url]">
<meta property="og:site_name" content="[site name]">
<meta property="article:published_time" content="2014-08-12T00:01:56+00:00">
Note 1: Facebook has a few other optional meta tags (slight variations for image and video sharing) that you might want to check out.
Note 2: the "article:author" property should be your name or website name for Pinterest, although this conflicts with the Open Graph requirements for Facebook. If you're into programming, here's an interesting solution for that — if not, simply use whichever is most beneficial to you or Schema alongside Open Graph.
If you want to do the complete opposite and block users from pinning your content, this is the code snippet you're looking for:
<meta name="pinterest" content="nopin" description="[no!]">
Standard Meta Tags (Twitter)
Although it has some Open Graph elements, Twitter uses a standard meta tag syntax to define sharable content, and also lets you validate the meta tags with their very own card validator (Twitter calls them cards).
Here's the snippet you need:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="[@websitetwitter]">
<meta name="twitter:creator" content="[@yourtwitter]">
<meta property="og:url" content="[url]">
<meta property="og:title" content="[title]">
<meta property="og:description" content="[description]">
<meta property="og:image" content="[image url]">
Note: there is a difference between twitter:site" and twitter:creator" — "site" is your website's Twitter handle, and "creator" is the handle of the author.
Schema (Google and Pinterest)
Schema is mostly used to define sharable content on Google+, however Pinterest also uses Schema as an alternative to Open Graph (it's totally fine, if not recommended to use both). Schema is a little longer and less attractive than Open Graph, but it's also richer as it allows the opportunity to specify related content. Besides that, you never when Google will suddenly make Schema more useful.
*ahem…SEO*
Here's the snippet you need for Google+:
<meta itemscope itemtype="http://schema.org/Article">
<meta itemprop="headline" content="[title]">
<meta itemprop="description" content="[description]">
<meta itemprop="image" content="[image url]">
Google+ also uses the Open Graph syntax as backup, and Pinterest also has a few optional meta tags for Schema that I'd recommend reading about. As mentioned before, it's best to use all three syntaxes as a safety measure.
Bonus: Facebook "Instant Articles"
Instant Articles are articles that load faster on Facebook because they're hosted on Facebook. Don't worry, there's no "duplicate content" penalty (as mentioned in last week's article) because the "canonical URL" meta tag is used.
While not strictly a meta tag (it's actually a [HTML alternative of the article), it's certainly an interesting way of getting your content out there.
Bonus: Pinterest "Rich Pins"
Pinterest has a very strong audience of food lovers and online shoppers, which is why there are options to share content as "Rich Pins", which essentially formats the shared Pins as recipes and purchasable products respectively.
Let's take a look at Open Graph for Pinterest Rich Pins.
<meta property="og:type" content="product">
<meta property="og:title" content="[title]">
<meta property="og:description" content="[description]">
<meta property="og:url" content="[url]">
<meta property="og:site_name" content="[site name]">
<meta property="og:price:amount" content="[cost]">
<meta property="og:price:currency" content="[currency]">
<meta property="og:availability" content="instock">
Recipes are a little more complex as the markup is fused with the HTML body itself — there's a Schema method, then there's a full-HTML method — you'll need to decide which is best for you. You can validate Pinterest Rich Pins here.
If you don't want your content to be shared as Rich Pins:
<meta name="pinterest-rich-pin" content="false">
Phew, that was a handful! Hope this helps!
