It can be a full time job trying to keep up with all the suggested markup code to include in your website. Every Search Engine and Social platform seems to have its own way of categorizing and describing your site, some perfect and others a not so much.
Don’t despair. You have options that allow you to control how sites like Google, Facebook, and Twitter display information about your site and articles! Here is a brief insight into what markup and code you should include to make search results for your site the very best they can be.
OG, What Now?!
The Open Graph protocol enables any web page to become a rich object within the social graph by giving developers a method of marking up data, making it compatible for multiple platform presentation. When used with Facebook, OG allows any web page to have the same functionality as any other object on Facebook. The advantage of using OG is inyour ability to control the look and feel of your content when it is shared on Facebook.
As an example, the following is the Open Graph protocol markup for The Star Trek First Contact IMDB:
<meta property=”og:image” content=”http://ia.media-imdb.com/images/M/MV5BMTg4OTYwODY4MF5BMl5BanBnXkFtZTgwNTg2NjIyMDE@._V1_SY317_CR0,0,214,317_.jpg”>
<meta property=”og:type” content=”video.movie”>
<meta property=”fb:app_id” content=”115109575169727″>
<meta property=”og:title” content=”Star Trek: First Contact (1996)”>
<meta property=”og:site_name” content=”IMDb”>
<meta property=”og:description” content=”Directed by Jonathan Frakes. With Patrick Stewart, Jonathan Frakes, Brent Spiner, LeVar Burton. Captain Picard and his crew pursue the Borg back in time to stop them from preventing Earth’s first contact with alien life. They also make sure that Zefram Cochrane makes his famous maiden flight at warp speed.”>
A great way to test the look of your OG markup is to copy and paste a link into any facebook status and Facebook will grab the information and display what it finds:
“Mi Vida Local” Schema of Things
While Open Graph is great for media focused pages, it lacks in the ability to attribute local data to the source. This is especially important if the website is a physical location that is selling the item listed on their site at their fixed location and want people in that area to find them and buy the item. Here is where Schema markup is most useful.
On the Webfor.com website, our Schema local markup looks like this:
<span itemscope itemtype=”http://schema.org/LocalBusiness”>
<span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<span itemprop=”streetAddress”>11805 NE 99th St, Ste 1360</span><br />
<span itemprop=”addressLocality”>Vancouver</span>, <span itemprop=”addressRegion”>WA</span> <span itemprop=”postalCode”>98682</span><br />
</span></span>
<span itemprop=”telephone”>(360) 747-7794</span><br />
<span itemprop=”telephone”>(503) 512-0770</span>
Schema in conjunction with Micro Format allows you to display a multitude of data types in a way that search engines understand and follow, giving you more control over your marketing strategy.
A very comprehensive guide to Micro Data and Schema.org can be found:
http://seogadget.com/micro-data-schema-org-guide-to-generating-rich-snippets/
A couple of great tools to build schema local markup are:
https://technicalseo.com/tools/schema-markup-generator/
https://www.google.com/webmasters/markup-helper/
Getting Carded at the Twitter Bar
Last but not least is Twitter markup. This particular set of tags give you control of the format that your page is seen when you or someone else tweets a link from your website. A twitter card ensures that your tweet expands to a preview of rich content with a title, summary and, if you wish, an image or video. These three reasons alone will considerably increase the engagement that tweet receives, whether it is the the actual link or the retweet that spreads the word about your business.
An example of the code:
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@Webfor”>
<meta name=”twitter:title” content=”Thinking About Linking”>
<meta name=”twitter:description” content=”It is important to have a plan of implementation and attack when considering your linking strategy”>
<meta name=”twitter:creator” content=”@webformichael”>
<meta name=”twitter:image:src” content=”https://webfor.com/images/thinking_about_linking_ad.jpg“>
<meta name=”twitter:domain” content=”https://webfor.com/“>
A great tool to use to test your Twitter Card is:
https://dev.twitter.com/docs/cards/validation/validator
Statistics suggest that sites that utilize markup experience higher shares, and retweets of content, not to mention onsite engagement as Google and users alike come to trust and value your site. Remember that you only have to establish markup onceto reap long-lasting benefits on the web. As algorithms move toward increasing the weight that social interaction lends to ranking and subsequently traffic, the time to adopt markup is now.