Page Markup for Social Media and SEO

An alternative title for this post might be How to train a robot. Google, Facebook, Twitter and others depend upon the clues that you provide them to understand the content that you share. And since each platform is different they each have slightly different requirements. Understanding and meeting those requirements is a first step in the battle to spread your content and be heard above the noise.

Facebook

Below is a Facebook post with a link. From the link Facebook reads the page and the markup and extracts elements to display in the post:

coschedule.facebookpost.edited

To extract these elements, Facebook reads the open graph meta tags in theĀ  head area of your web page:

		<!-- Place this data between the <head> tags of your website -->
		<title>Make this the library title and use the important keywords. Maximum length 60-70 characters<</title>
		<meta name="description" content="Page description. Again use your keywords and make it clear. No longer than 155 characters." />
		
		<!-- Open Graph data -->
		<meta property="og:title" content="Title Here, may be different than page title" />
		<meta property="og:type" content="article" /> <!-- if this is not an article, lookup the open graph types to find the right one -->
		<meta property="og:url" content="http://www.example.com/" />
		<!-- Optimize this image for facebook. This is what Facebook says:
			Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. 
			At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
			If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.
			If smaller, facebook will treat it as a thumbnail. 
		-->
		<meta property="og:image" content="http://example.com/image.jpg" /> 
		<meta property="og:description" content="Social Media Description Here. Again may be different but not too different." />

Many times you may want to use different information for your social media sharing. These tags will let you set a different title and/or description, even a different image for social media. However, be careful since if they are too different, Google may see you as trying to game the system and will your ranking.

Twitter

Posting of an article by CoSchedule on their twitter feed.
Twitter posting for page markup

Twitter is a different channel and therefore developed it’s own tags to account for the differences. To Twitter the world is made up of card and not graphs. So the following tags are needed in your head tag for Twitter:

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary"> <!-- this is the type of card -->
<meta name="twitter:site" content="@publisher_handle"> <!-- the twitter feed for the publisher -->
<meta name="twitter:title" content="Page Title"> <!-- again, this can be different for twitter, just too different -->
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle"> <!-- This is the twitter handle of the author. If the author is prolific it helps with credibility and SEO -->
<-- Twitter Summary card images must be at least 200x200px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">
<!-- Twitter Image Sizes 
Minimum to appear expanded 440 x 220 pixels.
Maximum to appear expanded 1024 x 512 pixels.
Appears in stream collapsed at 506 x 253 pixels.
Maximum file size of 5 MB for photos, and 3 MB for animated GIFs. -->

<!-- Or use the new twitter large image tag instead:
	<meta name="twitter:image:src" content="http://www.example.com/image.jpg">
	Notice the extra :src. 
	Use with card = summary_large_image
-->
<!-- Have an image gallery? Use the following tags -->
<meta name="twitter:image0" content="http://www.example.com/image0.jpg">
<meta name="twitter:image1" content="http://www.example.com/image1.jpg">
<meta name="twitter:image2" content="http://www.example.com/image2.jpg">
<meta name="twitter:image3" content="http://www.example.com/image3.jpg">

 

Google+

Step back with me in time to the time when the web didn’t even have Social Media. It was a time when computer scientists still dreamed of structuring all the pages of the web so they could be mined for data like a database. We called that the semantic web and it promised great things. But, unfortunately, the web is a messy place and the dream is still a dream.

However, those effort led to a number of standards that eventually became Schema.org and also influenced the latest version of HTML – HTML5. Why is this important?Adding structure to your pages helps you train the robot. So for Google+ we add additional tags which are part of the Schema.org standard:

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

And, yes, these are essentially duplicates of the open graph and card tags above but use the Schema.org syntax.

Going beyond sharing

Google and the other search engines are engaged in a struggle to develop the perfect assessment of relevancy. On one side are their algorithms and on the other side are the the numerous companies trying to game the system. The search engines are constantly seeking any additional information that they can use to limit the effectiveness of the gamers. So any help we can give them in this struggle helps our ranking.

One of the most important aids to the search engines is information that links an article to a person or the organization publishing the content. People and organizations have history and that history allows the search engines to determine the reputability = consistency and sharing success over time. If the content comes from someone that has demonstrated that their content is liked and used then is must be more valuable.

Google and the other search engines, use authorship to establish this connection between the content and the author and publisher of the content. Schema.org helps with this as well but unlike the previous tags these tags are used in the body of the content itself. Here is an example of how to markup your content so that the author and organization are easy for the robots to find:

 

<div itemprop="author" itemscope itemtype="http://schema.org/Person">
	By <a href="http://mysite.com/author" itemprop="url" rel="author"><span itemprop="name" content="Jim Keeney">Jim Keeney</span></a>, <span itemprop="title">Founder</span>
</div>
<div itemscope itemtype="http://schema.org/Organization">
	<span itemprop="name">Baltimore Social Media Meetup</span>
	<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">123 Main Street</span>, <span itemprop="addressLocality">Baltimore</span>, <span itemprop="addressRegion">MD</span><span itemprop="postalCode">12345</span>
	</div>
	<img itemprop="logo" src="http://www.example.com/logo.png" />
	Phone: <span itemprop="telephone">410-555-1234</span>
	<a href="http://www.meetup.com/Baltimore-Social-Media/" itemprop="url">http://www.meetup.com/Baltimore-Social-Media/</a>
</div>

This is just the type of the iceberg when it comes to using Schema.org to structure your content. Schema.org has defined over 300 different entities and the list is growing. For your business you will want to focus on the critical ones. Authorship is one that is important to content providers but for a restaurant you would want to looks at the examples under restaurant are Schema.org.

Testing your work

There are a number of tools available to help you test your work before you publish and Twitter and Pinterest require that you submit your site for approval.

Facebook

Here is the Facebook debugger: https://developers.facebook.com/tools/debug. It will also provide information on your Twitter tags.

Twitter

Here is the Twitter validator: https://dev.twitter.com/docs/cards/validation/validator. With Twitter you must submit your site for approval. The validation tool is used for both validating and submitting for approval.

Google Structured Data Testing Tool for Rich Snippets (Schema.org)

This tool can be used for any structured data, microdata or other formats. It will work both on a whole page and on just a snippet of HTML. http://www.google.com/webmasters/tools/richsnippets

Pinterest Rich Pins Validator

Pinterest also require that your website be approved. The approval process is described in detail in there verify your website help center document. Here is the link to their validation tool: http://developers.pinterest.com/rich_pins/validator/.