I have a website on which images are displayed. The images which are displayed are resized and then cached by the web application. But the cache is volatile. For the microdata I want to link to non-volatile images.
My current solution for this is
<img src="cache/image-resized.jpg" />
<img src="static/image.jpg" itemprop="image" style="display:none;"/>
This works. Google interprets the microdata correctly and the resized image is displayed. But the users browser also downloads the static image, which is a large image.
So how do I 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 itshref
attribute, theimg
element and itssrc
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" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With