html - 图片社交元标签 - 属性 ="og:image"名称 ="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。

同时使用 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如果值为 URI，则使用 link 元素而不是 meta 元素。然而，在实践中这是有问题的，因为:

• twitter:url 定义为 meta extension , 不像 link type (但因为该值是一个 URL，它 should have 是一个链接类型)
• Facebook 似乎只识别meta，而不识别link(我没有测试它，这是我在这里回答有关它的问题时读过几次的内容 -- se for示例:Should og:image and og:url put in <meta> or <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。)