2

Blogger 有一些用于获取帖子图片的布局数据标签，例如data:blog.postImageUrl（获取帖子中第一张图片的 URL）和data:blog.postImageThumbnailUrl（生成帖子中第一张图片的 70×70 像素缩略图，这太小了在 Facebook/Twitter/等上分享时使用）。

但是，在发布帖子时，Blogger 会自动使用您帖子中的第一张图片生成自己的og:image元标记，并使用您图片的特别调整大小和/或裁剪的版本。重要的是，此生成的图像将忽略您可能通过修改s1600其 URL（在此处解释）中对帖子图像进行的任何自定义调整大小或裁剪，返回一个非常适合在社交媒体网站上共享的大尺寸图像。（它甚至按照 Facebook 的“<a href="https://developers.facebook.com/docs/sharing/best-practices#images" rel="nofollow noreferrer" 中的建议将图像裁剪为 1.91:1 的比例>最佳实践”。）

这是一个例子：

原图网址（尺寸：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-pk-no-nu/Montreal -Biodome-exterior.jpg

请注意自动生成的图像如何使用自己的大小值w1200-h630-p-k-no-nu，完全忽略了w180I 指定的值。

对我来说，问题是我还使用 Twitter 的“大图像摘要卡”。我尝试twitter:image使用 Blogger 数据标签指定用于卡片元标签的图片 URL，如下所示：

<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
OR
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>

除了postImageThumbnailUrl上面提到的第一个 ( ) 太小了 70×70 px，而第二个 ( data:blog.postImageUrl) 获取自定义大小值为 的图像 URL w180，返回的图像只有 180 px 宽——同样没用用于在 Twitter 上共享（生成的 Twitter Card 使用空白占位符图像）。

我现在所做的是twitter:image完全删除标签，这迫使 Twitter 使用og:image标签，以便链接共享工作。但是，如果可能的话，我更愿意使用twitter:image带有正确图像数据标签的标签。

所以这是我的问题：有谁知道数据标签是什么（如果存在），以获取w1200-h630-p-k-no-nuBlogger 为每个帖子生成的大的、裁剪版本的帖子图像？像这样：

<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'/>
4

1 回答 1

1

我感谢Prayag Verma指出了一个类似的现有问题来回答这个问题。使用resizeImageoperator，我在模板中实现了以下代码：

<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 验证器。问题解决了。

于 2017-08-30T07:46:31.173 回答