添加图像 URL 而不加载通过 Google 结构化数据测试器的图像答案

【问题标题】：Add image URL without loading image that passes Google Structured Data tester添加图像 URL 而不加载通过 Google 结构化数据测试器的图像
【发布时间】：2016-03-18 17:08:56
【问题描述】：

我正在尝试为文章启用 Google 的 Rich Snippets，但它一直要求为文章提供图片。我实际上并不想在页面上显示图像，那么如何标记它以便它为 Google 提供图像的 URL？使用类似 -

    <div class='container' id="content-text" typeof="Article">

        <span typeof="imageObject">
            <span property="image"><span property="contentUrl" content="/static/imgs/protraits/{{content.author|san_str}}.jpg"></span></span>
        </span>

        <h1><span property="name">{{ content.title }}</span></h1>
        <h2>{% if content.subtitle %}{{ content.subtitle }}{% endif %}
        <small>by <span property="author">{{ content.author }}</span></small></h2>

    <div property="articleBody">{{ content.text|safe }}</div>
    </div>

我能够让测试人员识别图像对象，但它与文章对象是分开的。如果我尝试使图像成为文章的属性，它会告诉我contentUrl 不是Article 的有效属性。

【问题讨论】：

请注意，URI 是区分大小写的，所以它必须是ImageObject 而不是imageObject。

标签： html schema.org google-rich-snippets rdfa

【解决方案1】：

您可以使用link 元素：

<div typeof="Article">
  <link property="image" href="image.jpg" />
</div>

或者明确指定类型：

<div typeof="Article">
  <link property="image" typeof="ImageObject" href="image.jpg" />
</div>

对于 Google 的 Article Rich Snippet，您似乎必须为图像提供 height 和 width 属性（它们被列为必需），所以它可能看起来像：

<div typeof="Article">
  <div property="image" typeof="ImageObject">
    <link property="url" href="image.jpg" />
    <meta property="height" content="50" />
    <meta property="width" content="50" />
  </div>
</div>

【讨论】：

谢谢，就这么简单。虽然只是一个注释，但我确实必须提供类型，否则它会给出错误：属性 itemtype 的值无效。
@Walt.B：啊，是的，谢谢——对于 Google 的文章 Rich Snippet，height 和 width 属性似乎是必需的（然后你必须提供图像的url 属性中的 URL），尽管他们的测试工具似乎没有（总是？）注意到这一点。我更新了我的答案。
是的，我实际上在事后注意到了这一点。它仍然为我指明了正确的方向，再次感谢。