Guide To Understand Open Graph tags and its importance
Hello Everyone Today After a request from one of our subscriber we are writing this post on How To Add Open Graph Protocol (OGP) Meta Tags in Blogger Blog?
Most of the blogger templates are not open graph tags ready means not optimized for open graph tags. so you should do it by yourself or if you are facing any problems in implementing it then feel free to contact us.
Now When you share your posts or Blog home page then you should see the beautiful snippet with the featured image and title. if you are facing the wrong image showing problem then you should add the first image before anything in the post. if the problem not solved then we will help you.
That's It Thanks For Following our Tutorial '' How To Add Open Graph Protocol (OGP) Meta Tags in Blogger Blog? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
Basic Questions Regarding Open Graph Meta Tags.
What is Open Graph Protocol (OGP) Meta Tags?
Open Graph Protocol (OGP) Meta Tags enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
In simple words Open Graph Tags will structure your unstructured data of a page into a structured information so that the page can be defined when shared on Social Sites like Facebook etc they will fetch the featured image, description, title from the shared link. this will help visitors to see what the shared link is about and the chances of clicking on the link increases.
In simple words Open Graph Tags will structure your unstructured data of a page into a structured information so that the page can be defined when shared on Social Sites like Facebook etc they will fetch the featured image, description, title from the shared link. this will help visitors to see what the shared link is about and the chances of clicking on the link increases.
Why to use Open Graph Meta tags?
I already explained you above when you add this tags in your template in the header section then your blog will be structured in a proper way when shared on Social Sites. But if those social sites are not able to extract information (i.e., title, image, description, ) from you blog post then you will loose your potential clicks and visitors.
I will give you an example:
If your competitor is using Open Graph Meta Tags in his blog and assume you are not using it. and when you wrote an original post on any topic and if he copied your post and both of you share that post on Facebook groups which has a common topic. Imagine when you share the post link and nothing appears/nothing fetched by facebook bots only a plain link which looks ugly appears.
And Your Competitor Share his post link in the same group and nice image, title with description shows.
Now The Question will arose:
Where will visitors click? on your original post or your competitor copied post.
Obviously you will say visitors will click on the nice structured post shared by your competitor. because visitors don't know who has copied. They will just see the image, title etc So To make your blog more credible on Social Sites Add this meta tags it is very important.
STEP 3: Now Search For <html and Paste The Code inside it in the end as shown in the image below .
STEP 3: Now after adding the namespace now its time to add the meta tags .
STEP 4: All Done Save the Template and Check it in Facebook Debugger.
STEP 3: You will see all the fetch details.
STEP 4: If you have added the meta tags correctly then you will see the image with description and title as shown in the image above.
STEP 5: If you have misplaced the tags then you will not see the image you will get warning on the debugger page the image tag is missing.
I will give you an example:
If your competitor is using Open Graph Meta Tags in his blog and assume you are not using it. and when you wrote an original post on any topic and if he copied your post and both of you share that post on Facebook groups which has a common topic. Imagine when you share the post link and nothing appears/nothing fetched by facebook bots only a plain link which looks ugly appears.
And Your Competitor Share his post link in the same group and nice image, title with description shows.
Now The Question will arose:
Where will visitors click? on your original post or your competitor copied post.
Obviously you will say visitors will click on the nice structured post shared by your competitor. because visitors don't know who has copied. They will just see the image, title etc So To make your blog more credible on Social Sites Add this meta tags it is very important.
Commonly Used Open Graph Properties in Blogs:
| og:url | This property represents the url (link) of your homepage, posts,pages etc |
| og:title | This property represents the title of the Blog, Posts, Pages etc |
| og:type | This property represents the type of the page users visit. We use blog/website for the homepage. other that that we use article type for the posts etc |
| og:image | This property represents the images. For homepage we use Blog logo For other than homepage we use post featured image. |
| og:description | This property represents the description of your blog homepage, posts etc. this will show when you share on Facebook. |
How To Add Open Graph Meta Tags in Blogger Template?
Lets add the Open Graph meta tags in blogger. Follow the Below steps:
First we will add the namespace to the HTML of the template.
First we will add the namespace to the HTML of the template.
STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard
STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.
STEP 3: Now Search For <html and Paste The Code inside it in the end as shown in the image below .
xmlns:og='http://ogp.me/ns#'
STEP 3: Now after adding the namespace now its time to add the meta tags .
STEP 4: Now Search For <head> and copy The Given code Fust Below/After The <head>.
<!-- Open Graph Meta Tags Start -->
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='Your_Logo_Url' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!--Optional Meta Tags Add if you want-->
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>
<!-- Open Graph Meta Tags END -->
Customization:
- The Yellow Highlighted text is responsible for your Blog Logo this means you have add URL of the image which you considered as logo of your blog.
Optional Meta Tags:
- The Light Blue Highlighted Text is Responsible App Id. Create an app using facebook developers site you just need to write the app title and click on create then you will get your app id.
- The Orange Highlighted Text is Responsible For Your Facebook Profile Id or your username add it.
Verifying Open Graph Meta Tags in Facebook Debugger:
STEP 2: Enter your Blog or Post URL and click on Debug
STEP 3: You will see all the fetch details.
STEP 4: If you have added the meta tags correctly then you will see the image with description and title as shown in the image above.
STEP 5: If you have misplaced the tags then you will not see the image you will get warning on the debugger page the image tag is missing.
Conclusion:
After Following this guide you should know what Open Graph Tags are? what is its importance? how it should be implemented in the blog? So if you are feeling confused or lost somewhere then feel free to comment or contact us directly we will try to help you as fast as possible.Most of the blogger templates are not open graph tags ready means not optimized for open graph tags. so you should do it by yourself or if you are facing any problems in implementing it then feel free to contact us.
Now When you share your posts or Blog home page then you should see the beautiful snippet with the featured image and title. if you are facing the wrong image showing problem then you should add the first image before anything in the post. if the problem not solved then we will help you.
That's It Thanks For Following our Tutorial '' How To Add Open Graph Protocol (OGP) Meta Tags in Blogger Blog? '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
No comments:
Post a Comment