Follow
As per Wikipedia… Metadata is “data about data”. Metadata about webpages are called Meta tags. Technically Meta tags have two components; Meta description and Meta keywords but logically Title is also part of Meta tags or Metadata for webpages. Together they are called Title and Meta tags of a webpage. There are two other components of Meta tags, which are ALT and TITLE attributes of images and TITLE attribute of a hyperlink.
Summing up the above, webpage Metadata consists of:
– Title
– Meta description
– Meta keywords
– Image ALT / TITLE
– Hyperlink TITLE
Meta tags are important because it’s the most efficient way for webmasters to inform search engines about their websites. First three Meta tags are defined within the <head></head> element of any HTML webpage, image ALT and hyperlink TITLE attributes are defined as per the occurrences of respective images and hyperlinks. Whether you are optimizing for a brand website or a blog article meta data is equally crucial. Duplicate meta data affects website ranking, you might be blacklisted from the search engines as well, so be very careful while choosing your meta data for the different pages of your website.
With the evolution of semantic web Metadata has gone to the next level and a number of protocols have emerged out of the corner including Open Graph, Schema.Org, Twitter Card, oEmbed, etc. The traditional Metadata still works very well and is a must have for any webpage but with the implementation of various structured Metadata your website can scale up beyond traditional SEO to online branding via social channels.
Traditional Metadata…Titles and Descriptions
We have already discussed about the five components of traditional Metadata; they consists of Title, Meta description, Meta keywords, image ALT / TITLE attribute, hyperlink TITLE attribute.
Open Graph Protocol
As per the definition available in Ogp.me … “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.” It was started by Facebook and currently adopted and recognized by all the leading players in digital marketing world. It requires you to include Open Graph Meta tags within the <head></head> element of any HTML webpage in addition to the traditional Meta tags. OGP Meta tags structure the look of a content snippet when it is shared in Facebook newsfeed. It also notifies the search engines about identity of any webpage in a structured and relevant manner.
The five required properties for every page are:
- og:title – The title of your object as it should appear within the graph, e.g., “The Rock”.
- og:type – The type of your object, e.g., “video.movie”. Depending on the type you specify, other properties may also be required.
- og:description – The description of your object what gets displayed when your content or products get shared. Just like the standard meta description it should be catchy and relevant to your website content
- og:image – An image URL that should represent your object within the graph.
- og:url – The canonical URL of your object that will be used as its permanent ID in the graph, e.g., “http://www.imdb.com/title/tt0117500/”.
There is no character limit for og:description tag as of now.
Facebook displays only the first 300 characters of the description, in Linkedin it is restricted to first 225 characters while in Google Plus the description tag display limit is 200 characters
E.g., Facebook OG:Description Tag Display
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
<html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
Schema.Org
As defined in a Google Webmaster support article… “schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a structured data markup schema supported by major search engines.” Schema.org markups are called rich snippets and they can be created using microdata. Unlike Open Graph Meta rick snippets are technically complex to integrate, which is why Google has provided a tool to test your rich snippet markup implementation called Google Structured Data Testing Tool. There are several free tools available over the Internet that helps you generate rich snippet code for your specific requirements. Microdata Generator is one such tool.
Schema.org is preferred by Google over RDFa or microformats. Schema markup can lead to higher clickthrough rates by enhancing your search engine listing.
Twitter Card
Twitter Card is the new kid on the block as far rich snippets and structured Metadata are concerned. As per Twitter’s definition… “With Twitter Cards, you can attach rich photos, videos and media experience to Tweets that drive traffic to your website. Simply add a few lines of HTML to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.”There are various card types available like summary card, photo card, gallery card, app card, product card, etc. Twitter Card comes with the support of strong analytics so that developers can measure the performance of cards.
Twitter card allows tweets containing external links to display in a richer format, with more content visible similar to the Open Graph tags which give the site owners the option to determine how their posts and pages will look like when shared on Facebook. Twitter card allows you to create a comprehensive tweet that goes beyond the 140-character limit.
oEmbed
As per definition… “oEmbed is a format for allowing an embedded representation of a URL on third party sites. The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.” Social networking websites like Flickr, Pinterest and Slideshare support oEmbed to a great extent. Because of its complexity and popularity of other protocols like Open Graph Meta, Schema.Org rich snippets oEmbed is still not very popular with developers.
About Mithu Sarkar
Speak Your Mind