电子商务中图像的语义标记 [英] Semantic markup for images in e-commerce
问题描述
我已经看到，与Schema.org(Product)的image属性相比，各种零售商更喜欢OGP中的og:image，Twitter Cards中的twitter:image，并且这种偏好以各种方式表现出来，例如具有较高的og:image属性的分辨率图像，而Schema.org image属性的分辨率非常低或没有值.
I have seen that various retailers prefer the og:image from OGP,twitter:image from Twitter Cards over the image property from Schema.org (Product), and that preference shows up in various ways like having high resolution images for og:image property and very low resolution or no value for the Schema.org image property.
如果我需要图像，我应该优先使用Schema.org image上的og:image和twitter:image吗?
If I need images should I give preference to the og:image and twitter:image over the Schema.org image?
如果是这样，那么当前的趋势是更喜欢og:image和twitter:image而不是Schema.org image，这是否有意义，因为Schema.org是用于搜索引擎的，因此OGP和Twitter Cards都是打算将页面转换为社交对象?
If so is it just the current trend to prefer og:image and twitter:image over Schema.org image, or does it make sense because Schema.org is intended for search engines where as the OGP and Twitter Cards are meant to convert the pages into social objects?
推荐答案
要澄清:
-
Schema.org 和开放图谱协议是词汇，可用于各种语法.
Schema.org and Open Graph protocol are vocabularies for use with various syntaxes.
Twitter卡是一组元数据名称 >与HTML的meta元素一起使用.
Twitter Cards is a set of metadata names for use with HTML’s meta element.
消费者(例如搜索引擎，浏览器加载项，社交网络等)决定
Consumers (like search engines, browser add-ons, social networks, etc.) decide
- 哪些词汇表(Schema.org，Open Graph协议，Dublin Core，等)，
- 哪些语法(RDFa，微数据，JSON-LD，Turtle，RDF/XML等)，
- 哪些约定(微格式)
- 哪些元数据名称(
keywords，description，twitter:image，等)和 - 哪些链接类型(
nofollow，external，home，等.)
- which vocabularies (Schema.org, Open Graph protocol, Dublin Core, etc.),
- which syntaxes (RDFa, Microdata, JSON-LD, Turtle, RDF/XML, etc.),
- which conventions (Microformats),
- which metadata names (
keywords,description,twitter:image, etc.), and - which link types (
nofollow,external,home, etc.)
他们想要支持.
如果您只关心特定的消费者，请查找他们所支持的内容并使用它.如果您还关心可能不认识的消费者，请使用(流行的)更多/几种方式.
If you only care about specific consumers, look up what they support and use this. If you also care about consumers you might not know about, use more/several (of the popular) ways.
在您的特定示例中，您可以轻松实现所有三种方式:
In your specific example, you can easily implement all three ways:
<!-- this is plain HTML5,
using the registered metadata name "twitter:card" -->
<meta name="twitter:image" content="http://example.com/image.png">
<!-- this is HTML5+RDFa,
using the properties "og:image" (from Open Graph protocol) and "schema:image" (from Schema.org),
as defined in <http://www.w3.org/2011/rdfa-context/rdfa-1.1> -->
<link property="og:image schema:image" href="http://example.com/image.png">
(附带说明:Twitter应该为URL值定义链接类型而不是元数据名称，因为它是可以对所有三个元素使用相同的link元素.)
(Side note: Twitter should have defined link types instead of metadata names for values that are URLs, as it’s required by HTML5. Because they didn’t, you have to use meta instead of link; otherwise you could have used the same link element for all three.)
这篇关于电子商务中图像的语义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
