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?

Cedell

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

Mercedes

Thanks Unor for the excellent insight, I also wanted to know or validate what I see as being the current trend by the retailers to have images in ogp or twitter and not in Schema.org,and use schema.org for price related markup only. – Cedell

Also would you happen to know any Java based API that lets you read the meta data tags like twitter:image from an HTML page,given the URL of the page? – Cedell

@user1965449: No, I don’t know any. You could ask a question on the sister site Software Recommendations. – Mercedes