{"id":53,"date":"2014-05-01T19:43:00","date_gmt":"2014-05-01T19:43:00","guid":{"rendered":"https:\/\/www.tech-and-dev.com\/blog\/2014\/05\/01\/adding-facebook-open-graph-og-meta-tags-on-blogger\/"},"modified":"2021-02-22T01:02:20","modified_gmt":"2021-02-22T01:02:20","slug":"adding-facebook-open-graph-og-meta-tags-blogger","status":"publish","type":"post","link":"https:\/\/www.tech-and-dev.com\/blog\/2014\/05\/adding-facebook-open-graph-og-meta-tags-blogger.html","title":{"rendered":"Adding Facebook Open Graph (OG) Meta Tags On Blogger"},"content":{"rendered":"
\n
\"Facebook<\/a><\/div>\n
<\/div>\n

Addding Open Graph Meta Tags on Facebook is straightforward.<\/p>\n

Go to blogger Dashboard => Template => Edit HTML<\/p>\n

On top of the code, find the <html> tag, it should look similar to this:<\/p>\n

<html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http:\/\/www.w3.org\/1999\/xhtml’ xmlns:b=’http:\/\/www.google.com\/2005\/gml\/b’ xmlns:data=’http:\/\/www.google.com\/2005\/gml\/data’ xmlns:expr=’http:\/\/www.google.com\/2005\/gml\/expr’><\/p><\/blockquote>\n

Add the Facebook xml namespace by adding the following line inside the tag (Before the ><\/b><\/span> character):<\/p>\n

xmlns:og=’http:\/\/ogp.me\/ns#’<\/p><\/blockquote>\n

So the html tag should look similar to:<\/p>\n

<html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http:\/\/www.w3.org\/1999\/xhtml’ xmlns:b=’http:\/\/www.google.com\/2005\/gml\/b’ xmlns:data=’http:\/\/www.google.com\/2005\/gml\/data’ xmlns:expr=’http:\/\/www.google.com\/2005\/gml\/expr’ xmlns:og=’http:\/\/ogp.me\/ns#’><\/p><\/blockquote>\n

Before the <\/head><\/span> tag, paste the following:<\/p>\n

<!– Open Graph Meta Tags BEGIN –>
\n<meta expr:content=’data:blog.pageName’ property=’og:title’\/>
\n<b:if cond=’data:blog.postImageUrl’>
\n<\/b:if>
\n<meta expr:content=’data:blog.title’ property=’og:title’\/>
\n<meta expr:content=’data:blog.canonicalUrl’ property=’og:url’\/>
\n<b:if cond=’data:blog.metaDescription’>
\n<meta expr:content=’data:blog.metaDescription’ property=’og:description’\/>
\n<\/b:if>
\n<!– Open Graph Meta Tags END –><\/p><\/blockquote>\n

That’s it! Before testing your page on Facebook, Make sure to debug your page to re-cache your blog’s info:
\nhttps:\/\/developers.facebook.com\/tools\/debug <\/a><\/p>\n

Also please note, that many blogs provides the wrong information, by using “data:blog.postImageThumbnailUrl” instead of “data:blog.postImageUrl”, which will result in the following error on Facebook debugger:<\/div>\n
<\/div>\n
<\/div>\n
Provided og:image is not big enough. Please use an image that’s at least 200×200 px. <\/span><\/b><\/div>\n
<\/div>\n
In order to prevent this, you can use the code above, and make sure you have a picture on your blog post with at least 200×200 pixels.<\/div>\n

 <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Addding Open Graph Meta Tags on Facebook is straightforward. Go to blogger Dashboard => Template => Edit HTML On top of the code, find the <html> tag, it should look similar to this: <html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http:\/\/www.w3.org\/1999\/xhtml’ xmlns:b=’http:\/\/www.google.com\/2005\/gml\/b’ xmlns:data=’http:\/\/www.google.com\/2005\/gml\/data’ xmlns:expr=’http:\/\/www.google.com\/2005\/gml\/expr’> Add the Facebook xml namespace by adding the following line inside the tag (Before […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[68,33,69],"tags":[],"class_list":["post-53","post","type-post","status-publish","format-standard","hentry","category-blogger","category-facebook","category-open-graph"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts\/53","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/comments?post=53"}],"version-history":[{"count":1,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/posts\/53\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/media?parent=53"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/categories?post=53"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tech-and-dev.com\/blog\/wp-json\/wp\/v2\/tags?post=53"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}