Step by Step Instructions with Images to Setup Facebook's Open Graph Tags in Blogger to Make Your Blogger Post a Rich Object in Social Media.

Add Open Graph Tags To Blogger (with Images)

Updated on: March 12, 2017

The Open Graph meta tags were the social media meta tags for Facebook. These tags help you to make your blog post a rich object in the social media world. In short, when someone shares your blog post, the shared item looks better on Facebook. It works as Twitter card for twitter works.

If you share your post on Facebook without setting up open graph tags, it will look like this:

Facebook Open graph tags for blogger
Facebook post without open graph blogger

Which is not an impressive piece of content. Most probably a social media user will ignore this, instead of sharing or clicking it, But if you add the Facebook open graph meta tags, your posts will looks like this:

Facebook post with open graph tags blogger

This is more likely to get clicked and shared by users, so if you want to setup Facebook's open graph social media meta tags protocol to your blogger just follow the given step by step instructions with images.

Those users who get a wrong image (or a wrench img) on sharing the post on Facebook should also follow the given steps.

How To Implement Open Graph Meta Tags in Blogger

Step 1. Log in to your Blogger account, then goto Themes > Edit HTML.

Edit Blogger Theme

Step 2. Click anywhere inside the code, and then search for the following code (Use CTRL+F):

<html

Step 3. Add below code at the end of searched code before close tag '>'.

xmlns:og='http://ogp.me/ns#'
Add open graph in blogger

Step 4. Again search for the following code:

<b:include data='blog' name='all-head-content'/>

Step 5. Add this code just below it:

<meta content='article' property='og:type'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='[homepage Image URL]' property='og:image'/>
<meta content='[homepage Image Width]' property='og:image:width' />
<meta content='[homepage Image Height]' property='og:image:height' />
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='[Facebook profile Id]' property='fb:admins'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='https://www.facebook.com/username' property='article:author'/>
</b:if>
<meta content='en_US' property='og:locale'/> 

Note: Open graph Tags for post "URL", "image", "description" and "title" are already there by default, so no need to add them again.

Step 5. Configuration:

Note: Recommended Image dimensions for better output in Facebook post: 1200 x 630px

  • Replace [homepage Image URL] with the URL of the image for homepage.
  • Replace [homepage Image Width] with the Width of the homepage Image.
  • Replace [homepage Image Height] with the Height of the homepage Image.
    For Height and Width, Use only numeric value like '1200' or '630')
  • Note: This image will be shown when you will share your main blog address or homepage on Facebook.

    Read: How to Upload and Get Image URL

  • Replace [Facebook profile Id] with your Facebook profile id. To get your profile id Click here.
  • Replace username with your Facebook username.
  • To find your username visit your Facebook profile, Then check your address bar.
    It’ll look like https://www.facebbok.com/username

    If you have not set the username yet it may look like:
    https://www.facebook.com/profile.php?id=some-random-number
    You can replace the above URL with this or you can create your username by visiting your Facebook's settings.

  • (Optional) Here en_US is the language_TERRITORY that is US-English if your blog is in different language replace it. For language code details click here .

Step 6. Click Save theme.

That's it !

Now, your shared post on Facebook will become a rich object with beautiful appearance. You can also setup Twitter card in the same way. If you have any issue use Facebook open graph, Use this Facebook Debugging tool or comment below. Stay Updated, Browse Howbloggerz! :)

Love it? Don't forget to Subscribe
  • Unknown
    Unknown
    12 March 2017 at 13:24
    i still do not understand about Image url for homepage. can you tell me more about it?
    Saurabh Jarial
    Saurabh Jarial
    12 March 2017 at 16:35
    Image URL for homepage is that Image's URL which will be shown when you share your main blog address or your blog homepage.

    Like - http://www.yourblog.blogspot.com

    Like posts, your blog homepage does not have any image which means when you will share your homepage no image will be shown or may be any unappropriate image will be shown. To counter this issue we have to create and add the image to the homepage.

    *POST UPDATED*
    Follow all Steps again.
  • Unknown
    Unknown
    8 May 2017 at 23:01
    M facing problem in changing it with a newer one. Its still showing me the older one. Any suggestions?
    Saurabh Jarial
    Saurabh Jarial
    10 May 2017 at 07:53
    Can you elaborate your problem?
  • Fit Momming
    Fit Momming
    6 June 2017 at 21:50
    Hi, how do you change the OG title or description? Also, how do you implement at the post level? This worked great for the home page. Thank you!
    Saurabh Jarial
    Saurabh Jarial
    7 June 2017 at 11:55
    OG description and title were added in your blog template by default so there is no need to add them again. The content of OG title and description were taken from your post title and meta description field (right side in the post editing mode). You can also manipulate the format of these tags by editing your template. You can change your homepage title and description in settings.

    Note: Make sure your that Meta description is enabled in Settings > Search preferences to use OG description for posts and homepage.
  • Love
    Love
    5 July 2017 at 18:13
    I am implementing OG tags for first time and Its working for me Thanks alot.....
  • All About Zodiac Signs
    All About Zodiac Signs
    21 July 2017 at 21:13
    It does not work for me, I see the picture of the first post!
    I tried everything, but I can not solve the problem

    https://all-about-zodiac-signs.blogspot.com/
    Saurabh Jarial
    Saurabh Jarial
    1 August 2017 at 11:02
    On which link you see the picture of the first post?
    All About Zodiac Signs
    All About Zodiac Signs
    1 August 2017 at 13:29
    Homepage link
    http://all-about-zodiac-signs.blogspot.com

    Thanks for your help.
    Saurabh Jarial
    Saurabh Jarial
    5 August 2017 at 16:48
    After debugging your open-graph tags, I found that you have too many "og:image" tags may be that's why Facebook is picking random image according to their criteria.

    To solve this issue I need your template file so that I can identify the problem and suggest you the solution. You can send me your template file via Contact form.

    How to Backup your Template
  • Ang
    Ang
    9 August 2017 at 23:09
    well i tried the code but
    og:type still shows "website" and not "article".

    Can you pls help me?

    homepage: http://www.autoforo.gr/
    Saurabh Jarial
    Saurabh Jarial
    16 August 2017 at 23:49
    Hi Ang,

    Make sure you are using your profile link not page link to get [Facebook profile Id]

    If still you face any problem then message me via Contact Form.
  • Yadwinder Singh
    Yadwinder Singh
    28 February 2018 at 08:37
    thanks brother ,nice post with easy language . I solved my problem by your post.thanks once again
    Saurabh Jarial
    Saurabh Jarial
    28 February 2018 at 10:04
    Thanks!
  • RAHUL DORA
    RAHUL DORA
    12 March 2018 at 17:03
    The following meta tags are specified using 'name' instead of 'property' and will be ignored unless specified using the 'property' key: og:description

    how to fix it
    Saurabh Jarial
    Saurabh Jarial
    13 March 2018 at 22:40
    Replace 'name' with 'property'
  • VDB Zone
    VDB Zone
    17 March 2018 at 11:45
    This comment has been removed by the author.
    Saurabh Jarial
    Saurabh Jarial
    9 April 2018 at 08:58
    Hi Van Dewey Balao,
    Give a search on google or youtube you will get your answer.
  • VDB Zone
    VDB Zone
    5 June 2018 at 08:26
    This comment has been removed by the author.
  • Mikhail Nasa
    Mikhail Nasa
    21 July 2018 at 16:15
    Hi Jarial, what a wonderful post.

    Can you explain to me why we need to put our Facebook profile URL in it?
    Saurabh Jarial
    Saurabh Jarial
    6 September 2018 at 23:09
    Including the fb:app_id [Facebook profile Id] tag in your HTML HEAD will allow the Facebook scraper to associate the Open Graph entity for that URL with an application. This will allow any admins of that app to view Insights about that URL and any social plugins connected with it.
  • Digital Shubham
    Digital Shubham
    12 August 2019 at 08:39
    nice point great
  • Unknown
    Unknown
    2 March 2020 at 23:26
    Please I did not find this code in the blog. How can I add it again?
    Saurabh Jarial
    Saurabh Jarial
    28 March 2020 at 15:54
    which code? or mention the step no.
  • manohar
    manohar
    22 June 2021 at 12:00
    I didn't find this :
    I find this:b:include data='blog' name='google-analytics'/>
    is it ok added below this line


    Saurabh Jarial
    Saurabh Jarial
    27 June 2021 at 21:15
    Yeah no issue. Just make sure it is inside head tag
  • YPOPNET
    YPOPNET
    7 February 2022 at 15:33
    Hi can you help me fix the OG:image for my blog? I followed every instruction but when I share my homepage address in Facebook, the thumbnail of the latest post is shown. Here's my blog address. http://yourpieceofpi.com