So, there was a report in Blogger Help Community which is what made me write this down.
This is in correlation with Blogger & Facebook OG Object debugger. The report was that Blogger blogs doesn't show preview in Twitter card validator.
So, I went ahead and tried previewing one of my blog posts and I got the following,
Therefore, I tweeted the same link which is here and it didn't show any preview.
Hence, I concluded not just the validator, the whole twitter stopped scraping my open graph information. Therefore, I made a small research and added a tag in my template.
Please follow instructions below,
- Go to https://blogger.com > Themes
- Click on the three dot menu near "My Themes" and choose Edit HTML
- In the appearing page, press Ctrl + F and find the below code,
<b:include data='blog' name='all-head-content'/>
- Right after that code, paste the following code,
<meta name="twitter:card" content="summary" />
- So, it should look like,
<b:include data='blog' name='all-head-content'/>
<meta name="twitter:card" content="summary"/> - Once done, click on the floppy icon in the top right which indicates "Save"
Once I have added the above code and after a couple of tries, the card validator finally scraped my URLs.
So did the tweet too as shown below,
Thus, by adding one line of code we can make twitter scrape all our OG tags. However, this content in the meta tag has one other option.
summary_large_image
<meta name="twitter:card" content="summary_large_image"/>
So, when you add this as content instead of summary, you will get a nice big image preview as shown below,
So, if you want to learn more about twitter cards to optimise your blog related to twitter previews, please read this documentation here.
I just wish i knew how to get on this pg
ReplyDeleteTo this page as in the blog or Twitter card validator?
DeleteIf it is blog, please go to this URL -> https://howtoblog.krishnainfotron.com
If it is Twitter card validator, please go to this URL -> https://cards-dev.twitter.com/validator
Hope that helps.
Of course! The "summary_large_image". Really cool trick . Thank you for sharing!
ReplyDeleteThanks for reading through :-) and am happy it helped. Happy blogging :-)
DeleteThank you so much for sharing! This was super helpful and it worked perfectly for me.
ReplyDelete