图片社交元标签 - 属性="og:image" name="twitter:image" itemprop="image"

Question

社交网络在从网站提取标题和描述方面做得很好 wen URL 是共享的，但对于图像，仍然需要创建自定义元标记：property="og:image" name="twitter:image" itemprop="image"。所以我的问题是这行得通吗：

<meta property="og:image" name="twitter:image" itemprop="image" content="http://example.com/image.jpg" />

所以我不必为我网站上的每个网页创建 3 个不同的元标记。

Answer 1

property 属性来自 RDFa，itemprop 属性来自 Microdata，name 属性来自普通 HTML.

可以一起使用 itemprop 和 property，但是 Microdata doesn’t allow meta 元素上的 name 属性与 itemprop属性（虽然 RDFa 允许），因此您可以使用两个元素：

<meta property="og:image" name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

<meta name="twitter:image" content="http://example.com/image.jpg" />
<meta itemprop="image" property="og:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

由于 Schema.org 也可以与 RDFa 一起使用，您可以省略微数据（除非您需要支持不支持 RDFa 的消费者）：

<meta property="og:image image" name="twitter:image" content="http://example.com/image.jpg" />
<!-- note that this snippet is still invalid, see below -->

为什么这些无效？因为您 have to 使用 link 元素而不是 meta 元素，如果值是 URI。然而，在实践中这是有问题的，因为：

twitter:url 定义为 meta extension, not as link type (but because the value is a URL, it should have 是 link 类型)
Facebook好像只认得meta，不认得link（我没有测试，这是我在这里回答有关它的问题时读过几次的——例如：)

因此，虽然 Twitter Cards 和 Facebook 的 OGP 建议使用（并且可能只支持）无效标记，但 Schema.org 消费者不一定是这种情况。所以你可能想结合无效和有效的方式：

<meta name="twitter:image" property="og:image" content="http://example.com/image.jpg" /> <!-- invalid, but expected -->
<link property="image" href="http://example.com/image.jpg" /> <!-- valid -->

（请注意，所有这些带有 Schema.org 的 image 属性的代码片段都需要一个带有 vocab 的父元素。如果您不提供它，它是不清楚 image 属性属于哪个词表，如果不清楚，应该用 schema:image 代替。）

图片社交元标签 - 属性="og:image" name="twitter:image" itemprop="image"

Image sociall meta tags - property="og:image" name="twitter:image" itemprop="image"

html

facebook-opengraph

schema.org

microdata

twitter-card