问题
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.
If I need images should I give preference to the og:image
and twitter:image
over the Schema.org image
?
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?
回答1:
To clarify:
Schema.org and Open Graph protocol are vocabularies for use with various syntaxes.
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
- 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.)
they want to support.
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">
(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.)
来源:https://stackoverflow.com/questions/28144388/semantic-markup-for-images-in-e-commerce