SEO Social Meta tags: SEO for developers – part 2

Social shares and links are good for SEO. However, you need to make sure the social Meta Tags are set in order to optimize conversion rates for social shares. And although the primary effect is conversion rate optimization, the secondary of this will be better SEO through more links and mentions. All this simply by sharing the right link, image and text.

This blog entry shows you how to utilize Open Graph or Schema.org meta tags to ensure the right content is presented in social shares.

Facebook
Twitter
LinkedIn
Google+
Pinterest
Full example

Facebook

(Reference: http://ogp.me/ )

In order to help Facebook select the link, image and text you want to display in your shares, you need to utilize the Open Graph meta properties. Put these in the header of every page on your website.

An example of this is the following snippet:

<meta property="og:title" content="Title of your article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/canonical-url-of-the-article.html" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description of your article" />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:app_id" content="APPID"/>
<meta property="fb:admins" content="Facebook Admin ID" />

og:title is the title of the webpage.

og:type is usually article, but could differ for audio, video, books or profiles. Read more about Open Graph Object Types [http://ogp.me/#types]

og:url should be the same as the canonical URL of the webpage.

og:image defines the image you want to share (should be an image URL). Besides the og:image url, you should also set the og:image:secure_url to an alternate HTTPS image URL. If necessary, use og:image:height and og:image:width to set height and width of the image (in pixels).

You should use og:description to create short description of the webpage.

The og:site_name property can be used for the overall site name.

If you want to view facebook insights for the webpage, you should also include the fb:app_id tag. fb:admins defines the facebook administrators, who are permitted to view the facebook insights (numerical id of the admins comma-separated if you have more than one).

 

Title, type, URL, Image and description should always be present.

 

You can test your Open Graph data by using Facebook Debugger, https://developers.facebook.com/tools/debug

Twitter

(Reference: https://dev.twitter.com/cards/overview)

Twitter uses Twitter Card data to select the right data for shares. After implementing the meta tags, you can validate the meta tags with the validator found here: https://cards-dev.twitter.com/validator

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitter_handle" />
<meta name="twitter:title" content="Title of your article" />
<meta name="twitter:description" content="Description of your article" />
<meta name="twitter:image" content="http://www.example.com/image.jpg" />

twitter:card is the type of the Twitter Card. See [https://dev.twitter.com/cards/overview] for a list of cards.

twitter:site is the Twitter username the card should be attributed to. You need this meta tag for analytics [https://dev.twitter.com/cards/analytics]

LinkedIn

(Reference: https://developer.linkedin.com/docs/share-on-linkedin )

Like Facebook, LinkedIn uses Open Graph metatags for presenting the right content. Following is an example of what you need for LinkedIn:

<meta property="og:title" content="Title of your Article" />
<meta property="og:description" content="Description of your article" />
<meta property="og:url" content=" http://www.example.com/canonical-url-of-the-article.html " />
<meta property="og:image" content="http://example.com/image.jpg" />

Google+

(Reference: https://developers.google.com/+/web/snippet/ )

Google uses Schema.org microdata for social shares. This means you need to add the following attributes to your head tag.

<head itemscope itemtype=”http://schema.org/Article”>

The schema.org uses the following meta tags:

<meta itemprop="name" content="Title of your article" />
<meta itemprop="description" content="Description of your article" />
<meta itemprop="image" content="http://www.example.com/image.jpg" />

Pinterest

(Reference: https://developers.pinterest.com/rich_pins_article )

Pinterest uses either Open Graph like Facebook or Schema.org semantics like Google to display the right data (called Rich Pins).

Open Graph

The 3 required fields for Pinterest are the following:

<meta property="og:title" content="Title of your Article" />
<meta property="og:description" content="Description of your article" />
<meta property="og:type" content="article" />

Besides those, the following are strongly suggested to add as well.

<meta property="og:url" content=" http://www.example.com/canonical-url-of-the-article.html " />
<meta property="og:site_name" content="Name of the website" />

Schema.org

Just like Google+ you can use Schema.org itemprops for Pinterest.

<meta itemprop="name" content="Title of your Article" />
<meta itemprop="description" content="Description of your article" />
<meta itemprop="image" content=http://www.example.com/image.jpg />
<meta itemprop="url" content="http://www.example.com/canonical-url-of-the-article.html" />

If you want to validate your Rich Pins, you can use the following URL: https://developers.pinterest.com/rich_pins/validator

The validator is used in the approval process for enabling Rich Pins as well.

Full Example

The following is a full example of what needs to go into your <head> tag to make sure the social media are displaying the right data.

<head itemscope itemtype="http://schema.org/Article >
<!-- Open Graph Meta Data for Facebook and LinkedIn -->
<meta property="og:title" content="Title of your article" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/canonical-url-of-the-article.html" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description of your article" />
<meta property="og:site_name" content="Site Name" />
<meta property="fb:app_id" content="APPID"/>
<meta property="fb:admins" content="Facebook Admin ID" />

<!– Twitter Card –>
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@twitter_handle” />
<meta name=”twitter:title” content=”Title of your article” />
<meta name=”twitter:description” content=”Description of your article” />
<meta name=”twitter:image” content=”http://www.example.com/image.jpg” />

<!—Google+ and Pinterest Schema.org annotations  –>
<meta itemprop=”name” content=”Title of your article” />
<meta itemprop=”description” content=”Description of your article” />
<meta itemprop=”image” content=”http://www.example.com/image.jpg” />
<meta itemprop=”url” content=”http://www.example.com/canonical-url-of-the-article.html” />

</head>

I have used articles as an example, but all 3 annotation types allows for other types of data, like for example products or persons.

 

See also my first blog entry on Seo Key Elements for developers, 

Leave a Reply

Your email address will not be published. Required fields are marked *