Add Open Graph Tags To Blogger (with Images)

Updated on: March 12, 2017

If y'all part your post service on Facebook without setting upwards open graph tags, it volition hold off similar this:

Which is non an impressive slice of content. Most likely a social media user volition ignore this, instead of sharing or clicking it, But if y'all add together the Facebook opened upwards graph meta tags, your posts volition looks similar this:

This is to a greater extent than probable to instruct clicked too shared past times users, hence if y'all desire to setup Facebook's opened upwards graph social media meta tags protocol to your blogger simply follow the given mensuration past times mensuration instructions amongst images.

Those users who instruct a incorrect picture (or a wrench img) on sharing the post service on Facebook should also follow the given steps.

How To Implement Open Graph Meta Tags inwards Blogger

Step 1. Log inwards to your Blogger account, hence goto Themes > Edit HTML.

Step 2. Click anywhere within the code, too hence search for the next code (Use CTRL+F):

<html

Step 3. Add below code at the terminate of searched code earlier unopen tag '>'.

xmlns:og='http://ogp.me/ns#'

Step 4. Again search for the next code:

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

Step 5. Add this code simply 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 service "URL", "image", "description" too "title" are already at that spot past times default, hence no quest to add together them again.

Step 5. Configuration:

Note: Recommended Image dimensions for amend output inwards Facebook post: 1200 x 630px

Replace [homepage Image URL] amongst the URL of the picture for homepage.
Replace [homepage Image Width] amongst the Width of the homepage Image.
Replace [homepage Image Height] amongst the Height of the homepage Image.
For Height too Width, Use entirely numeric value similar '1200' or '630')

Note: This picture volition live on shown when y'all volition part your chief weblog address or homepage on Facebook.

Read: How to Upload too Get Image URL

Replace [Facebook profile Id] amongst your Facebook profile id. To instruct your profile id Click here.
Replace username amongst your Facebook username.

To notice your username view your Facebook profile, Then depository fiscal establishment agree your address bar.
It’ll hold off similar https://www.facebbok.com/username

If y'all accept non laid the username withal it may hold off like:
https://www.facebook.com/profile.php?id=some-random-number
You tin supplant the higher upwards URL amongst this or y'all tin practice your username past times visiting your Facebook's settings.

(Optional) Here en_US is the language_TERRITORY that is US-English if your weblog is inwards unlike linguistic communication supplant it. For linguistic communication code details click here .

Step 6. Click Save theme.

That's it !

Now, your shared post service on Facebook volition croak a rich object amongst beautiful appearance. You tin also setup Twitter menu inwards the same way. If y'all accept whatever final result purpose Facebook opened upwards graph, Use this Facebook Debugging tool or comment below. Stay Updated, Browse ! :)