When it comes to make our blog post popular and to engage more audience with our post we must have to share our content on social media. For that social media platform like facebook, twitter, google+ etc... comes first.
When we share our post on social media, it is very important that our post looks attractive and contains enough information about our post, like images, post-title, post-description, post-url etc... so that people can get basic information about our post.
Every social media platform have their own meta-tags which we can add in our website and take control over how our post contents appears on social media when we share them.
Read - Add Twitter Card Meta-Tags To Blogger/Wordpress
Things to be changed in above tags...
1 - 'YOUR-SITE-LOGO-URL' -- Here, put url of the image which you want to show up when you share your site's Home Page. (it may be your site logo or other image).
2 - 'YOUR-FB-PAGE-ID' -- If you have made FB page for your site then put your page id in this field.
3 - 'YOUR-FB-APP-ID' -- Here goes your FB app id.(if you don't know how to create/get FB app id then read below article).
Read - How To Create/Get Facebook App ID & Secret Key
---------------------------------------
That's it for today, if you have any query then please do comments and let me know.
THANK YOU
I HOPE THIS INFORMATION WILL HELP YOU
ENJOY...ENJOY...ENJOY...
When we share our post on social media, it is very important that our post looks attractive and contains enough information about our post, like images, post-title, post-description, post-url etc... so that people can get basic information about our post.
Every social media platform have their own meta-tags which we can add in our website and take control over how our post contents appears on social media when we share them.
Read - Add Twitter Card Meta-Tags To Blogger/Wordpress
Facebook Open Graph Meta-Tag
Without these tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content, but some times you might end up with having wrong image or title displayed for your post which is very undesirable.
So, Adding below custom meta-tags will help you to make your post look decent and more informative.
Facebook's open graph tags are prefixed with og: and then continued with specific property.
-----------------------------------------
Some basic meta-tags
og:title - It represent the title of your article (most important as your title have main keywords of your post).
og:url - The canonical url for your page.
og:type - Type of media of your content (for example. 'blog', 'website', 'article' etc... For more refer object type).
og:description - It will display your post description below the post title when you share post on facebook.
og:image - This tag is useful to display high quality image from your post. Since image is the main thing which attracts the more people towards your post. So it is essential that right image showed up for your shared post. This tag will help you for this.
See below image for more understanding...
----------------------------------------------------------
og:url - The canonical url for your page.
og:type - Type of media of your content (for example. 'blog', 'website', 'article' etc... For more refer object type).
og:description - It will display your post description below the post title when you share post on facebook.
og:image - This tag is useful to display high quality image from your post. Since image is the main thing which attracts the more people towards your post. So it is essential that right image showed up for your shared post. This tag will help you for this.
See below image for more understanding...
----------------------------------------------------------
Adding Meta-Tags To Blogger
In order to add these tags you just have to edit HTML code of your site, no coding skill is required.
Now, follow below procedure to add open graph meta-tags
Now, follow below procedure to add open graph meta-tags
Note that Open Graph recommends specifying the “og” RDFa Core 1.1 CURIE prefix mapping via <html prefix="og: http://ogp.me/ns#">, no such markup is required for Twitter cards.
So, before adding actual meta-tags, add below prefix in your <html>
--------------------------
xmlns:og='http://ogp.me/ns#'
--------------------------
After adding above prefix, now add below meta-tags...
You have to add these meta-tags between
<head>
add here
</head>
I recommend you to add just above the </head> , so that things don't get messed up.
------------------------------------
------------------------------------
<!-- Facebook OpenGraph starts-->
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!-- Title, URL & Description -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl.https' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<!-- Image -->
<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-SITE-LOGO-URL' property='og:image'/>
</b:if>
<!-- FB specific -->
<meta content='YOUR-FB-PAGE-ID' property='fb:admins'/>
<meta content='YOUR-FB-APP-ID' property='fb:app_id'/>
<!-- Facebook OpenGraph ends-->
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!-- Title, URL & Description -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl.https' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<!-- Image -->
<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-SITE-LOGO-URL' property='og:image'/>
</b:if>
<!-- FB specific -->
<meta content='YOUR-FB-PAGE-ID' property='fb:admins'/>
<meta content='YOUR-FB-APP-ID' property='fb:app_id'/>
<!-- Facebook OpenGraph ends-->
Things to be changed in above tags...
1 - 'YOUR-SITE-LOGO-URL' -- Here, put url of the image which you want to show up when you share your site's Home Page. (it may be your site logo or other image).
2 - 'YOUR-FB-PAGE-ID' -- If you have made FB page for your site then put your page id in this field.
3 - 'YOUR-FB-APP-ID' -- Here goes your FB app id.(if you don't know how to create/get FB app id then read below article).
Read - How To Create/Get Facebook App ID & Secret Key
---------------------------------------
That's it for today, if you have any query then please do comments and let me know.
THANK YOU
I HOPE THIS INFORMATION WILL HELP YOU
ENJOY...ENJOY...ENJOY...
No comments:
Post a Comment