Social Meta Tags: Open Graph and Twitter Cards

There are different ways to publish website content appropriately on social networking sites such as Facebook, twitter etc. We strive to include social media metadata in all pieces of content that we publish. This allows us to optimize the content for sharing it on Twitter, Facebook, and Google+ by defining exactly how titles, descriptions and images will appear on social streams.

Similar methods are significant for SEO as well. Studies say that including optimized images and H1, H2 & H3 tags help content to spread which usually leads to increased links and mentions.

Meta Tag Definition

A Meta tag is a tag (that is, a coding statement) in the Hypertext Markup Language (HTML) that describes some aspect of the contents of a Web page. The information that you provide in a Meta tag is used by search engines to index a page so that someone searching for the kind of information the page contains will be able to find it. The Meta tag is placed near the top of the HTML in a Web page as part of the heading.

How Social Meta tags can improve website ranking?

As we know by using Meta keywords, description and title tags in the website page can improve search ranking. The same method applies for pages shared on Facebook and twitter as well.

Implementation of Open Graph and Twitter Cards

Open graph and twitter cards can be implemented in various ways on the pages of website. It is usually flexible to create fields for Facebook and twitter Meta titles, Meta description etc. This allows website owners to quickly customize Meta for both social media platforms and each of website pages when posting new content.

Screenshot below will help you understand how it looks like:

og:title : Title tag is the top most heading for the content displayed, similar to your normal HTML title tag which is used in search engine. While creating title tag character limit should be less 90 characters.

Example:

og:image : By using an image tag, you’ll ensure that an image will be alongside the content you are sharing. This way it stands out against all of the other text-based status updates people see in their timelines. An open image has to be at least 50px by 50px, but preferably bigger than 200px by 200px. Also the image can’t be more than 5 MB in size.

Example:

og:url : In this tag, we should place the URL of the page that we are sharing. By using this tag, you will ensure that all shares go to one unique URL that we shared.

Example:

og:description : This tag is also similar to your HTLM meta description tag which will showcase description of the page. Character limit for this tag should be around 290 characters.

Example:

Also we can add og:type for different social media platforms as follows:

• Twitter Cards: Summaries, Images, Galleries, Apps, Video, Audio, and Products
• Pinterest Rich Pins: Products, Recipes, Movies, and Articles
• Google+: Articles, Blog, Book, Event, Local Business, Organization, Person and   Reviews
• Facebook: Articles, Photos, Audio, Video, and more

Implementing Open Graph and Twitter Cards can be relatively complicated job. However, both Facebook and twitter platforms allow for great flexibility with site’s marketing strategy. Website owners can improve CTR, custom URL’s, title tags, description tags, keywords tags and more. Both of these platforms can help conduct social media marketing.

Types of templates that can be used:

• Minimal Template
• Standard Template
• Full Template
• Product Template

Full social media tag template:

Tools used for approval of different social media platforms

Twitter validation tool

We must have domain approved by this validation tool for twitter cards. After implementation of twitter cards, simply enter your URL into validation tool and select “submit for approval” button.

Facebook Debugger Tool

For Facebook we don’t need any approval but this tool will help us to see information about the tags we implemented.

Google Structured Data Testing Tool

Google Webmaster Tool use the structured data testing tool to test authorship markup and preview will appear in search results.

Pinterest Rich Pins Validator

Pinterest also requires an approval process to enable rich pin functionality. Use the Rich Pin Validator tool to test your data markup and apply for approval.

So use the social media tags correctly and the make the most of your social media promotions.