Facebook Open Graph Meta for Blogger:
Before nosotros boundary to our tutorial, it is essential to larn what terminologies (object properties) are to a greater extent than commonly used inward Open Graph. This would non exclusively aid yous to agreement the attribute but would also aid yous inward learning their functionalities.
- og:title: This status represents the championship of your posts, blog, etc.
- og:url: This represents the URL of your posts, homepage, etc.
- og:image: This weather represents the ikon that should endure displayed on Facebook.
- og:type: It represents the type of your page. For example, on the homepage nosotros utilisation “blog” in addition to on article pages nosotros utilisation “article” attribute.
Step#1: Adding Open Graph Protocol Namespace:
The First thing yous demand to create is to Login into your Blogger account. Now from the dashboard become to Template >> Edit HTML in addition to search for the next highlighted HTML attribution. (Quick Tip: This code is ordinarily introduce at the inaugural off lines of your template’s coding).
<html ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now merely adjacent to the highlighted code (as shown above) add together xmlns:og='http://ogp.me/ns#'. Once everything is down, it would somewhat expect similar this. (Quick Tip: Make certain yous acquire out a infinite betwixt these ii codes).
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Step#2: Adding Object Properties:
After adding the namespace properly inward the template, instantly it is fourth dimension to insert the object properties that nosotros convey discussed inward the rattling inaugural off of this tutorial thus search for the <head> tag in addition to merely below it glue the next chunk of coding. Once everything is done, press the “Save Template” button.
<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='http://www.your-blog-logo.jpg' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
</b:if>
<meta content='App-ID' property='fb:app_id'/>
<meta content='Facebook-Profile-ID' property='fb:admins'/>
Congratulations: Facebook Open Graph Meta Data is successfully added to your Blogger blog.
You mightiness endure curious to know whether yous everything correct or not, thus if yous desire to larn how the content would expect when yous volition part on Facebook thus examine your URLs inward Google Rich Snippet tool. It displays the errors in addition to provides yous a modest preview of your content.
On the instant note, most of the templates are non optimized for Open Graph, thus yous create demand to acquire this undertaking done yourself no affair whether yous utilisation a Custom or default Blogger templates. However, these tags create non aid yous to rank good inward the Search engine results. These are merely to aid Social crawlers to fetch the correct content from your site.
We are confident that this article would aid yous inward tackling the bugs which yous in all likelihood aspect upward spell sharing your content on Facebook. However, if yous know a meliorate agency of doing this thus create part it amongst us past times leaving a comment below.
No comments:
Post a Comment