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

Question

我正在尝试为文章启用 Google 的丰富网页摘要，但它一直要求为文章提供图片。我实际上并不想在页面上显示图像，那么如何标记它以便它为图像提供 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 的有效属性。

Answer 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>

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

Add image URL without loading image that passes Google Structured Data tester

html

rdfa

schema.org

google-rich-snippets