Self Expression Magazine

Adding Open Graph Tags to Your Header for Social Media Optimization

By Lisa @Lisapatb
Story 476511431

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.

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.

SO, 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.

open graph tags


SO, learning to optimize your social presence is important! Leverage every asset that you have to do more for you. #socialmedia
Click To Tweet


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.

Therefore, 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 it.

Open graph tags are the easiest way to import data to 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.

Looking to save time managing social media? Posting, responding, and generating reports has never been easier! 👍#socialmediamanagementhttps://t.co/JCavsfP9ea pic.twitter.com/gZVwwXYsBk

— Inspiretothrive (@InspireToThrive) August 17, 2021

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.

There are several ways to add Open Graph tags to WordPress.

1. Using Yoast SEO Plugin Wordpress open graph tag

The easiest way to add open graph tags to your WordPress blog is with the WordPress SEO plugin by Yoast. You may have it installed already as it is a very popular plugin.

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 then you are ready to apply for rich pins! Happy pinning!

2. Open Graph and Twitter Card Tags Plugin

I use this plugin when I use a WordPress theme that I didn’t create. I can’t add open graph tags manually this way without creating a child theme.

Twitter cards are here to stay

This plugin will add the open graph tags you need for Facebook, Twitter, and Pinterest.

3. Manually Adding Open Graph Tags in WordPress

The hard way is to code the open graph tags yourself. This is my preferred method. I usually create my own themes and I can easily add the proper tags to my header.

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.

You can copy and paste the below code into header.php in a WordPress theme above the </head> tag.

Open Graph Tags for WordPress

The only thing you will need for this is to use a custom field. Where the key is “desc” and its value is the description is what you want to appear on social media.

The default WordPress editor using Gutenberg with its blocks may not have custom fields enabled. They are not gone. Here are the steps for enabling custom fields.

Validating Your Tags

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

Facebook Open Graph Validation

Twitter Card Validation

Pinterest Rich Pin Validation

Your Thoughts

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.

Finally, in the long run, it is also a way to future-proof your blog. This is because the open graph continues to be adopted 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 Twitter Cards and Pinterest Rich Pins? I would love to know more in the comments below.


Back to Featured Articles on Logo Paperblog