With Twitter being one of the most popular social media sites to share contents online together with Facebook, Instagram, Youtube, it is no doubt that sharing your blog post on the said social networking site is one of the helpful ways to gain some decent traffic.
However, earning traffic from social media could sometimes be hindered especially if the preview of the content is unavailable or wrongly displayed.
Sometimes, when we share article links via Twitter, the displayed image wasn't related to the content, and that's because it's either you didn't put Twitter meta cards or you did a mistake when doing this.
Here's an example of mine demonstrating before and after result of adding Twitter meta cards to my Blogger/Blogspot blog site.
 |
| BEFORE |
As you can see, when I've tried validating my site's homepage URL preview, the image shown was not actually the real homepage image of my blog, but instead, the image used on the preview of Twitter was from one of my blog post.
It happened because there was already a certain protocol inside my blog's HTML code (brought by downloadable templates) instructing Twitter to display a specific preview which is not what I like.
Fortunately, when sharing my blog post link on Twitter, a preview of that content was shown correctly. The only problem is that Twitter is using an image from one of my blog articles when sharing my blog's homepage link which is quite frustrating.
It might just be a very small problem but it actually affects visitor's trust and my site's reliability if not taken an attention.
 |
| AFTER |
But since I was able to correct the open graph instructions and added twitter meta cards to my Blogger/Blogspot blog, the Twitter card validator showed the correct site title, description, and homepage image of my blog.
This is actually what I've been waiting for after many research and a lot of trials and errors.
So if you're experiencing the same problem as well, here's a helpful guide on how to add Twitter meta cards to your Blogger/Blogspot blog that might work well for you.
1. Log in to your Blogger account.
2. Go to your Blogger dashboard and click 'Theme'.
3. Click 'Backup' and download your backup file.
This is always a recommended step. Always make sure to have a backup file of your theme so that you would be able to restore from the previous changes in case something goes wrong when tweaking your blog's theme.
4. Click 'Edit HTML'.
5. Press CTRL + F on your keyboard and search for <head> tag.
6. Paste this code before '>' (optional).
xmlns:og='http://ogp.me/ns#'
Do this step only if you've already added Facebook open graph protocol to your blog. Otherwise, you might want first to add Facebook open graph protocol before you add Twitter meta cards.
7. Paste this below code after <head> tag.
<meta content='summary_large_image' name='twitter:card'/><meta content='@pinoytechsays' name='twitter:site'/><meta content='@pinoytechsays' name='twitter:creator'/><b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0f0GPFCIWvrYge6l5z9cR1o8CIRftCDNahqgEjDVn2jaNGGvCe8QxPXe8FNEdE434SbGdG1ftgG3PV_CcSpBjr2MQjoKlF6ulrZSyd5Jdi9OvcvUd46urJgDaMlyxxmUQQQdKbxmv8ljc/s1200/20200623_124711_0000.png' property='twitter:image'/></b:if><meta expr:content='data:view.title.escaped' name='twitter:title'/><meta expr:content='data:blog.url.canonical' name='twitter:domain'/><meta expr:content='data:view.description.escaped' name='twitter:description'/><b:if cond='data:view.isHomepage'>
Alternatively, you can also paste this instead below (after) your Facebook open graph protocol code.
Key notes:
twitter:card
summary- use this only if you want standard image size, title, and description
summary_large_image- almost similar to summary but it has predominantly has large image, title, and description
Change the green text with your desired twitter card.
twitter:site is used to represent your site's username
Example: pinoytechsays.com
@pinoytechsays
Change the yellow text with your custom username
twitter:creators is the Twitter username of the publisher of the blog
Change the red text with your twitter username.
the twitter:site and twitter:creator only applies to 'summary_large_image' type of card, and is not required to 'summary' card. You may delete this line of codes to reduce your HTML's size.
Replace the violet text with the URL of your homepage image.
8. Save your work.
9. Test your link by going to Twitter cards validator.
In case there's no change at all, click 'preview card' again to see the change in result.
Aside from that, you can also share your blog post/homepage link to test what it actually looks like when shared on Twitter.
For more information about implementing cards to your blog, you may visit Twitter meta cards guides.
This tutorial also works with other Content Management System like WordPress.
Putting Twitter meta cards helps you correctly instruct Twitter what must be shown when a link from your blog or when your blog is shared on Twitter.
Doing this blog trick not only helps you acquire traffic but it also helps your audience to give their trust about your site's reliability and identity.
In case this tutorial didn't work for you, feel free to comment down below and I would be more than willing to assist you.
Keep conquering, Digital Conquerors!
Post a Comment