Open graph meta 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.
Table of Contents
Open Graph Tags For Your Blog
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.
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 meta tags allow 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 open graph meta 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 meta 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 
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.
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.
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
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.
- IFTTT Will Help You Achieve These 5 Productivity Goals Easily - October 25, 2022
- Adding Open Graph Tags to Your Header for Social Media Optimization - September 9, 2021
Hi Susan and Lisa
This is a really simple (especially if you have Yoast as I do) tweak to optimize your blog for social media.
And what could be more important these days?
I never knew I could add open graph tags right through my Yoast SEO plugin.
So I’ll start using it now.
Thanks so much!
-Donna
Hi Donna, I’m so glad Susan could be of help to you with this updated post from 2013! That is awesome 🙂 I hope things are well where you are and have a great weekend 🙂
Hey Susan,
Nice post and yes, social media is very important factor in blogging as it helps in driving traffic to our blog and also attracts many readers. open graph is a new term for me and I learned lots of new thing after reading this post. I am using wordpress SEO plugin by yoast and now I am surely gonna use Open graphs tag. Thanks for sharing this post.
I am using them for many days. Recently started to use Twitter Meta Tag, by Yoast Plugin. Got approved ! Thanks to yoast.
Yoast is pretty awesome 🙂 It is great to see a developer that regularly updates his plugin as the online landscape changes.
Hello Mrs Silver,
This concept seems somehow difficult to understand. You say it is a tool that can help me define how my posts will look like when they are shared on social networks. On the other hand you said this tool helps you import/export data from Facebook.
Sharing posts from my blog on social networks it is important and if Open graph can help me configure the title, images etc better than it is a good idea to try. I don’t understand the import/export from Facebook part. Why should I import data from Facebook?
Then you gave us a snippet to help us add code for Twitter cards.
I will be honest and say that I do not understand the idea of the post. Yes, I will search info about Open graph to see what is all about. At this moment, I think I need a tool to help me better configure what I share on social networks. There are many times when you want to upload a post on a particular social network and you cannot use the picture you want or you get crappy results. If Open graph can help me with this, then yes, it is interesting.
Have a wonderful day
I am sorry this was a difficult post. It is not the easiest concept to explain. It is much like markup that you would use for search snippets. Open graph lets you define for every post the appropriate picture, author credit, title, and description when a post is shared on social networks.
The import/export bit really isn’t important. I only mentioned it to give a history of the open graph for people that want to learn more about what it does. It can do a great deal more, but that is really best left for developers to deal with.
I highly recommend researching the topic further.
I”ve heard open graph before, but I’m still confuse about how to use it and the functions. It’s true that social media is an alternative for us to get traffics, It’s worth try it to improve both of SEO and social media SEO…
It really isn’t something that you use. It is a tool of communication basically. It is a protocol that tells the social networks about attributes related to the website without you having to do it yourself. Much like a robots.txt file tells a search bot what parts of your website to index.
Seriously you have done a lot of effort in research and creating such a wonderful post thanks once again, i have subscribed to this site and will look after to it.
Very cool! You will learn a lot if you stick around here. Lisa and her friends are great.
Hi Susan,
i think “Open Graph Tags” are great extra tools you can use to get more attention and more clicks on the social media sites,
especially if you can come up with different attractive titles for your same post,
you can come with different creative titles, or share pictures and use them with Open Graph Tags for social media,
more attention and more click rates! you don’t have to your post title and lose s.e.r.p rank or anything!
Many thanks and Best wishes!
Thank Mitch!
Hi Susan, I must say this a really informative post, I had just a little knowledge about facebook open graph and twitter cards before now but i have added to my knowledge by reading this post. As a blogger i have learnt to read more and try out new things and i must say am trying this one out.
Thanks for sharing
~Bob
Not a problem Bob, glad you found it useful. Have a great week and lot me know if you need any help.
Hi, Susan! While aware of Twitter Cards, thanks to Lisa, and Pinterest’s Rich Pins, I didn’t realize they fell under the Open Graph umbrella. Now, I know. 🙂
I use Yoast on my sites, so I’m happily set up to make use of these tools. I employ Twitter Cards, but haven’t made the move to add Rich Pins. Yet. 😉
Rich Pins for bloggers just opened up in June. It is only being implemented for the big guys like New York Times. Though I am awaiting the day I receive an email saying that I have been approved. I don’t really know what it will do though!
I think it is great that Pinterest decided to utilize the open graph instead of creating something new. It means that the protocol is becoming a standard.
Hi Susan,
I’ve always adopted Yoast SEO for my Open Graph Tags, it was the easiest method for myself, I do highly recommend bloggers to use Twitter Cards, giving that little extra bit of information on Twitter when your articles are tweeted and ReTweeted is a huge benefit.
Great to hear Karen that you are already ahead of the game! I think Yoast is pretty awesome for giving such a great plugin to the WordPress community for free. And keeping it updated!
There is no doubt social SEO is catching up, and along with Open graph, I also recommend to add Twitter meta cards, which can easily be added by Yoast SEO plugin.
I highly recommend to add custom description for Facebook, in the post edit section. This will make your content more viral on Social-media.
Completely agree with you. Thanks!
Hi Susan,
Nice of you to share this information with us today and welcome to Lisa’s place.
I’ve had issues with Facebook pulling in the right information for awhile now so sometime last year I purchased a plugin that would pull in the image I said and it worked for quite awhile. Like everything else though it stopped being consistent. So a friend of mine created a social sharing plugin and I asked him if he would include this feature and he just released it last month. It works beautifully and since I definitely need a social sharing plugin there is no need for me to code my blog.
I don’t use WordPress SEO because I have Thesis but because it does have a few other things combined in with it that I could get rid of a few more plugins I’m thinking of installing it anyway so that I can get the Twitter Cards in place. I hate installing a lot of plugins so if I can use one verses three I’m in.
Thank you for sharing this though because it’s great knowledge to have down the road.
I hope you have a wonderful week Susan because I know Lisa sure is!
~Adrienne
I am kind of interested in knowing what plugin your friend created and if it open to the public.
I have had a lot of issues getting Pinterest to pull in images. I ended up having to create a special plugin to make sure that it pulls in the featured image. It was hard work, but it was worth it.
Hi Susan, such an important thing to have these tags in our posts as they give us such benefits on social media.
I did the tiwitter tags a while back and it looks really nice. It sure was not easy, but I am glad I worked it out
The opengraph I am not so focused on as I am not really on FB and not really a fan. But I think from using Joost’s seo plugin I have them all anyway.
Have a great day
ashley
FaceBook, right. I am not a big fan, but it has ended up being the best tool for the businesses I work with. I think that it is really important to make sure our blogs are at least optimized for the most popular social networks. Just because we don’t like them doesn’t mean someone else out there feels the same way. Luckily, as you say,Yoast’s plugin does all the heavy lifting for us.
Susan, thanks for this tutorial. I have not actually paid heed to the use of Open graph, Twitter cards or Pinterest rich pins in the past. But having read your post, I think I should give them a try. In this period when Google is desperate to bring changes to the blogosphere, we need extra leverage because a lot of innocent blogs even fall victim to Google’s sanitization efforts.
I never even knew we could use WordPress SEO plugin by Yoast to add Facebook open graph to our blogs in WordPress. At least I should be able to add two out of the three open graph stuff to my blog and take advantage of the extra features they add to the system
Thanks Sue for this nice information. Do have a pleasant week.
Yay! I am so glad to hear that. It is really a small step that can give you a big benefit. Have a great week!
Hi Susan !!!
You have explained the Open Graph codes very clearly. I had tried twitter card using a WordPress plugin ( My Blog runs on wordpress 🙂 ). But the plugin was disgusting and i often used to see an update for it. And finally removed it.
Now I’m just using the Facebook Open meta codes . As now Facebook show the full thumbnail, it has removed the burden of uploading image to my page. Now I can just share the link and that is shown just Like an Image is there.
Regards
Sweet! There are a lot of troublesome plugins out there. You have to be cautious about adding in something new from an unknown developer.
It is pretty great how the open graph knows what image to pull in!
Great and insightful tutorial Lisa,
I’ve read about Twitter open graph tags somewhere before but, it was not as comprehensive as this article.
The whole thing still appears strange to me though but, I will have to read this article for more understanding when I get home.
Hope you’re enjoying your week so far.
Thanks a lot for sharing.
The open graph is pretty strange. I think it is because it is for machines, not humans. But it has a huge impact on the way content is present across the social network eco-system. More and more bloggers are getting involved in design and development aspects as part of their daily routines.
Hi Lisa and Susan,
Never realize about OpenGraph before. I did apply facebook comments a few months back but removed it because many people put a spam on it.
Thanks for this post
I am sure that is a new concept to many people, but I am glad to give it some exposure.
Hi Susan and Lisa,
Thanks for sharing! This is an absolute guide indeed! I usually just skip the hard part and uses plugins to do it for me. Haha!
Lazy me. Definitely worth a share 🙂
Have a great day ahead all~
Not lazy at all. I think it comes down to comfort level. Plugin is a good way to go, as long as it is from a well-known developer that you trust.
Hi Ladies. This is really informative. As a not -to-tech-savy blogger this makes me wish you guys lived with me. 🙂 Keep the info coming. I do feel smarter every time I stop by here.
Yay, it is so nice to see you here Chasing Joy. I am glad that you find the post useful.
Susan – great post. I think that all blogs should have OG tags in place now. I am still working on how to get Pinterest to accept my request though 🙁 I hope that Yoast will add Pinterest info in a future update as well.
I really love Twitter Cards though! This way people can see a summary of the article instead of blindly clicking on bit.ly links! It has helped me get a lot more traffic from Twitter lately because of it.
Yes! Glad to hear that you are already using the open graph to your advantage. The first time I saw a Twitter Card that came from my blog, I teared up a little, not going to lie. I finally understand the impact that images have on people.
It has made me really re-think the value of images and video in blog posts. I highly recommend that all bloggers include at least one relevant image in the body of a post.
LOL you and me both Susan. I started using a very large header image at the beginning of each post. Why? Because images sell the post. Plus Facebook will share that larger post on your news feed.
As much as I love words and writing – a Picture really does say a thousand words.
Thank your Corina for the welcome! I am so glad to hear that you are already using the open graph. That is awesome!
Hello Susan,
So nice to meet you and welcome to Lisa’s blog!
Thank you so much for showing us how to get these open graph tags to our sites. I have Yoast and you’re right, it was soo easy to do. I’m off to Pinterest to add their open graph tag too.
I already had it for Twitter, thanks to Lisa’s post and you’re post made it easy for me to follow to add Facebook and Google Plus. Thanks so much for sharing this!
Have a great week!
Hello Susan and welcome to Lisa’s blog,
You know, i first saw this on a friend’s blog but still i did not implement it because i haven’t seen its proper effect. But recently many bloggers are talking about the open graph which means, it might really be interesting.I will definitely implement it sooner.
Thanks for this lovely and well explained blog post. Do have a wonderful week start :).
Thanks! It isn’t really clear what makes open graph tags valuable in most of the blog posts that I read. I think it is because to make things clear takes a lot of time. You have to be aware that people have different comfort levels when dealing with coding. That is why I felt it was important to give as many options as possible to show how it could be implemented so people can choose what makes sense for them.
I just think it is cool what the open graph can do! But we are getting to a point where bloggers are becoming developers, which is probably scary for some. I hope to empower people to do small things that can make the experience readers have with their blog better.
Thanks Susan for doing this contributor post today – great info for my readers here. It’s so important to have these right so people will easily share your content and it will look nice at the same time. Images can speak a thousands words and with all the social media networks focusing on images today this post is very timely. Much appreciated!
Thanks for giving me a space to get this message out. SMO is a big buzz word, but I think it is really about how we make our content travel to more places. Sadly, that is all going to be done with markup like this. I imagine some day Google, Twitter, and Facebook will be smart enough not to use tags at all, but just to pull in the information from the HTML. That will make things much easier for those who don’t feel comfortable adding code to their blogs.
Hi Susan !
Seriously , i didn’t know about this . I’ll be implementing both twitter cards and Facebook open graph in my blog as they both seems to be beneficial . Thanks for sharing the information .
-Pramod
I know, right? It is like the best kept secret. I think it is because the world of web development doesn’t always enter into the lives of bloggers who aren’t part of that community. I think it is worthwhile to follow blogs like Yoast or Justin Tadlock because they work almost exclusively building things for WordPress. The insights are valuable, even if it goes over my head sometimes! It just keeps you in the loop of important updates,.
Hi Susan! Great to meet you!
Whoa! This sounds like some pretty good stuff! I definitely have to bookmark this so I can come back to it and grab those codes! Interesting stuff! 🙂
Great guest Lisa! Now you’re causing me to do more blog work! 😉
Bren thank you for the welcome! Blogging is becoming such hard work! I still have not developed a good work flow. I would like to post every day to my blog, but when it takes an hour or two to craft a quality post, it is very difficult to block out the time. The other part, most of that time isn’t lost in the writing but the formatting.
I would be very interested in hearing how other people handle their time.
Hi Susan, and nice to meet you at Lisa’s blog 🙂
I remember Facebook introduced them and they work pretty well with Yoast as you mentioned, but I still need to check out Twitter cards. I know Lisa had written a post on it, but I still have to check that out – and yes even Pinterest now. That info was pretty cool and I just applied for it! However, I AM pretty scared of the codes, and wonder if they can be worked out without really adding these codes.
Thanks for sharing. Have a nice week ahead, both of you 🙂
Yes, you can add the open graph using plugins on WordPress like Yoast SEO. There are others out there, but without having used them, there is no way I could recommend them. For Blogger, it looks like the only way to do it is to add them manually.
There are some tricky methods to optimize individual posts. For example, I have a Pinterest button on my website that automatically pulls in the featured image when someone clicks to share. But all these methods still require some form of coding.