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

标签 html html-table background-image microdata

我正在尝试使用架构增强我们的旧 html 网站(网上商店),但在开始时遇到了一些困难。我们有超过 1,500 个单独的 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>

从这段代码中,我想强调 images/LOTR/BKG_Hobbit-Sting-UC2892.jpg通过 Schema.org 作为产品图片。

我首先尝试将信息添加到 <HEAD>部分,但它无法在 Google 的结构化数据测试工具上正确 check out :

<div itemscope itemtype="schema.org/Product">; <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.

通过<div>添加Schema数据不行吗?到 head区域?

另外,图片链接是否应该是一个完整的URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg

最佳答案

作为您的 table标记似乎不太易于维护,并且作为 ( obsolete ) background属性不能用于微数据,在您的情况下,最好的方法可能是复制内容并将其标记为 meta/link元素。

您可以在 head 中添加此标记或在 body , 但你不能使用 divhead , 所以在 body 中做起来更容易.

所以在 body ,你可以简单地添加这个:

<div itemscope itemtype="http://schema.org/Product">
  <link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" /> 
</div>

have to使用 link而不是 meta如果该值是一个 URL。这允许您指定任何类型的 URL,绝对的或相对的(就像在 a 元素中一样)。

(另请注意,metalink 都没有结束标记,所以它是 <meta><meta />,而不是 <meta></meta>。)

也就是说,如果您标记现有内容而不复制它,微数据的效果最好。如果您必须复制它,它 might work better供您使用 JSON-LD 而不是微数据。

关于html - 在简单的 HTML 网站上为背景图像添加微数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45703956/

相关文章:

javascript - 在网站的所有页面中保留用户选择的背景

css - 防止背景图像在更改时闪烁

html - 表格不会在浏览器中显示

css - <form> 元素的 <table> 和 <h1> 之间的空格/边距

html - 为什么在使用子选择器时 table > tr > td 不起作用?

javascript - 在同一页面中将 #hash 从 href 发送到 div

CSS :before Pseudo-element not displaying background-image with IE8

html - 调整窗口大小时将移动的定位 div

javascript - html5 & javascriptmvc ie问题

javascript - html 输入字段自动填充浏览器表单中保存的用户名