Welcome to It Is Unique Official! In this post, You will learn about Blogger Open Graph Documentation.
When it comes to sharing your blog posts on social media, having the right metadata is key to ensuring your content is presented in the best way possible. Blogger provides an easy way to integrate Open Graph tags that make your posts more engaging and visible when shared on platforms like Facebook, Twitter, LinkedIn, and others. In this guide, we will explore the Open Graph meta tags available in Blogger, their usage, and how you can implement them effectively.
What is Open Graph?
Open Graph (OG) is a protocol that allows web pages to become rich objects in a social graph. In simpler terms, it helps define how your content will appear when shared on social media platforms. By including Open Graph meta tags, you can control how the title, description, image, and other elements of your content are displayed.
Key Open Graph Tags for Blogger
Blogger offers dynamic Open Graph variables to ensure that your content is displayed correctly across different pages. Below is a breakdown of each of these tags and their purpose:
1. og:locale
This tag defines the language of the blog page, making sure the correct locale is shown when shared.
<meta expr:content='data:blog.locale.language' property='og:locale'/>2. og:title
The og:title tag specifies the title of the page. If the page is a list of posts, it uses the blog's title; for individual posts, it shows the title of the post.
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>3. og:url
This tag defines the URL of the page, which ensures the correct link is shared.
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>4. og:site_name
The og:site_name tag shows the name of your blog, giving more context when shared.
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>5. og:type
This tag specifies the type of the page. If it's a list of items (like your homepage), the type will be website. For individual blog posts, it will be article.
<b:if cond='data:view.isMultipleItems'>
<meta content='website' property='og:type'/>
<b:else/>
<meta content='article' property='og:type'/>
</b:if>6. og:description
The og:description tag defines the description of the page. If you have a meta description set for your blog, that will be used. If not, it falls back to the page or post name, or a snippet of the content.
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
</b:if>For individual posts:
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
</b:if>7. og:image:alt
This tag sets the alternative text for the image that is shared. It’s important for accessibility and SEO.
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>8. og:image
The og:image tag specifies the image to use when the post is shared. If you’ve set a custom image for a post, that image URL will be used. If not, it falls back to a default image.
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1DSnZ1gvpNGwNyJg7ywckRti4lBv2hcZEGWjRhehCeTRt7ienI_RgMT5h3RleTn_gJqC4FsiRsJFB_hIAfdA5cnHX1CflfcbHLDemqOy5BdS8vl-Kb_wJiuNKqLzHkSkmNF1Gf6XTnUvMuKNxu7jhFtZdMR5Jwcfgx4DhWXsNav1TFI/s1600/It%20Is%20Unique%20Official.png' property='og:image'/>
</b:if>9. Combining All Tags
By using the Open Graph tags provided by Blogger, you can ensure that all the necessary information is shared correctly when your content is posted on social media platforms.
<meta expr:content='data:blog.locale.language' property='og:locale'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>
<b:if cond='data:view.isMultipleItems'>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' property='og:description'/>
</b:if>
<b:else/>
<meta content='article' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' property='og:description'/>
</b:else>
</b:if>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1DSnZ1gvpNGwNyJg7ywckRti4lBv2hcZEGWjRhehCeTRt7ienI_RgMT5h3RleTn_gJqC4FsiRsJFB_hIAfdA5cnHX1CflfcbHLDemqOy5BdS8vl-Kb_wJiuNKqLzHkSkmNF1Gf6XTnUvMuKNxu7jhFtZdMR5Jwcfgx4DhWXsNav1TFI/s1600/It%20Is%20Unique%20Official.png' property='og:image'/>
</b:if>Conclusion
By properly utilizing Open Graph meta tags in your Blogger template, you can ensure your content is optimized for social media sharing. This can significantly increase engagement and make your posts more visually appealing when shared across platforms. Implement these tags to improve the visibility of your blog posts and attract more traffic!