Thursday, September 11, 2014

Adding Open Graph Protocol (OGP) tags to your Blogger Blog

The Open Graph Protocol is a relatively new way to turn any web page into a sharable social object by adding tags to identify key attributes for that page when shared on a social network like Facebook.  Before we look at these OGP tags and how to integrate them into your Blogger blog, let's take a look at how website links are shared on social networks.

 Sharing Links on Facebook
When you share a URL while creating a Facebook status update, Facebook scans that webpage and automatically generates a preview of that content which includes some useful information in addition to the URL you typed:

  • A TITLE for the web page you are sharing
  • A brief DESCRIPTION of the content on that page
  • An IMAGE from the page



Once you publish your status, these extra bits of information become very important, as they will likely influence whether one of your friends will click on the link.  If the image looks intriguing, or if the copy seems interesting, your shared URL will likely be clicked on.

 However, sometimes when you share a link, Facebook's automatically generated image, title, and description are either missing entirely or not very compelling. In the post below, notice that there is no associated image or description - just a title and url.

As digital content publishers who want to make our content as sharable and clickable as possible, this can be a real issue.  Fortunately, Facebook provides a number of sharing best practices that can help.

 First Step: Learn about the Open Graph Protocol
Facebook describes several open graph tags that it recommends integrating into your site to help Facebook generate previews.  The main tags which Facebook uses when generating previews are:

  • og:title - the title of the page you are sharing
  • og:description - a detailed description of the content on the page
  • og:url - the URL of the web page
  • og:image - the URL of the image you want shown
  • og:site_name - the name of the website you are sharing
  • og:type - the type of content you are sharing (blog, website, article, etc)
The syntax for an open graph tag is similar to other meta tags used in HTML.  For example, the og:title tag can be written as:

 <meta property="og:title" content="Title of your Page">

 Open graph tags are placed in the <head> section of your HTML file. For a complete description of each tag, visit the Open Graph Protocol website.

 How Facebook "Sees" your Page
To understand how Facebook ingests a webpage to generate a preview, use Facebook's Open Graph Debugger.  This helpful tool will allow you to enter any URL and get a "scrape" of what Facebook finds when it scans the page.  It will alert you when there are issues that need to be addressed. 

 It will also generate a preview to show you how your page will appear if a Facebook user shares it on their timeline.

 Time to Fix your Blogger Blog, OG style
In a previous post, I discussed the use of Title and Meta Description tags, which are very important for your blog's SEO.  I also described a method of optimizing how Blogger generates title tags to improve your blog's SEO.  Read these posts before you go any further!

 Because Blogger dynamically generates the pages in our blog based on templates, we thankfully do not need to manually add OG tags to every blog page/post.  That would be a major headache!  Fortunately for us, we can update a few lines of HTML code in our blog's template that will automatically update all our pages and posts - including any new pages and posts we create in the future.

 What we'll be doing is telling Blogger exactly how to handle the TITLE, META DESCRIPTION, and OG tags on 1. your blog's home page and 2. your blog's various posts and pages.  We will do this by using IF statements. 

 Here is the code you will insert into the <HEAD> section of your Blogger template:

 <!--START CUSTOM CODE-->

 <meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:site_name' expr:content='data:blog.title'/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>
<meta property='og:type' content='article'/>

 <b:else/>
<title><data:blog.pageTitle/> - PUT ANY ADDITIONAL TITLE COPY HERE</title>
<meta property='og:image' content='PUT YOUR IMAGE URL HERE'/>
<meta property='og:type' content='blog'/>
</b:if>

 <b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
<!--END CUSTOM CODE-->

 Select this code and COPY it.  Then read on.

 Important note: before you start editing your blog's HTML code, you'll want to make sure that you are happy with the template you are using.  Because we're going to customize the code associated with a specific instance of a template, it is important to realize that if you ever change your template for any reason, you will lose the work you're about to do!

 Time to Get Geeky: Come Edit Your Template's HTML with Me
Ready? Let's do this. Go to Blogger and click on your blog.  Click on the "Template" button on the left hand menu. 
Click on the "Edit HTML" button and be prepared to feel a surge of geeky neuronic energy course throughout the synapses of your brain.

Take a deep breath.  Repeat to yourself: "It's just a text file.  It's just a text file.  I can handle this!"

 Now very carefully find the <title> tag that exists in the code.  Select the title tag code and everything inside it.

Delete it.  Then replace it with the code I gave you earlier in this post.  

Be sure to carefully EDIT the parts of the code marked "PUT ANY ADDITIONAL TITLE COPY HERE" and "PUT YOUR IMAGE URL HERE".

 This code creates og:url, og:title, and og:site_name tags that are dynamically generated from Blogger's page url, Blogger's page title, and your blog's title. It then creates og:image and og:type tags (IF the page is a normal post or page).  Otherwise, it creates og:image and og:type tags for your home page which are different.  Finally, it creates an og:description tag that is populated from the meta descriptions that you create for your pages.

 Once you are done, click "Preview template".  If you have made any errors or broken any of the code - it should give you an error message and tell you what the issue is.  If your preview looks good, then click "Save Template".

 You're Not Done Until You Test Your Pages!
To test your pages, go back to Facebook's Open Graph Debugger and try your pages out. It will give you a preview of how each page will look when shared.

Yeah! That's what I'm talkin' about!

 Acknowledgements
I'd like to acknowledge the help of the following two blog posts which helped me greatly in patching together the above code that both improves SEO and adds OG tags to Blogger posts and pages:

 Adjust Blogger Title Tags to Improve SEO by Muhammad Faisal
and
How to Add Open Graph Protocol in Blogger Blogs by Muntasir Minhaz

 Thanks guys!


Posted by at
Labels: ,

50 comments:

  1. UnknownMarch 18, 2015 at 3:50 PM

    i have a problem...i added the the code but my description is not showing if i wanna share

    ReplyDelete
    Replies
    1. UnknownAugust 10, 2015 at 10:29 AM

      Alex, Be sure you read my post on adding meta description tags to your Blogger blog: http://unidigadv.blogspot.com/2012/09/optimizing-your-blogger-blog-for-seo.html

      Delete
  2. Kasia SojkaMarch 21, 2015 at 6:59 AM

    That's really helpful, but I totally don't get the og:image thing :(

    Let's say, I've written 10 posts. An when I share each of them on Facebook, I want THE SPCECIFIC thumbnail from THE post to be shown. How???? :( How do I do that with only one position in the header?

    thank you!

    ReplyDelete
    Replies
    1. TakkiMay 3, 2015 at 2:55 AM

      when you share link to facebook and your post has more then 1 pic it will ask you to choose the thumbnail you like. THERE WILL BE LEFT AND RIGHT ARROWS IN THE THUMBNAIL OF YOUR SHARED LINK BY CLICKING THEM YOU CAN CHANGE THE THUMBNAIL!

      Delete
    2. UnknownAugust 10, 2015 at 10:26 AM

      The code only sets an og:image for the main page of your blog. Otherwise, as Taqi mentions, when sharing an individual blog post, the sharer can set the image based on the images that appear in your blog post. The only caveat here that I have discovered is that if you use a CAPTION for your image in Blogger, Facebook won't be able to find it when you share it.

      Delete
  3. TakkiMay 3, 2015 at 2:56 AM

    Thanks for the tut but what to enter in these two lines:
    < title > - PUT ANY ADDITIONAL TITLE COPY HERE< / title >
    < meta property='og:image' content='PUT YOUR IMAGE URL HERE'/>

    I don't understand these two lines.

    ReplyDelete
    Replies
    1. UnknownAugust 10, 2015 at 10:16 AM

      Taqi, the words in ALL CAPS are placeholder copy that you can customize. Additional text can be put in the main title tag containing additional information or keywords that you'd like to show up. For example, instead of just a blog title like "Advertising Blog", you could add specific keywords to further clarify, like "Advertising Blog - for Students and Beginners" or "Advertising Blog - for Social Media Marketing". The og:image content is an image URL that you'd like to use when someone shares your main blog page. What I did was to upload an image to blogger (on a post I never published), then I used that image URL.

      Delete
    2. AhsanNovember 10, 2015 at 6:57 AM

      how to get image url and additional title copy can u please help

      Delete
  4. ReyeditMay 23, 2015 at 9:21 PM

    OH MY GOD. Dude, thank you soooo much!! I've been looking for your post all day. I have been receiving a message error: og:image could not be downloaded or is too small.
    But now is all good, thanks to you!

    ReplyDelete
  5. UnknownJune 1, 2015 at 6:56 AM

    What is disadvantage of this? If i apply to my blogger savetrick.com those it affect bad for my blogger theme?

    ReplyDelete
    Replies
    1. UnknownAugust 10, 2015 at 10:31 AM

      The only disadvantage to implementing this code is that if you change your blogger template, you will lose this custom code. So before changing your template, I would recommend copying the code in your existing template so you can easily paste it in your new template.

      Delete
  6. The Branding ArsenalJune 25, 2015 at 12:05 AM

    Thank you for this....exactly what I needed...and well done. :)

    ReplyDelete
  7. AnonymousJuly 12, 2015 at 8:03 AM

    You are awesome. Thank you for the code.

    ReplyDelete
    Replies
    1. UnknownAugust 10, 2015 at 10:32 AM

      You're welcome! Thanks for reading and commenting.

      Delete
  8. UnknownAugust 10, 2015 at 9:39 AM

    I followed all of your instructions to a "T" and it is still not working. Please help, I am getting so frustrated with this and I have tried it all. I have zero programming experience, and this is so out of my element.

    ReplyDelete
    Replies
    1. UnknownAugust 10, 2015 at 10:23 AM

      What specifically isn't working? If you send me your blog URL I can take a look at your code.

      Delete
  9. UnknownAugust 10, 2015 at 10:19 AM

    The custom image only appears when your blog's home page is shared. Blogger posts containing images in the post will not be affected by this tag when shared.

    ReplyDelete
  10. Our Pretty Little GirlsSeptember 14, 2015 at 9:01 AM

    Yup I am in the same boat as the last person. I followed all directions and it still isn't fixed. SO frustrated. When I run the debugger it shows about 40 photos and when I try test posting to Facebook it randomly grabs and image. Most of the time that image is of another person.

    I also have 3 warning in the debugger Og: URL, title and image.

    http://www.ourprettylittlegirls.com

    ReplyDelete
  11. Our Pretty Little GirlsSeptember 14, 2015 at 11:31 AM

    Yup I am in the same boat as the last person. I followed all directions and it still isn't fixed. SO frustrated. When I run the debugger it shows about 40 photos and when I try test posting to Facebook it randomly grabs and image. Most of the time that image is of another person.

    I also have 3 warning in the debugger Og: URL, title and image.

    http://www.ourprettylittlegirls.com

    ReplyDelete
    Replies
    1. Matthew WilsonSeptember 14, 2015 at 1:07 PM

      Hi - I took a look at your site and it does not appear that you used the code listed above. Maybe you found another solution? I would recommend, however, adding og:description tags at least - otherwise your posts will show up without a description when shared on FB. Good luck!

      Delete
    2. Our Pretty Little GirlsSeptember 14, 2015 at 6:42 PM

      Yeah it wasn't working and I tried something else. I've been at it off and on all day and I can't get anything to work. I'm pretty much about to throw my lap top out the window. I put this back in if you could look at it again? I'll leave it alone until I hear back from you.

      Delete
    3. Matthew WilsonSeptember 15, 2015 at 12:19 AM

      One thing that I did notice is that meta description tags are not showing up - and therefore, your og:description tag is not populating correctly. My guess is that you have not enabled them in Blogger settings. Read how to do this in the section called "Optimizing the Meta Description tags on your Blog" in my blog post: http://unidigadv.blogspot.com/2012/09/optimizing-your-blogger-blog-for-seo.html

      Delete
  12. Our Pretty Little GirlsSeptember 15, 2015 at 7:15 AM

    You are correct, they were turned off. I have them on now. Thank you so much for your help. The thumbnails are pulling up the right image now too with the exception of a few posts that I have been forcing the Facebook cache to refresh then they pull up correctly too.

    Thanks again, your help was really appreciated.

    ReplyDelete
  13. Matthew WilsonSeptember 15, 2015 at 9:15 AM

    Hooray! Glad to help.

    ReplyDelete
  14. AnonymousSeptember 16, 2015 at 12:55 PM

    Hey man, this is great. I think I'm already using the code you set forth here on my main Blogger template, and it works when posting a link to my main page on Facebook ... but I've got this issue now for links to individual post pages of my blog where Facebook is showing no description and choosing a very small photo instead of the larger ones available on the page. What I wish I could do is insert og tags for description and image directly into the HTML code for the specific page, to force Facebook to show what I want in its link preview box (just like I can do with the main page with your code) but there seems to be no way to do that. With respect to the description, I know that the Blogger post editor allows you to easily insert, but I'm using Windows Live Writer as my blog editor, and if I go back and use the Blogger editor, it messes everything up, so that's not a good option for me. I'm wondering if there's anything I can do with the "if/else" HTML coding in the main template to account for a specific page -- in other words, if [page A], then use [selected description / image from page A], if [page B], then use [selected image / description from page B], etc. Do you know what I mean? Or is this impossible because of the way that Blogger dynamically handles the specific posts? Any advice would be greatly appreciated. Thanks!

    ReplyDelete
    Replies
    1. AnonymousSeptember 16, 2015 at 4:54 PM

      Hey -- never mind; I found a workaround. It turns out I didn't have your exact code, and when I swapped it out, it solved the image problem -- so, thanks for that. With respect to the description problem, I relocated my paragraph tags in Live Writer so that they embraced the text I wanted Facebook to pull as my description, and that worked, too. Anyway, thanks again.

      Delete
  15. AhsanNovember 10, 2015 at 6:23 AM

    hi guys i have a problem whenever im going to share my blogger link on facebook they show me a error that,, its look like you link shearing might be unsafe, please remove tha link, note: the unsafe link might be on your page you are linking to, if you cant remove that link and still want to share please complete the security check,, please guys tel me how to fix this problem please please please guys im worried tooo much about it

    ReplyDelete
  16. AhsanNovember 10, 2015 at 6:27 AM

    and i have same problem that you mention facebook dubbger url. image, description, tittle please please help me guys please

    ReplyDelete
  17. svetionicarJanuary 8, 2016 at 3:40 PM

    Nope, i still do something wrong. i try to have at least title of post when i share my blog post on Facebook, but nothing, over and over, no matter what i do, on Facebook i can see only name of my whole blog and blog description with one or two pictures. so if anyone can help, please - look at one of my posts and tell me what can i do :( http://marepannoniumgarden.blogspot.rs/2016/01/semenke-za-sudnji-dan-3-deo-brzi.html

    ReplyDelete
  18. svetionicarJanuary 9, 2016 at 4:45 AM

    As i can see, since november 10, nobody look at this article, i must try to find help on some other place.

    ReplyDelete
  19. The Broken MeepleJanuary 22, 2016 at 2:42 PM

    I've followed the instructions and I've enabled the meta tags in Blogger but still it keeps pulling up my banner logo which is too large for the thumbnail anyway instead of the main image in each post.

    http://brokenmeeple.blogspot.co.uk/2016/01/a-hybrid-of-two-great-warrior-races.html

    ReplyDelete
  20. UnknownJanuary 29, 2016 at 5:47 AM

    Post a very good and useful for my blog optimization blogguidelines.blogspot.com

    ReplyDelete
  21. UnknownFebruary 13, 2016 at 12:28 AM


    Sell your home
    Real Estate Solutions

    OG Property Solutions is here in Bakersfield to help homeowners out of any kind of distressed situation. As investors, we are in business to make a modest profit on any deal; however we can help homeowners out of just about any situation, no matter what! There are no fees, up-front costs, commissions, or anything else. Just the simple honest truth about your home and how we can help you sell it fast to resolve any situation.

    You may hear from others, the news, or even real estate agents, that investors are all out to screw over the home owner, but this simply isn’t true. OG Property Solutions is part of a nationwide group of thousands of investors who are helping tens of thousands of homeowners every year. We may not be the “traditional” route, but the reason many bad mouth investors is because we CAN help and we can do it quickly, which they don’t want YOU to know about!

    I am Randy of OG Property Solutions. I live with my wife, daughter and two grandsons. I was in management for 9 years in Bakersfield and I am now happy to be in real estate investments, something I wanted to do years ago. I now have a team put together to help create a solution to help you resolve any situation.

    Give us a call today at 661-615-3314 to let us know what YOU need help with!

    ReplyDelete
  22. AnonymousDecember 30, 2016 at 4:51 AM

    Here i had read the content you had posted. It is much interesting so please keep update like this.click here to find out more school websites uk

    ReplyDelete
  23. Justin Enuffa BallardJanuary 13, 2017 at 8:48 AM

    My issue is that Facebook is still showing an outdated OG description that contains a typo. I want to update that description, but after following your instructions the old description is still showing up.

    ReplyDelete
  24. https://drarpitagrawal.blogspot.com/June 16, 2017 at 6:01 AM

    such a nice blog for Digital Marketing if you want same information then click here best Digital Marketing expert indore

    ReplyDelete
  25. Bushra shaikhSeptember 6, 2017 at 4:37 AM

    Please continue this great work and I look forward to more of your awesome blog posts.
    Guest Post On Authority Sites

    ReplyDelete
  26. vaiyboraSeptember 28, 2017 at 3:50 AM

    Very nice post.really I apperciate your blog.Thanks for sharing.keep sharing more blogs.

    หนังตลก

    ReplyDelete
  27. vaiyboraSeptember 28, 2017 at 3:56 AM

    Thanks for providing good information,Thanks for your sharing.

    หนังตลก

    ReplyDelete
  28. UnknownJanuary 9, 2018 at 10:02 PM

    wow skates rivet see other articles on : judi poker

    ReplyDelete
  29. V.L. JenningsJune 10, 2018 at 12:23 PM

    So... ever since the https switchover... the facebook debugger site no longer recognizes the og image tags ... any new suggestions?

    ReplyDelete
  30. UnknownJune 19, 2018 at 3:57 PM

    I really like this interesting article and you are a very clever author in the making of articles.
    togel online

    ReplyDelete
  31. PashaOctober 5, 2018 at 1:24 AM

    A classic trademark of all Aditya projects are its careful thought in providing ample greenery, modern designs that are luxurious, offer good spaces and thoughtful amenities thereby enhancing the property’s value and giving the customers a good return on their investments.Contact us Aditya constructions reviews

    ReplyDelete
  32. AdminDecember 16, 2018 at 12:28 AM

    I am not very good at writing, after I saw this very good website, I became excited to write smarter.

    Suara Burung Kacer

    Berita Kicau Mania

    ReplyDelete
  33. Game Online SteamDecember 24, 2018 at 12:28 AM

    A very good website, I have never found a website like this, it always works.

    Game Online Android Terbaik di Dunia

    Daftar Game Steam

    ReplyDelete
  34. gmailcustomersupportserviceAugust 13, 2019 at 5:01 AM

    thanks for sharing with us
    tag someone on Facebook

    ReplyDelete
  35. Social Cali - RocklinMarch 7, 2024 at 11:53 PM

    Enhance your Blogger presence with OGP tags for better visibility! Social Cali - Rocklin

    ReplyDelete
  36. Social Cali - RocklinApril 17, 2024 at 10:46 PM

    Adding Open Graph Protocol tags to your Blogger blog is a smart move! It enhances visibility on social media, making your content more shareable and engaging. Great choice!Social Cali - Rocklin.

    ReplyDelete

Subscribe to: Post Comments (Atom)