If we have good content and that attracts relevant audience to our website then most probably some people will share our content on their social accounts pages. But sometimes the problem occurs when our shared content doesn’t appear properly on social stream of our admirers and those natural shares generate little or no traffic.
Luckily there is a way, through which we can control what appears with proper title, image and description. Many of us know about Meta tags like the title tag and description tags. But most of us don’t know that there are many other Meta tags that social networking sites like Google+, Facebook, Twitter and Pinterest also read. The reason that these social networking sites have started using special metadata is to give a better visibility on social sites that are accompanied with proper images, descriptions and links. Defining these Meta tags facilitate our audience too by letting them share with ease.
Each social network site has its own preferences. Pinterest and Google Plus give preference to Schema tags, but they also support Open Graph Protocol tags, that are preferred by Facebook, Google+ and Pinterest as well.
The Open Graph tags go between the <head> </head> section of the webpage. The most commonly used tags are.
Example of Pinterest Rich Pin
Example of Google +1
Example of Facebook
Twitter has defined its own tags known as Twitter Cards. These tags enable your links to present more information whenever they are tweeted (Harri just wrote a post you should read about what Twitter Cards are and how to easily create WordPress Twitter Cards with the TCWP Plugin). Similar to Open Graph tags, the Twitter card tags also go between the <head></head> section of a webpage. Most commonly used Twitter tags are.
Example of Twitter Card
There are many plugins available on WordPress.org that facilitate you to add Open Graph and Twitter Card tags on your WordPress posts and pages. Most notable of them are:
- SEO by Yoast
- SEO Ultimate
- TCWP Plugin (Twitter Cards only)
- JM Twitter Cards (only for Twitter Cards)
- Open Graph Protocol Framework (Only for Open Graph tags and recommended for developers)
The process of setting these plugins is quite similar. For this tutorial we are going to use SEO Ultimate plugin to define special Meta tags to make our posts rich media friendly. Implementation of these tags has now become a part of on-page optimization of a website. It will also enrich our technique that we use to automate social sharing of WordPress posts.
Note: You should use only one plugin that has similar functionality. If you have WordPress SEO by Yoast already installed, then it is better to configure that plugin to use Open Graph tags and Twitter cards.
Step 1 – Installing latest version of SEO Ultimate
It is recommended that you should install the latest version of SEO Ultimate. The easiest way to do that is through WordPress admin dashboard-> Plugins -> Add New and type in “SEO Ultimate”.
Then install and activate the plugin.
You will get a new tab in your WordPress admin dashboard after the plugin is activated.
Step 2 – Configuring SEO Ultimate
To configure the Open Graph and Twitter cards navigate to SEO-> Open Graph from the WordPress admin dashboard. At first you will see a lot of options and fields don’t get intimidated, we don’t have to use all of them.
First we will go through “Sitewide Values”. These values define the Meta tags that remain constant on entire site e.g. the “og:sitename”, “twitter:site” etc.
Contains the site title by default, but if you want you can customize it. However it is recommended to keep the main site title to give a better idea to your connections on social media.
Facebook App ID
If you are running a Facebook page that is associated with your website then it is recommended you setup Facebook App. It will give you better insights about actions performed on your social pages.
First login to your Facebook account then go to developers.facebook.com and create a new app.
A pop-up form will open. Fill in the required details and then proceed.
Facebook will generate a unique App ID, copy and paste it in “Facebook App ID” field in SEO Ultimate Open Graph setup.
Twitter Card Tags
There are total of 30 fields available. But we don’t have to use all of them to optimize Twitter cards. It is more than enough if we use following tags.
The values that you set in the “Sitewide Values” for Twitter cards are values that remain constant throughout the site. There are total of 7 Twitter card types available as of today. The most used Twitter card, however, is the “Summary Card”, that displays title, description, thumbnail, and the Twitter account that is linked with website. But before you can use them, you have to validate Twitter cards. First fill in the following fields in “Sitewide Values” tab with relevant information.
When done hit “Save Changes”. These values will appear at the homepage of your website when you check the source code.
To validate your Twitter cards navigate to https://dev.twitter.com/cards and follow the four simple steps to get validated.
As the preferred card is “Summary Card” we are going to proceed with “Summary”. Alternatively, if you find another card that is suitable for your needs then proceed with that. Just keep in mind that you need to validate all card types separately. For this tutorial, we are going to use “Summary Card.”
Fill in the fields under “Standard Tags” with the same values that you filled in your WordPress SEO Ultimate plugin.
After you are satisfied with the preview of the Twitter card, then proceed to “Validate & Apply”. Just type in the website URL and hit “Go!”
A new pop-up form will appear that will ask for some basic information.
It is a fact that in some cases it may take weeks to validate though. That is pretty much it for basic setup in “Sitewide Values”. In the next tab “Default Values”, we are going to set the default rich object type for WordPress posts, pages, and media. If you are running a blog, then most suitable Open Graph Type will be an “Article” or “Blog” and for Twitter card type select the one that you validated for, for this tutorial we will use “Summary Card”.
Settings Tab in SEO Ultimate
In the “Settings” tab keep the Open Graph Data checked and HTML Validation as “Use the non-validating code prescribed by Open Graph and Twitter.
Blog Homepage Tab in SEO Ultimate
In this tab you can define the values for the homepage of your website. These will be used only for Open Graph tags. For the homepage, Twitter cards are picked up from “Sitewide Values”.
Posts, Pages, and Media Tabs in SEO Ultimate
These tabs list down posts, pages and media in a list form. You can easily edit three common values for each post type, i.e. title, description and image. This plugin allows adding basic fields that are required to optimize our pages and posts to make them appear as rich objects on major social sites.
New Options in “Add New Post”
Just like other SEO plugins, Ultimate SEO also provides additional fields to add new posts or pages. The “Social Networks Listing” allows you to define the values for Open Graph and Twitter cards. The title, description and image values will remain same for both Open Graph and Twitter Cards.
Debugging and Validating
Each major social networking site has its Validator or debugger, to test and preview how the links would appear when shared on social media.
Google Structured Data Testing Tool: This tool will not show you the preview of post shared on Google+, but it will show which metadata are present and readable by Google. Your properties will appear under RDFA-node properties.
Twitter Validation Tool: We have already gone through it in detail. You can use this link to preview the Twitter cards too.
Facebook Debug: After implementing Open Graph tags, simply paste the URL of your site containing the tags. It will show you the object properties.
Pinterest Rich Pins Validator: Similar to Twitter cards, you need to validate your Rich Pins before they can be used by Pinterest. The process is simple; just enter the URL containing the Open Graph tags. If you have followed the entire tutorial you will have no problem at all. You will see the message “Your Pin’s been validated! Apply Now.”
Your application will be verified in some time.
By using these Meta tags, we can optimize the way titles, images, descriptions and other details appear on social media. It can help us in getting more traffic from social sites, and links with better information tend to get more shares and natural links. Also people tend to trust the links that contain more information rather than clicking on naked links or short URLs. It will also help if you are using techniques to automate social sharing of your WordPress posts.
Which WordPress plugins do you use to implement these meta tags? Feel free to mention them in comments.