How to Set a Microdata Image Property, Without Letting the Browser Download the Image

How to set a microdata image property, without letting the browser download the image?

(Note: a now deleted answer suggested the use of the meta element)

Instead of the meta element, you should use the link element, because the content is a URI:

When a string value is a URL, it is expressed using the a element and its href attribute, the img element and its src attribute, or other elements that link to or embed external resources.

It’s even required:

If a property's value, as defined by the property's definition, is an absolute URL, the property must be specified using a URL property element.

So it should be:

<link itemprop="image" href="static/image.jpg" />

Using Schema.org’s url property on a Product page without adding a visual link

For providing a URL in Microdata, you must use "a URL property element". Currently these are:

a, area, audio, embed, iframe, img, link, object, source, track, and video.

a and link are the only "generic" elements from this set.

If you don’t want to provide a visual link (by using a), go with link (which is typically hidden in browser default stylesheets). This is not "a big 'no no'", as link elements are allowed in the body if used for Microdata.

How to add an image to an event with Microdata meta tag?

Instead of using the meta element, you must use the link element (because the value is a URI):

<link itemprop="image" href="image.jpg" />

This is required by HTML5 (bold emphasis mine):

The meta element represents various kinds of metadata that cannot be expressed using the […] link […] elements.

And it’s also explicitly required by Microdata.

Do you put Schema Microdata meta tags in the html body?

If a meta element

  • has an itemprop attribute and a content attribute, and
  • has no name attribute, no http-equiv attribute, and no charset attribute,

then it’s valid to have this meta in the body. (If the value is a URL, you must use link instead.)

Why? Because the Microdata specification changes HTML5.

(Note that RDFa also changes HTML5 by allowing meta in the body in some cases.)


If you were to keep the meta tags in the <head>, then how would you relate these two dates to their reviews?

You could use the itemref attribute:

<!DOCTYPE html>
<html>
<head>
<title>Using itemref for meta in the head</title>
<meta itemprop="datePublished" content="2011-03-25" id="date">
</head>
<body>

<div itemscope itemtype="http://schema.org/Review" itemref="date">
<span itemprop="name">…</span>
</div>

</body>
</html>

itemref takes a space-separated list of id values, so you can even reference two or more elements. Just add the id of all elements (containing itemprop attributes) that should be added to the item to its itemref attribute, e.g.: itemref="date author rating".

Google plus snippet - Image thumbnail is not shown

Looks like it was a caching problem. Once I appended a query string on to the URL, I got the image to pull up. I must have had a bad URL to an image the first time and it cached that bad URL request.

UserComments in test: “dtstart required”, but not part of standard?

Your Microdata and Schema.org usage is correct. They don’t define any required properties. So when the Google Structured Data Testing Tool reports "Missing required …" errors, it only means that Google (probably) won’t consider displaying a Rich Snippet when specific properties are missing.

When testing your snippet with a parent item for the comment property, no errors are reported, e.g.:

<article itemscope itemtype="http://schema.org/CreativeWork">
<table>
<!-- your tr here -->
</table>
</article>

Another solution: adding a startDate property (but Google might want to see a date from the future here.)

(The term "dtstart" probably comes from the data-vocabulary.org vocabulary, where Google required this property for the Event Rich Snippet. And Schema.org’s UserComments is also some kind of Event, see notes below.)

If you don’t care about Google’s Rich Snippets, you can keep it like that.


Notes about your snippet:

  • You might want to use Comment instead of UserComments (because the latter one is an Event, not a CreativeWork).

    However, currently, the comment property expects UserComments, but this will most likely change in one of the next Schema.org updates.
  • For specifying replyToUrl, you must use link instead of meta.

Hidden Breadcrumbs Rich Snippet

HTML5 defines that the meta element

[…] represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.

The link element "allows authors to link their document to other resources".

So you have to use link instead of meta if the value is a URI. (Microdata explicitly requires this, too.)

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<link itemprop="url" href="http://www.example.com/dresses">
<meta itemprop="title" content="Dresses">
</div>

How to include itemCondition and logo schema tags in the schema.org product snippets?

For logo: Instead of the meta element you should use the link element:

<link itemprop="logo" href="http://rstest.mydomain.com/images/userfiles/logos/stone-island.png" />

For itemCondition: You should not use br elements here. Use a ul for the features, div for the article number, and p for the "View our full range …".

For audience: PeopleAudience doesn’t support the gender property (it’s for People only). You probably mean the suggestedGender property.



Related Topics



Leave a reply



Submit