The How to Add Open Graph Protocol in Blogger Blog Diaries

The How to Add Open Graph Protocol in Blogger Blog Diaries

Blog Article

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.

STEP four: In case you have added the meta tags effectively then you will see the picture with description and title as revealed inside the graphic over.

I’d wish to acknowledge the assistance of the next two blog posts which helped me greatly in patching alongside one another the above code that each increases SEO and provides OG tags to Blogger posts and web pages:

The only real downside to applying this code is the fact if you modify your blogger template, you are going to drop this customized code. So prior to changing your template, I'd personally propose copying the code with your existing template so you can conveniently paste it in the new template.

The syntax for an open graph tag is comparable to other meta tags Employed in HTML.  Such as, the og:title tag is usually composed as:

Your browser isn’t supported anymore. Update it to obtain the finest YouTube experience and our newest characteristics. Find out more

The only real caveat right here that I've learned is the fact if you employ a CAPTION to your image in Blogger, Fb won't be able to find it when you share it.

open graph permits loaded objects for sharing hyperlinks on social websites internet sites Prior to deciding to insert Open Graph protocol towards your blog, you should;

Facebook Application Id: If you do not Possess a Facebook application id then head over to and generate your app and get application id.

What we’ll be executing is telling Blogger exactly how to deal with the TITLE, META DESCRIPTION, and OG tags on 1. your blog’s residence web page and 2. your blog’s various posts and web pages.  We are going to do that by making use of IF statements. 

In case you are using your blog as a personal profile, it's possible you'll contemplate shifting the 2nd og:sort from Web page to profile and adding your personal facts

og:locale Ought to almost certainly essentially replicate the blog's locale How to Add Open Graph Protocol in Blogger in place of just becoming a hardcoded string. However, Blogger only offers us en-us using a hyphen, instead of an underscore, so that won't operate.

Another thing that I did observe is the fact meta description tags are usually not demonstrating up - and as a consequence, your og:description tag isn't populating effectively.

og:impression Is simply equipped if Blogger finds a picture in The existing post. Nevertheless, not supplying og:image is invalid. You might provide an alternate impression within your blog emblem, or simply a Gravatar.

To check your webpages, return to Facebook's Open Graph Debugger and take a look at your pages out. It gives you a preview of how Each and every web site will search when shared.

WordPress consumers can use plugins for it but blogger consumers have to incorporate the manually by editing their template.