Friday, May 22, 2024
If your blog is built on Blogger, then this information is very useful for you, because if your block does not have Facebook and Twitter open graph meta tags, then this direct affects your social media traffic. You must have seen that when you would share any post of your blog on Facebook and Twitter. So a small Thumbnail is visible or there is no thumbnail show. The only reason for this is that if your Blogger theme does not add code for Facebook and Twitter open graph meta tags, then this article will help you a lot. Because today I will teach you how you can add open graph to all the posts and pages of your blog.
When we create a blog on Blogspot, almost all people use the free theme, which does not have many features available, and the people who buy the blogger theme get almost all the necessary features. But the open graph is not correctly added to that theme. Because of which traffic comes less in your blog.
How To Add Social Media Open Graph Meta Tags In Blogger Blog
Step 1: Login into your Blogger Account.
Step 2: Now Go to Theme >> click on Edit HTML.
Step 3: Find the <head> (it is called head tag)
Step 4: Just after the head tag paste the following code:
<!-- Metadata for Open Graph protocol. See http://ogp.me/. -->
<b:if cond='data:view.isHomepage'>
<meta content='website' property='og:type'/>
</b:if>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:view.isMultipleItems and not data:view.isHomepage'>
<meta content='object' property='og:type'/>
</b:if>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:tag cond='data:view.isMultipleItems and data:widgets.Blog.first.posts[0].featuredImage' expr:content='data:widgets.Blog.first.posts[0].featuredImage' name='meta' property='og:image'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' property='og:image'/>
<meta expr:content='data:view.featuredImage' name='twitter:image'/>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:view.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.url.canonical' name='twitter:site'/>
<meta expr:content='data:view.description.escaped' name='twitter:description'/>
Step 5: Save the theme.