在非图像元素上使用 schema.org/Product 图像答案

【问题标题】：Using schema.org/Product image on a non image element在非图像元素上使用 schema.org/Product 图像
【发布时间】：2015-05-02 19:38:25
【问题描述】：

我正在编辑 Prestashop 安装，但情况有点奇怪。在 PS 中，当您向产品添加颜色属性时，它会显示带有背景颜色的 <a> 标签以显示颜色选择。在我为艺术供应商建造的商店中，我们每种颜色的油漆都有一个产品，因此没有必要这样做，但是有些产品会有纹理图像，而另一些产品会有显示纹理的照片，因为并非全部它们将是一个纯色块。

整个场景比上面的要复杂一些，但是我的问题是你能在一个空但有背景色的标签上使用 schema.org/Product 图像属性吗？

生成的代码会像这样包裹在<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>

我认为深入研究重写 Prestashop 如何处理颜色和其他选项的产品属性是不明智的，因为从我所看到的情况来看，这将涉及某种地狱。另一种方法是将架构属性留给那些没有图像的人，但如果可能的话，我想把它放在那里。对于那些不了解 Prestashop 的人，当您设置产品属性时，您可以选择十六进制颜色和可选的图像文件。如果图像不存在，则只会显示颜色。

【问题讨论】：

您能提供示例代码吗？
@unor 我已编辑问题以包含基本代码示例。我在页面上有很多其他元素和产品架构属性。

标签： seo prestashop product schema.org microdata

【解决方案1】：

如果您将itemprop 属性用于a 元素，则属性值将是href 属性中指定的URL，而不是a 元素的内容。

因此，在您的示例中，image 属性的值为 link-to-product（将被解释为 URL）：

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

这可能不是你想说的。

我不完全了解您想要实现的目标，但如果您确实有想要提供的实际图像作为 image 属性的值，但您不想使用 img 或 @ 987654331@ 元素，你可以使用link 元素：

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

【讨论】：

老实说，我认为我将不得不与客户协商解决此问题的方法，以确保每个产品都有图像，即使它只是纯色。我正在尝试在 Prestashop 的领域内工作，它允许您在元素上使用背景颜色，但从编码的角度来看，这会导致更多问题，我认为让每个产品都有图像是最好的方法向前。很高兴知道它不一定是 img 标签。如果需要，我可能会尝试为链接标签找到解决方法。感谢您花时间回答
@James：如果它是“纯色”颜色，您可以改用color property。与link类似，也可以用meta:<meta itemprop="color" content="Red"/>以隐藏方式指定。因此，您可以保留 PS 标记（不应用微数据）并另外添加这些 link/meta 元素。 -- 话虽如此，实际内容不应使用 CSS 来传达（没有 CSS 支持的用户将无法了解您的产品具有哪种颜色/纹理）。
好电话！我什至没有考虑颜色属性。只是看看文档，它说使用 Text 作为值。猜猜这意味着没有十六进制代码？作为一家艺术品商店，它有一些非常有创意的颜色名称，所以可能会也可能不会。
@James：我认为可以指定十六进制值（它们是文本）；问题只是十六进制值对数据消费者有多大用处。
没错，我想十六进制是文本。好吧，我会放一些，看看情况如何。该网站仍在开发中，因此我们有一些时间进行试验。感谢您的帮助