Semantic markup for images in e-commerce

Question

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?

Answer 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.)