Blogger has a few layout data tags used to fetch post images, such as data:blog.postImageUrl (which fetches the URL of the first image in your post) and data:blog.postImageThumbnailUrl (which generates a 70×70 px thumbnail of the first image in your post, which is too small to use when sharing on Facebook/Twitter/etc.).
However, when publishing a post, Blogger will automatically use the first image in your post to generate its own og:image meta tag using a specially resized and/or cropped version of your image. Importantly, this generated image will ignore any custom resizing or cropping you may have done to the post image by modifying the s1600 in its URL (explained here), returning a large-size image that’s perfect for sharing on social media sites. (It even crops the image down to a 1.91:1 ratio, as recommended in Facebook’s “Best Practices”.)
Here’s an example:
Original image URL (size: 600×450:)
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/s1600/Montreal-Biodome-exterior.jpg
Resized image using custom size value of w180 (for a maximum width of 180 px):
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w180/Montreal-Biodome-exterior.jpg
And here’s the image that Blogger automatically generates (cropped to 600×315): https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg
Note how the auto-generated image uses its own size value of w1200-h630-p-k-no-nu, completely ignoring the w180 I specified.
The problem for me is that I also use Twitter’s “Summary Card with Large Image”. I try to specify what image URL to use for the twitter:image card meta tag using Blogger data tags, like so:
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
OR
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
Except that the first (postImageThumbnailUrl), as mentioned at the top, is far too small at 70×70 px, whilst the second (data:blog.postImageUrl) fetches the image URL with the customized size value of w180, returning an image only 180 px wide – just as useless for sharing on Twitter (the resulting Twitter Card uses a blank placeholder image).
What I’ve done for now is to remove the twitter:image tag altogether, which forces Twitter to use the og:image tag so that link sharing works. However, I’d prefer to use the twitter:image tag with the right image data tag if at all possible.
So this is my question: Does anyone know what the data tag is, if one exists, to fetch the large, cropped w1200-h630-p-k-no-nu version of a post image that Blogger generates for each post? Like so:
<meta expr:content='data.{ETC}' name='twitter:image'/>
Which, in a post using the above image, would render as:
<meta content='https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg' name='twitter:image'/>
My thanks to Prayag Verma for pointing to a similar existing question that answered this one. Using the resizeImage operator, I implemented the following code to my template:
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "40:21")' name='twitter:image'/>
</b:if>
Which, in the post’s source, renders as:
<meta content='https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg' name='twitter:image'/>
That’s exactly what I was trying to get. It passes the Twitter Validator with flying colors. Problem solved.