Rules for adding Open Graph Meta Tags to Blogger! Open graph meta tags

 All of us bloggers share a specific post or link to our blog on Facebook, Twitter and other social media. After sharing, the thumbnail of the blog or the picture included in the post, the name of the blog, the description of the blog does not show anything. Then we are all embarrassed. And so I have tried to solve this problem by sharing this post with you.

At first I don't know why this is happening. The reason for this problem is that the theme used in the blog does not have Open Graph Meta Tags or less. Now many people may be wondering what is Open Graph Meta Tags? 

Open Graph Meta Tags: Everything You Need to Know

What is Open Graph Meta Tags?

Open Graph Meta Tags is a tag that shows a Snipest when you share the URL of the blog on social media after using it on the blog, where your blog name, thumbnail, description is shown correctly.

Follow the steps below to add Open Graph Meta Tags to your blog.

1.    First, log in to Blogger.com.

2.    Then go to Theme> Edit HTML from the Blogger main menu.

3.    Then paste the following meta codes under the <head> tag.

 

<meta content='822549612183370' property='fb:app_id'/><meta content='https://www.facebook.com/smasikofficial' property='article:author'/>      <b:if cond='data:blog.pageType == &quot;index&quot;'>      <meta expr:content='data:blog.pageTitle' property='og:title'/>      <meta content='website' property='og:type'/>      <b:else/>      <meta expr:content='data:blog.pageName' property='og:title'/>      <meta content='article' property='og:type'/>      </b:if>      <meta expr:content='data:blog.title' property='og:site_name'/>      <b:if cond='data:blog.postImageUrl'>      <meta expr:content='data:blog.postImageUrl' property='og:image'/>      <meta content='1200' property='og:image:width'/>      <meta content='630' property='og:image:height'/>      <b:else/>      <meta content='YOUR LOGO URL' property='og:image'/>      </b:if>      <b:if cond='data:blog.metaDescription'>        <meta expr:content='data:blog.url.canonical' property='og:url'/>      <meta expr:content='data:blog.metaDescription' property='og:description'/>   </b:if>

 

After pasting the codes you need to change some places.

The numbers in red are  Facebook App ID . You need to enter your Facebook App ID here   .

In order to do Facebook Authorship, you have to put  your Facebook username in place of the blue  smasikofficial .

And you have to put the URL  of your blog logo in place of the latest green  YOUR LOGO URL .

1.    When the change is done, save the theme. 

2.    How to verify?

3.    Log in to Facebook first.

4.    Then   click on this link to   enter the Facebook Sharing Debugger page.

5.    Then paste the URL of your blog and click the Debug button.

If all goes well, your blog's logo, URL, name, meta description will show up there. If there is any mistake, he will suggest to correct it.

If there is any problem, don't forget to comment. We will try our best to solve the problem.

 

© Arefin Masuk. All rights reserved. Premium By FC Themes