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”.
⇒Join us on Telegram for more Sure and Accurate football-winning tips every day...click here
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.
 |
| 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.
Instructions:
Copy the codes above and paste it in a notepad, follow the stet below:
- Replace the “YOUR SITE NAME” in the code with your blog name e.g My Tech Blog.
- 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 imgur.com then copy the direct link.
- If you have a facebook page, replace the “YOUR FACEBOOK APP ID” with the facebook ID of your page.
- Replace “@YOUR TWITTER HANDLE” with your site twitter handle e.g @techblog.
- 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
Note:
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.
