图像社交元标签 - property="og:image" name="twitter:image" itemprop="image"

Question

当 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。

\n\n

可以将itemprop和一起使用，但 Microdata不允许在具有该属性的元素上使用属性（而 RDFa 允许），因此您可以使用两个元素：propertynamemetaitemprop

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

\n
• twitter:url被定义为元扩展，而不是链接类型（但因为该值是一个URL，所以它应该是一个链接类型）
\n
• Facebook 似乎只识别meta，而不识别link（我没有\xe2\x80\x99t 测试它，它\xe2\x80\x99 是我在回答有关它的问题时多次阅读的内容 - 例如：应该 og:image 和 og: url 放在 <meta> 或 <link> 中？）
\n

\n\n

因此，虽然 Twitter Cards 和 Facebook\xe2\x80\x99s OGP 建议使用（并且可能仅支持）无效标记，但对于 Schema.org 消费者来说，情况不一定如此。所以你可能想结合无效和有效的方式：

\n\n

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

\n\n

（请注意，所有这些具有 Schema.org\xe2\x80\x99simage属性的片段都需要一个带有 的父元素vocab。如果您不\xe2\x80\x99t 提供它，则 \xe2\x80\x99s 不清楚该属性属于哪个词汇image表属于。如果可以\xe2\x80\x99t，schema:image则应该使用。）

\n