Wednesday, 5 April 2017

Understanding Social Meta Tags – Simple Yet Easier Ways to Control the Way Your Content Appears in Social Media Shares

Ever pasted a link into Twitter or Facebook only to find that the related image has nothing to do with the page content? Did you notice that description of post reads like an SEO Mad Lib? Now you need to wait and contemplate a lot before you actually share it.



Did you know there is a technique marketer can use to control experience produced by content as it shows up on various social networks such as Facebook, Google+, and Twitter. For instance, let's assume someone copies a link to a specific index page of a blog named (Harry Harris) in their Facebook status update:

Harry Harris blog header

The index page for the blog of Harry Harris, podcast host, and author of “XXXXX”: http://harry.blog/

As soon as the URL http://harry.blog/ is pasted into the status update of a Facebook page, the results are a lack-luster piece of content.

The result definitely has a room for improvement in inspiring or even compelling a viewer to click. The problem here is that the following three haven’t been developed in a face to attract a click:

- Image
- Headline
- Description

In fact, it is possible that someone may trash this post instead of sharing it. But the good news is that the title, description and image can be specified by a content publisher. These pop up automatically when a user shares a link on various social networks can all be specified by the content publisher. Professionally optimized social share content looks good. This also increases the chance to attract clicks.

Social share optimization is highly prioritized by experts. Your posts are most likely to click on the post when the image is set to fill the available space. The headline should also include a benefit statement that does not fail to compel a viewer to click.

You need to focus on customizing the headline, description and image of your pages via using social meta tags. Try out the tutorials on the following topics for better results:

- Pro Tips for Crafting Social Meta Tags
- Using WordPress? Social Meta Tags in WordPress Plugins
- Open Graph Tags
- Twitter Card Markup
- Schema for Sharing on LinkedIn, Google+ and Pinterest

How to Create Social Meta Tags - Pro Tips


One of the major reasons to use social meta tags is to control the manner in which your content is displayed in feeds as compared to allowing Facebook, Twitter and various other social platforms generate the headline, description and image for you.
Here's what you can actually do:

- Adjust or recycle unused title ideas. You can do this via using these as headlines in social media content.
- Test varied versions of an image via using Open Graph tags and Twitter Card tags as the testing ground for social media marketing.
- It is important to tweak images and content based on the network. Display text and images that will appeal to the unique interests of distinct audience of each network.
- Twitter will default to Open Graph tags in a case, no Twitter Card markup is on the page. This helps users achieve more controlled results while including both kinds of social media markup on a page.

Social Meta Tags for WordPress Plugins


If you’re using WordPress, several plugins make it possible to implement social meta tags without ever having to write a single line of code.

Some options include:

- WPSSO for social markup across the major social sites
- JM Twitter Cards for the full range of Twitter Card types
- WordPress SEO by Yoast for Facebook, Open Graph tags and Twitter Cards

WordPress plugins for social meta tags are a fast and easy way to link custom headlines, descriptions and images with WordPress posts. This can also be done in web pages on a page-by-page basis.

Yoast SEO WordPress plugin UI


Facebook Open Graph data input fields in the Yoast SEO WordPress plugin. If you were to click on the Twitter bird tab, you would see the same fields for customizing Twitter Card markup.

If you’re using different software to operate your site, the social markup for Facebook Open Graph, Twitter Cards and the other major social networks is below.

Open Graph Tags


The Open Graph protocol can be referred to as the standard for Facebook for implementing social meta tags. Presently, it has been recognized by all the major social platforms such as Google+, LinkedIn, and Twitter. This also means that LinkedIn, Twitter, and Google+ will pull the headline, description and image very often as indicated in the Open Graph tags.

The significant Open Graph tags are as mentioned below:

Open Graph tag - Description of tag
og:title - title or alternate title of the page that displays as the headline
og:url – Page URL
og:description – Page description. The Facebook displays 300 characters (at the maximum)
og:image - URL of unique image, recommended dimensions 1200×630 pixels
og:type - article (otherwise defaults to “website”)

In case, you are serious about getting Facebook shares from your web pages formatted with a headline (title), it is crucial that both description and image of your choice look like this:

Make sure the social meta tags look like in the HTML code:

<meta property=”og:title” content=”Title, Inc.” />

<meta property=”og:url” content=”https://www.xxx.com/blog/keyword/” />

<meta property=”og:description” content=”title” />

<meta property=”og:image” content=”https://www.xxxx.com/blog/wp-content/uploads/2016/08/keyword.jpg” />

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

In order to make sure that Open Graph tags are configured appropriately, you need to use Open Graph Debugger of Facebook. This will let you have a look at an error report and see a preview of how a shared URL will be seen when posted to Facebook.

Expert Tip – Using the Open Graph Debugger really helps when updating OG tags of a page. This will force Facebook to do a fresh scrape of the URL. The process will result in Facebook pulling the new social meta tag data. Otherwise, it may pull from a cache instead of the updated tags.

Twitter Card Markup


Twitter Cards can be used to attach photos or videos to the Tweets. Here, you can also add a few lines of code. There are many different types of Twitter Cards. The most commonly used ones include Summary Cards and Photo Summary Cards:

Listed below are the basic markup tags for Twitter:

twitter:card - Card type (full list of card types)
Twitter Card tag - Description of tag
twitter:title - Title or alternate title of the page viewed as the headline
twitter:description - Brief description in less than 200 characters
twitter:url - URL of page
twitter:image - URL of unique image (the recommended minimum dimensions measure 440×220 pixels)

Good Twitter Card social meta tags will appear as the following mentioned below:

<meta name=”twitter:card” content=”summary_large_image” />
<meta name=”twitter:title” content=” keyword@xyz” />

<meta name=”twitter:url” content=”https://www.xxx.com/blog/seo-checklist/” />

<meta name=”twitter:description” content=”Heading of your choice.” />
<meta name=”twitter:image” content=”https://www.xyz.com/blog/wp-content/uploads/2016/08/image.jpg” />

If you wish to see how your page look like when pasted into a tweet, simply input a URL into the Twitter Card validator. This will help you to see a preview and make sure you have properly configured your Twitter Card social markup.

A Tip from Expert:


When updating a Twitter Card tags of a page, it is advisable to use the Twitter Card validator. This will force Twitter fresh scrape URL resulting Twitter to pull the new social meta tag data. In case you fail to use validator, it might pull from a cache instead of the updated tags.

Using Schema


It is important to use the Schema for sharing on Google+,  LinkedIn, and Pinterest. Open Graph tags are read by LinkedIn, Google+ and Twitter. For social markup, many of the social networks recognize and support Open Graph as a default standard. However, schema markup has come up with a new solution for Google+, Pinterest and LinkedIn.

The use of schema markup for customizing title, description and image related to Google+ or Pinterest will make social meta tags appear as the following:

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

<meta itemprop=”name” content=”Blog Post Title”>

<meta itemprop=”description” content=”This a description of blog post”>

<meta itemprop=”image” content=”http://www.domain.com/image.jpg”>

Hence, this schema markup will go into the HTML code associated with your post right before the closing head tag, </head>.

It is easy to validate 'schema markup' via using the Google Structured Data Testing Tool. There are several tutorials available online by experts on using the schema and structured markup for improving the display of your content. You may go through these tutorials to be able to get the best out of social meta tags.

The best thing to do is consider social media content as a tool for social advertising. When it comes to establishing your success in the present age dynamic digital landscape, strategic social markup is the best option. It helps with enhanced distribution.

If you are serious about maximizing your social distribution, make sure you focus on controlling the way content is displayed in feeds than allowing popular social media platforms such as Twitter, Facebook, etc. to pull content from the page for you. You can easily create messages about your blog post via optimizing the meta tags that control social media content. These messages will be targeted towards the distinct audiences on each social network.

Both page title tags and meta description tags facilitate boosting organic search engine rankings. Similarly, social meta tags are crucial elements in HTML that boost social exposure. These also help with the following:

- Boost social media traffic
- Increase click-through rates


EmoticonEmoticon