gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:13:34 27 4
gpt4 key购买 nike

社交网络在共享 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 个不同的元标记。

最佳答案

property 属性来自 RDFa,itemprop 属性来自 Microdata,name 属性来自纯 HTML。

同时使用 itempropproperty 是可能的,但是 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 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。)

关于html - 图片社交元标签 - 属性 ="og:image"名称 ="twitter:image"itemprop ="image",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44525446/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com