在简单 HTML 网站上为背景图片添加微数据
Adding Microdata for background images on simple HTML site
我正在尝试使用架构增强我们的旧 html 网站(网上商店),但在开始时遇到了一些困难。我们有超过 1,500 个单独的 html 产品页面,我想开始向其添加架构,因此必须首先正确地进行此操作。
到目前为止最大的问题是如何添加产品图片代码,因为我们的网站布局是 table 基于主要产品图片作为背景元素插入的。到目前为止,我发现的大多数研究示例都显示了不同的实现方式,这可能吗?
这是一个代码示例:
<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 标记测试器中进行测试给了我结果:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
通过<div>
添加Schema数据到head
区不行吗?
另外,图片link应该是完整的URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg
吗?
由于您的 table
标记似乎不太易于维护,并且 (obsolete) background
属性不能用于微数据,最好的方法是你的情况可能是复制内容并用 meta
/link
元素标记它。
您可以在 head
或 body
中添加此标记,但不能在 head
中使用 div
,因此更容易做到它在 body
.
所以在 body
中,您可以简单地添加:
<div itemscope itemtype="http://schema.org/Product">
<link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" />
</div>
如果值为 URL,您 have to 使用 link
而不是 meta
。这允许您指定任何类型的 URL,绝对的或相对的(就像在 a
元素中一样)。
(另请注意,meta
和 link
都没有结束标记,所以它是 <meta>
或 <meta />
,但不是 <meta></meta>
。)
也就是说,如果您标记现有内容而不复制它,微数据的效果最好。如果您必须复制它,它 might work better 供您使用 JSON-LD 而不是 Microdata。
我正在尝试使用架构增强我们的旧 html 网站(网上商店),但在开始时遇到了一些困难。我们有超过 1,500 个单独的 html 产品页面,我想开始向其添加架构,因此必须首先正确地进行此操作。
到目前为止最大的问题是如何添加产品图片代码,因为我们的网站布局是 table 基于主要产品图片作为背景元素插入的。到目前为止,我发现的大多数研究示例都显示了不同的实现方式,这可能吗?
这是一个代码示例:
<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 标记测试器中进行测试给了我结果:
We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.
通过<div>
添加Schema数据到head
区不行吗?
另外,图片link应该是完整的URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg
吗?
由于您的 table
标记似乎不太易于维护,并且 (obsolete) background
属性不能用于微数据,最好的方法是你的情况可能是复制内容并用 meta
/link
元素标记它。
您可以在 head
或 body
中添加此标记,但不能在 head
中使用 div
,因此更容易做到它在 body
.
所以在 body
中,您可以简单地添加:
<div itemscope itemtype="http://schema.org/Product">
<link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" />
</div>
如果值为 URL,您 have to 使用 link
而不是 meta
。这允许您指定任何类型的 URL,绝对的或相对的(就像在 a
元素中一样)。
(另请注意,meta
和 link
都没有结束标记,所以它是 <meta>
或 <meta />
,但不是 <meta></meta>
。)
也就是说,如果您标记现有内容而不复制它,微数据的效果最好。如果您必须复制它,它 might work better 供您使用 JSON-LD 而不是 Microdata。