When some one share your blog post in Facebook or any social media but show a wrong description about your blog post.Then follow this to get it correct!! There some Must Have Social Meta Tags For Blog \ Website template which help to share your post contain in Facebook and other social media very rich.
1. Add namespace to your blog
Find the <html ... statement and add the Open Graph namespace to html
2. Adding Facebook Open Graph mata tags
Add this code any where above </head> tag
Tips For Facebook Open Graph Meta Tags
Language
1. Add namespace to your blog
Find the <html ... statement and add the Open Graph namespace to html
xmlns:og='http://ogp.me/ns#'After adding this code it like Like this
2. Adding Facebook Open Graph mata tags
Add this code any where above </head> tag
<!-- Begin FB Open Graph metadata -->Now Change the RED colour value.
<meta property='og:type' content='article' />
<meta property='og:locale' content='en_US' />
<meta property='og:locale:alternate' content='en_GB' />
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:title' expr:content='data:blog.pageName' />
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' />
<b:else/>
<meta property='og:image' content='IMAGE URL 200x200px' />
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription' />
<b:else/>
<!-- If Needed -->
</b:if>
<meta property='fb:admins' content='Facebook Profile number ID'/>
<meta property='fb:app_id' content='Your App ID' />
<!-- End FB Open Graph metadata -->
Tips For Facebook Open Graph Meta Tags
Language
- en_US
- en_GB
This value not needed to change if your blog is written in English. For example if your using Tamil in your site then add a array to the meta tage by
<meta content='ta_IN' property='og:locale:alternate'/>
ta_IN - be the Language Code For Tamil
og:locale:alternate - it be a array for the multiple language blogger site.
- Check out More About Language Code!!
- Check out more about Open Graph protocol
Image Optimizing
- Image must have at least 200x200px
- You can use larger image size up to 1200x630px wide.
Facebook Profile ID and App ID
- To create Facebook App ID. Go to https://developers.facebook.com/apps/
- Click " Add a new app "
- Then Click "advanced setup" at bottom corner
- Type your Blog site name or any name you like it.
- Select your Category and click "Create App ID"
Learn More About Open Graph
If you want known more about Facebook Open Graph, Just visit the Facebook developer community.
Troubleshooting
Test the Facebook Open Graph tags go to Debugger at https://developers.facebook.com/tools/debug/
Go to above line and test your Facebook Open Graph mete tags by pasting URL in Debugger tool and click "Debug". It will analyse your meta tag (note: It also analyse twitter tag ) and gives informations about it.
Warnings That Should Be Fixed
If you get this message then try to fix it!
Recommend Article Must Have Social Meta Tags For Blog \ Website template
No comments:
Post a Comment