How to Setup Open Graph and Twitter Cards with WordPress

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.

  • og:title
  • og:description
  • og:url
  • og:sitename
  • og:image
  • og:type

Example of Pinterest Rich Pin

Pinterest Rich Pin Example

Example of Google +1

Google+1 Share Example

Example of Facebook

Facebook Open Graph Example

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.

  • twitter:card
  • twitter:site
  • twitter:creator
  • twitter:title
  • twitter:description
  • twitter:image:src

Example of Twitter Card

Twitter Card Example

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:

  1. SEO by Yoast
  2. SEO Ultimate
  3. TCWP Plugin (Twitter Cards only)
  4. JM Twitter Cards (only for Twitter Cards)
  5. 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”.

Search SEO Ultimate

Then install and activate the plugin.

2. Install SEO Ultimate

You will get a new tab in your WordPress admin dashboard after the plugin is activated.

3. Ultimate SEO Options

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.

Sitewide Values

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.

Site Name
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.

Facebook App

A pop-up form will open. Fill in the required details and then proceed.

Facebook - Create New Ap

Facebook will generate a unique App ID, copy and paste it in “Facebook App ID” field in SEO Ultimate Open Graph setup.

Facebook - App ID

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.

  • twitter:card
  • twitter:site
  • twitter:domain
  • twitter:creator
  • twitter:title
  • twitter:description
  • twitter:image:src

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.

  1. Twitter:site
  2. Twitter:creator
  3. Twitter:description
  4. Twitter:title
  5. Twitter:image:src

When done hit “Save Changes”. These values will appear at the homepage of your website when you check the source code.

5. Twitter Card Source Code

To validate your Twitter cards navigate to https://dev.twitter.com/cards and follow the four simple steps to get validated.

0.1 Twitter Card Introduction

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.”

Twitter Card Catalog

Fill in the fields under “Standard Tags” with the same values that you filled in your WordPress SEO Ultimate plugin.

2. Twitter Cards Try and Validate

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!”

Twitter Card Aprroval

A new pop-up form will appear that will ask for some basic information.

Twitter Cards Approval form

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.

Add New Post - Social Networks Listing

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.

Google Structured Testing Tool

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.”

2. Pinterest Rich Pin Validator

Your application will be verified in some time.

Pinterest Rich Pins

Final Note

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.

  • Updated on:
  • Posted Under: Tips
Post Author: Ahsan Parwez

Ahsan is an advocate of Open Source platforms specially WordPress. By profession he is a technical SEO and WordPress Geek. He is also quite interested in PC Gaming, Gadgets and Cats. 

Disclosure
Got something to say? Join the discussion.
  1. Web Design Delhi says:
    Hello there! Extremely good article! I’m a usual website visitor to your website. Keep up the fantastic work, I read few articles on this internet site and I believe that your weblog is very interesting and contains lots of great information.
  2. Narendra Modi says:
    Hi post is good, but I want to see how to use twitter card with SEO Yoast plugin.
  3. Alex MacArthur says:
    I've tried plugins like this in the past, and found them to make some strange assumptions about content I want to use for Open Graph, or just be waaaaaay too much code bloat for what I want to use it for. So, I made my own - Complete Open Graph. I think it's the perfect balance of works-out-of-the-box, and yet flexible enough for developers to filter as they need. You should check it out!

Leave a Reply

Your email address will not be published. Required fields are marked *