Social Media Meta Tags – Technical Guide to Optimize Post for Social Media

How do you make sure that you reach to a broader audience? How do you optimize your outreach and realize your ultimate goal?

Well that’s the power of social media platforms as they possess the amazing ability to integrate any web page into a social graph. When you update new content, ‘Time to publish content on social media’ and ‘Composition’ are two most important parameters. Here we’ll talk about the composition of a post and how to make your post stand out. The basic idea is to inform the social sites about the configuration of content that you are going to display. Facebook provides an option to use Open graph meta tags to customize how your website is shared. These open graph tags allow developers to leverage Facebook in new and exciting ways. If you browse through Facebook and see a custom thumbnail, title and description around a piece of content, that’s open graph tags in action. In fact, considering the potential almost every social media platform is using these ‘New age meta tags’. All other major platforms like Twitter, LinkedIn, and Google+ also recognize Open Graph tags. These tags influence the performance of your links on social media. They affect sharing potential of your content and should be an integral part of any social media strategy in 2015. Adding Open Graph to your own site is quite easy. It can be an added function to your theme, or by using a ready made plugin. There are different kinds of open graph tags that you can add to your page. The complete list can be seen on the Open Graph Protocol homepage which highlights the usage with different mediums like video, music, books e.g. whilst the standard usage will only consist of information such as title, description, image and a URL. Let’s take a detailed look at the most important Meta tags for primary social platforms:

  Facebook open graph tags

  • og:title – This is almost like a normal html title tag that a search engine would use.

Example: <meta property=”og:title” content=”How to add Open Graph”/>

  • og:type – This tag shows the type of content that’s been shared. It could be a video, picture, blog post. Some examples are web (website, article, blog), Entertainment (book, movie, game), People (actor, author, politician), Business (company, hotel, restaurant)

Example: <meta property=”og:type” content=”new article”/>

  • og:description – This is almost similar to the html meta description tag because it is used to describe your content.

Example: <meta property=”og:description” content=”Are you tired of old school SEO? New age methods to make your content rock and sizzle on every platform“/>

  • og:image – This is how you ensure that a specific thumbnail will be shown when the content is shared. This directly leads to higher conversion rates.

Example: <meta property=”og:image” content=” http://abc.com/wp-content/themes/abc/img/abclogo.png”/>

  • og:url – At times when you have more than one URL for the same content, this ensures that all shares go to one URL.

Example: <meta property=”og:url” content=” http://abc.com/blog/”/>

  • og:site_name– This indicates the name of your website.

Example: <meta property=”og:site_name” content=”abc Corp”/>

  • fb:admins – This informs that you are the site owner, and it connects your Facebook fan page to your own website.

Example: <meta property=”fb:admins” content=”233373532″/>

Open graph Meta tags in action

facebook open graph tags

Meta Tags To Optimize for Twitter

Similarly, Twitter Cards let you stand out as it allows additional content to be generated which shows up on feeds automatically. Remember a little “View summary” button below the tweet. In fact, this could be a big opportunity to make your tweets stand out in crowded Twitter feeds.

 

  • twitter:card–Different options for Twitter: photo (for images), player (for videos), and summary (for everything else).

Example: <meta name=”twitter:card” content=”summary”>

  • twitter:url – There are times when you have more than one URL for the same content. This will ensure one URL gets all the tweets.

Example: <meta name=”twitter:url” content=” http://abc.com/blog/ “>

  • twitter:title – Make sure it’s got the right keyword density and character count should be limited to 70.

Example: <meta name=”twitter:title” content=” How to add Open Graph”>

  • twitter:description – Again, don’t stuff with keywords and keep it upto 200 characters.

Example: <meta name=”twitter:description” content=” Are you tired of old school SEO? New age methods to make your content rock and sizzle on every platform “>

  • twitter:image – Images have to be less than 1 MB in file size and can’t be smaller than 60px by 60px.

Example: <meta name=”twitter:image” content=” http://abc.com/wp-content/themes/abc/img/abclogo.png”>

Once you’ve created the twitter card, don’t forget to validate.

Open graph Meta tags in action (this time it’s twitter)

twitter open graph tags

Meta Tags for Pinterest, LinkedIn, Google+

Open Graph tags are equally useful for every social network as each one of them recognize OG tags as a default industry standard but we do have another solution for Google+, Pinterest and LinkedIn, that is the ever important schema markup. Schema.org markups can be used when creating rich product pins for Pinterest as well and as they are supported by Google and other search engines, you can acquire the desirable SEO value. Please remember that this markup is more complex than just using Open Graph header markups because the tags must be in HTML body. You can customize the title, description and image associated using schema mark up. The social tags look like:

<html itemscopeitemtype=”http://schema.org/Article”>

<metaitemprop=”name” content=”Your Blog Post Title”>

<metaitemprop=”description” content=”Give a description of blog post”>

<meta itemprop=”image” content=”http://abc.com/wp-content/themes/abc/img/abclogo.png”>

Don’t forget to validate your schema markup using Google’s Structured Data Testing Tool

Another illustration

google plus open graph tags

 Why You Need Social Meta Tags

Strategic content markup for social sharing is a crucial technique channel in today’s digital age. It’s important to control the way your content is displayed on popular social platforms. Timely content analysis along with intelligent optimization can increase the overall impact of your campaign. Social Meta tags are instrumental in boosting your traffic and with a little bit of code, or a simple plugin and you can gain those amazing benefits. It’s almost missing out on an opportunity to draw more clicks and views. So, if you are bored with the ‘Meta tags’, try Open Graph tags and you’ll be positively surprised.

More Resource:

Image – Moz, Digitalinsights

4 comments

Leave a Reply