seo,prestashop,product,schema.org,microdata , Using schema.org/Product image on a non image element


Using schema.org/Product image on a non image element

Question:

Tag: seo,prestashop,product,schema.org,microdata

I am editing a Prestashop installation and have a slightly odd situation. In PS when you add a colour attribute to a product it shows an <a> tag with a background colour to show the colour choices. In the shop I am building for an art supplier, we are having one product per colour of paint so there is no need for this however some products will have an image of the texture and others will have a photograph showing the texture as not all of them will be a solid block of colour.

The whole scenario is a little more complex than above however my question is can you use the schema.org/Product image attributes on a tag which is empty but has a background colour?

The resulting code would be something like this wrapped in <div class="product-container" itemscope="" itemtype="http://schema.org/Product">:

<a href="link-to-product" itemprop="image" style="background-color:#FF0000; width: 25px; height:25px;"></a>

I don't think it would be wise to delve into rewriting how Prestashop deals with Product Attributes for colours and other options because that would involve a certain kind of hell from what I have seen. The alternative is to leave the schema attributes out for those that don't have images but I would like to get it in there if possible. For those that don't know Prestashop, when you set product attributes you can choose a hexcode colour and an optional image file. If the image is not present then only the colour will show.


Answer:

If you are using the itemprop attribute for an a element, the property value will be the URL specified in the href attribute, not the content of the a element.

So in your example, the image property has the value link-to-product (which will be interpreted as URL):

schema:Product → schema:image → <link-to-product>

This is likely not what you want to say.

I did not understand exactly what you want to achieve, but if you do have an actual image that you want to provide as value for the image property, but you don’t want to use an img or a element, you could use a link element:

<div class="product-container" itemscope itemtype="http://schema.org/Product">
  <link href="product-image.png" itemprop="image"/>
</div>

Related:


Best JSON-LD practices: using multiple