Check HP Laptop Battery Health Status Complete Detailed information

How to Apply Facebook OpenGraph and Twitter Card on Blogger Within 10 Mins

Web to Social Network

For some bloggers and website owners, it is a nightmare to get the right content of their article to show as a snippet when shared on social media, especially on Facebook and Twitter. For this reason, we will be teaching Blogger (Blogspot) users how they can fully set-up their blog to show the right snippet when their posts are shared on these social networks.

Generally, the procedures are different for both of these two social networks, but we have combined the codes needed to get this started so that multiple aim can be achieved at once. For Facebook we have "Open Graph", while Twitter preferred to call theirs "Card".

Implementing Open Graph and Twitter Card on your blog ensure that the right snippet of your article such as the post title, description, and featured image are displayed correctly when your content is shared on these social platforms, which can greatly help in attracting clicks. As blog owners we know what that means.

Post Snippet Showing on Whatsapp
Hint: Do you know that enabling Facebook Open Graph also lets your post snippet show on Whatsapp and Instagram?

There are different types of Twitter cards, we have the summary card, photo card, larger summary card and more. In this article, we will be sharing how to enable Twitter Summary Card for Blogger as well as Open Graph. It's quite simple and will only takes about ten minutes of your time.

Please do note that this procedure is meant for blogger/blogspot users only. It works on all templates or themes.


Copy the codes above and paste it in a notepad, follow the stet below:

  1. Replace the "YOUR SITE NAME" in the code with your blog name e.g My Tech Blog.
  2. Replace the "YOUR SITE LOGO URL" with the URL address of your site logo. For instance, you can upload your site logo (should be around 400px) to then copy the direct link.
  3. If you have a facebook page, replace the "YOUR FACEBOOK APP ID" with the facebook ID of your page.
  4. Replace "@YOUR TWITTER HANDLE" with your site twitter handle e.g @techblog.
  5. Make sure you copy the code exactly as we put it above, then go to your blogger template by navigating to Template -> Edit HTML (make sure you create a backup). Search <head> using CTRL+F, then paste the code right below it.

Also Learn: How to Completely Disable Pinterest Rich Pins on any Website


i. To make the Open Graph and Twitter Card works effectively, make sure you enabled "Meta Description" in your blogger settings. You can locate this by going to Settings -> Search Preference -> Description.

ii. Make sure each post you published has its own meta description. You can see this under "Options" when composing a new post.

To verify if the Twitter Card and Open Graph works, use the validators below:

Twitter Card Validator
Open Graph Debugger/Validator

If you faced any problems do let us know via comment.

About CCN World Tech

CCN World Tech is a platform specifically dedicated in providing latest tech related news and articles around the world. We also tutor people on how to get the best out of their handheld and tech pertaining devices. You can follow us on Facebook, Twitter, and Pinterest.
    Post Comment

Disclaimer: Information provided on CCN World Tech were verified and were deemed to be accurate, but notwithstanding, they are subjected to be edited, rewritten, or modified at anytime.