Adding Open Graph Tags to Your Header for Social Media Optimization

By Lisa @Lisapatb

Open Graph Tags For Your Blog

Open graph tags are a blogger’s best defense. Social media optimization has become paramount to the success of bloggers due to the effects of Google’s algorithm changes. Penguin and Panda reduced the currency of links. While still important, they don’t have the same value for SEO. Bloggers need to take a proactive stance to prepare themselves for future changes or they will always find themselves at the whims of others.

Learning to optimize your social presence is important! Leverage every asset that you have to do more for you. Don’t leave things to chance.

What are Open Graph Tags?

Facebook introduced us to the open graph in 2010. It was an evolution of their previous tool, Facebook connect. The open graph allows you to import/export data from Facebook. If you have ever used Facebook comments on your blog or added a like button, you were using the Facebook open graph API to do so.

What people do not know about the open graph is how it relates to social sharing. Remember, we are talking about optimizing our social media presence. We can use these open graph tags to define how our posts look when they are shared on social networks! Finally some control!

Open Graph is About Presentation

Open graph data allows us to define the title, author, image, and content of a post. It uses a particular type of markup that resides in your header.

‹meta property=”og:site_name” content=”Inspire to Thrive”›

This tag tells Facebook to attribute the post to the website “Inspire to Thrive.”

If this looks familiar, it should. Twitter Cards also use open graph data! Lisa did an amazing post on how to apply for Twitter cards. I highly recommend you read.

Open graph tags are the easiest way to import data to the social networks. In fact, just last month Pinterest introduced rich pins! Yes, Pinterest is now using open graph data to import the author, title, image, and url for pins. Very cool stuff. That is why I wanted to write this post. By the end of it, you should know how to add these tags. I hope you will apply for rich pins.

Add Open Graph Tags in WordPress  

The easiest way to add open graph tags to your WordPress blog is with the WordPress SEO plugin by Yoast. I love this baby.

You may not know this, but there is a social tab! The appropriate open graph tags will automatically be applied to your header when you fill in your information. For those on WordPress blogs, this is the best way to go because it doesn’t require any knowledge of coding.

The good news, if you have added open graph tags using WordPress SEO than you are ready to apply for rich pins! Happy pinning!

Manually Adding Open Graph Tags in WordPress
The hard way is to code the open graph tags yourself. This is my preferred method.

When you deactivate a plugin, you lose the functions it created. If you add these functions yourself then they stay for the life of your blog.

Remember, back up your files before you make any changes.

Add this Snippet to your Functions.php File.

Using the above WordPress Snippet add this under
$tags['og:type'] = ‘article’; to use Twitter Cards.

$tags['twitter:card'] = ‘TYPE OF CARD’;
$tags['twitter:site'] = ‘USERNAME with @ FOR YOUR BLOG’;
$tags['twitter:creator'] = ‘YOUR USERNAME with @’;

Adding Open Graph Tags in Blogger 

Add this snippet to your Blogger template in the header section

Add the following tags to your template before ‹/head› to implement Twitter cards.
‹meta property=”twitter:card” content=”TYPE OF CARD”›
‹meta property=”twitter:site” content=”USERNAME with @ FOR YOUR BLOG”›
‹meta property=”twitter:creator” content=”YOUR USERNAME with @”›

Validating your Open Graph Tags

Of course, you will want to make sure that you have added your open graph tags properly to your blog. Faceboook has its own validation tool that you can use to do so.

Facebook Open Graph Validation

Twitter Card Validation

Pinterest Rich Pin Validation

More Thoughts on Open Graph Tags and Social Media Optimization

Personally, I feel that snippets generated by open graph tags give a blog that professional feeling. Caring about the presentation of your content shows others that you are serious. Most importantly, it gives you control over how your content is shared on social networks.

In the long run it is also a way to future proof your blog. This is because the open graph continues to be adapted by new social networks (like Pinterest). Adding these tags now means that you will be ahead of your competition.

How do you feel about the introduction of Twitter cards and Rich Pins?

Photo Credit: Bethan on Flickr [CC BY-NC-ND 2.0]