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

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#'

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! :)

25 comments:

Unknown12 March 2017 at 13:24
i still do not understand about Image url for homepage. can you tell me more about it?
Unknown8 May 2017 at 23:01
M facing problem in changing it with a newer one. Its still showing me the older one. Any suggestions?
Fit Momming6 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!
Love5 July 2017 at 18:13
I am implementing OG tags for first time and Its working for me Thanks alot.....
All About Zodiac Signs21 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/
Ang9 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/
Yadwinder Singh28 February 2018 at 08:37
thanks brother ,nice post with easy language . I solved my problem by your post.thanks once again
RAHUL DORA12 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
Van Dewey Balao17 March 2018 at 11:45
This comment has been removed by the author.
Van Dewey Balao5 June 2018 at 08:26
This comment has been removed by the author.
Mikhail Nasa21 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?
Digital Shubham12 August 2019 at 08:39
nice point great
news2 March 2020 at 23:26
Please I did not find this code in the blog. How can I add it again?

Every comment is appreciated but keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted, including mentioning your blog. Thanks for understanding!