在简单的HTML网站上为背景图片添加微数据


Adding Microdata for background images on simple HTML site

我正在尝试使用架构增强我们的旧html网站(网络商店)，并且在入门时遇到了一些困难。我想开始将Schema添加到1,500多个单独的html产品页面，因此必须正确地开始使用。

到目前为止，最大的问题是如何添加产品图片代码，因为我们的网站布局是以表格为基础的，表格中插入了主要产品图片作为背景元素。到目前为止，我发现的大多数研究示例都显示了不同的实现方式，这可能吗？

这是一个代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<TR>
   <TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
  <TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=18 ALT=""></TD>
</TR>
</TABLE>
</td>

<td valign="top">
  <table width="599" border="0" cellpadding="0" cellspacing="0" background="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" style="background-repeat: no-repeat;">
  <tr>
  <td width="259" valign="top"><span class="style2"><IMG SRC="images/spacer.gif" alt="" WIDTH=259 HEIGHT=150 border="0"></span>
    <table width="238" border="0" align="right" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="2"><span class="style109 style31">The HOBBIT BILBO'S STING SWORD</span><span class="style117"> <span class="style33">UC2892 United Cutlery</span></span></td>
      </tr>

通过此代码，我想通过Schema.org突出显示images/LOTR/BKG_Hobbit-Sting-UC2892.jpg作为产品图像。

我首先尝试将信息添加到<HEAD>部分，但无法在Google的结构化数据测试工具上正确检出：

1
; <meta itemprop="image" content="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg"></meta>

此外，在Bing Markup测试器中进行测试还会得到以下结果：

We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.

不是可以通过将Schema数据添加到head区域吗？

此外，图像链接是否应为完整的URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg？

相关讨论

由于您的table标记似乎不太易于维护，并且(过时的)background属性不能用于微数据，因此，您的最佳方法可能是复制内容并用meta / link元素对其进行标记。

您可以在head或body中添加此标记，但不能在head中使用div，因此在body中更容易实现。

因此在body中，您可以简单地添加以下内容：

1
  <link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" />

如果值是URL，则必须使用link而不是meta。这使您可以指定任何类型的URL，绝对或相对URL(就像a元素中一样)。

(还请注意，meta和link都没有结束标记，因此它是<meta>或<meta />，但没有<meta></meta>。)

也就是说，如果您对现有内容进行标记而不复制，则Microdata的效果最佳。如果必须复制它，那么使用JSON-LD代替Microdata可能会更好。

相关讨论