我正试图用schema增强我们的旧html站点(webstore),但在开始时遇到了一些困难。我们有超过1500个独立的html产品页面,我想开始添加模式,所以必须从正确的开始。
到目前为止,最大的问题是如何添加产品图像代码,因为我们的网站布局是基于表格的,并将主产品图像作为背景元素插入。到目前为止,我发现的大多数研究实例都显示了不同的实现,这可能吗?
下面是一个代码示例:
<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"><br></span>
<table width="238" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><span class="style109 style31">The HOBBIT<br> BILBO'S STING SWORD</span><span class="style117"><br> <span class="style33">UC2892 United Cutlery</span></span></td>
</tr>
在这段代码中,我想通过Schema.org将
images/LOTR/BKG_Hobbit-Sting-UC2892.jpg
突出显示为产品图像。我第一次尝试将信息添加到
<HEAD>
部分,但它没有在Google的结构化数据测试工具上正确检出:<div itemscope itemtype="schema.org/Product">; <meta itemprop="image" content="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg"></meta>
另外,Bing Markup tester中的测试也给出了结果:
我们在这个页面上没有看到任何标记。请确保标记已正确实现。
通过
<div>
将模式数据添加到head
区域不好吗?此外,图像链接是否应该是一个完整的URL
www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg
? 最佳答案
由于您的table
标记看起来不太可维护,而且(obsolete)background
属性不能用于微数据,因此在您的情况下,最好的方法可能是复制内容并用meta
/link
元素标记它。
您可以在head
或body
中添加此标记,但不能在div
中使用head
,因此在body
中执行此操作更容易。
因此,在body
中,您可以简单地添加以下内容:
<div itemscope itemtype="http://schema.org/Product">
<link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" />
</div>
如果值是URL,则使用
link
而不是meta
。这允许您指定任何类型的URL,绝对的或相对的(就像a
元素中一样)。(还要注意
meta
和link
都没有结束标记,所以它是<meta>
或<meta />
,但不是<meta></meta>
)也就是说,如果你把你现有的内容标记出来,而不是复制它,那么微数据工作效果最好。如果您需要复制它,那么您可以使用JSON-LD而不是Microdata。