Blogger有一些用于获取帖子图片的布局数据标签,例如data:blog.postImageUrl
(获取帖子中第一张图片的URL)和data:blog.postImageThumbnailUrl
(生成帖子中第一张图片的70×70像素缩略图,在Facebook/Twitter/等上分享时太小而无法使用)。
但是,在发布帖子时,Blogger 会自动使用帖子中的第一张图片,使用经过专门调整大小和/或裁剪的图片版本生成自己的og:image
元标记。重要的是,此生成的图像将忽略您可能通过修改其URL中的s1600
对帖子图像所做的任何自定义大小调整或裁剪(此处解释),返回非常适合在社交媒体网站上共享的大尺寸图像。(它甚至将图像裁剪为1.91:1的比例,正如Facebook的"最佳实践"中所建议的那样。
下面是一个示例:
原始图片网址(大小:600×450:)
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/s1600/Montreal-Biodome-exterior.jpg
使用自定义大小值w180
调整图像大小(最大宽度为 180 像素):
https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w180/Montreal-Biodome-exterior.jpg
以下是 Blogger 自动生成的图片(裁剪为 600×315): https://1.bp.blogspot.com/-rEPYMMK3vT0/WaVHqLSY7-I/AAAAAAAAA2A/CVMWqg18oU8HEIyo3r3CWrcO8Bm7O4uiwCLcBGAs/w1200-h630-p-k-no-nu/Montreal-Biodome-exterior.jpg
请注意自动生成的图像如何使用其自己的大小值w1200-h630-p-k-no-nu
,完全忽略我指定的w180
。
对我来说,问题是我也使用Twitter的"大图像摘要卡"。我尝试使用 Blogger 数据标签指定用于twitter:image
卡片元标记的图片网址,如下所示:
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
OR
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
除了第一个(postImageThumbnailUrl
),如顶部所述,在70×70像素处太小,而第二个(data:blog.postImageUrl
)获取具有自定义大小值的图像URLw180
,返回的图像只有180像素宽 - 对于在Twitter上分享同样无用(生成的Twitter卡片使用空白占位符图像)。
我现在所做的是完全删除twitter:image
标签,这迫使Twitter使用og:image
标签,以便链接共享正常工作。但是,如果可能的话,我更喜欢将twitter:image
标签与正确的图像数据标签一起使用。
所以这是我的问题:有谁知道数据标签是什么,如果有的话,可以获取Blogger为每个帖子生成的大型裁剪w1200-h630-p-k-no-nu
版本的帖子图片?这样:
<meta expr:content='data.{ETC}' name='twitter:image'/>
在使用上图的帖子中,它将呈现为:
<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'/>
我感谢Prayag Verma指出一个类似的现有问题来回答这个问题。使用resizeImage
运算符,我在模板中实现了以下代码:
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "40:21")' name='twitter:image'/>
</b:if>
在帖子的来源中,呈现为:
<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'/>
这正是我想要得到的。它以优异的成绩通过了Twitter验证器。问题解决了。