JSON-LD 中的内联微数据内容显示与相同标记不同

Question

我有一个关于微数据的问题。通常我在页面中插入微数据作为内联属性，但我决定将 HTML 代码和结构化数据分开，所以我开始创建内联 JSON-LD.

在使用 Google testing tool 测试页面时，我注意到 Google 显示的内容之间存在一些差异，具体取决于微数据的结构。 itemscope 是 WebPageElement，itemprop 是 text：文本是从数据库中获取的，因此它可以包含 HTML 标签，因为它是使用文本编辑器生成的。

HTML 使用的代码（第一个 div 和 itemprop="text" 在 JSON-LD 中不存在）：

<div class="text" itemprop="text">

        <h3>Lorem ipsum dolor sit amet, <br>consectetur adipiscing elit. Aliquam aliquet porttitor est non egestas. </h3>
        <p>Aenean quis est eu odio iaculis egestas. Aliquam erat volutpat. Praesent egestas nunc tortor, nec viverra nunc vestibulum vel.  </p>

        <h3 class="titolo_gruppo_faq">Aliquam erat volutpat.</h3> 
        <h4 class="trigger_open">Nullam luctus dui vel ex pretium bibendum</h4> 
        <div class="openable">
            <p>Quisque at ante varius, porta nunc nec, cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dictum molestie neque sit amet gravida. Sed et justo vitae quam ullamcorper tempor. Vestibulum consequat erat risus, vitae facilisis turpis bibendum vitae. Aliquam erat volutpat. Donec laoreet, dolor ac sodales consectetur, massa nisi vehicula libero, vel sollicitudin massa lacus id purus. Quisque egestas venenatis purus, tempus ultrices mauris iaculis aliquet. </p>
        </div>
    </div>

在内联微数据中，标签被剥离，只显示文本：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet porttitor est non egestas. Aenean quis est eu odio iaculis egestas. 
Aliquam erat volutpat. Praesent egestas nunc tortor, nec viverra nunc vestibulum vel! 
Aliquam erat volutpat.

在 JSON-LD 中只有一些标签被剥离，而其他标签及其 HTML 属性仍然存在：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet porttitor est non egestas. <br>
Aenean quis est eu odio iaculis egestas. Aliquam erat volutpat. Praesent egestas nunc tortor, nec viverra nunc vestibulum vel! 
<h3 class="titolo_gruppo_faq">Aliquam erat volutpat.</h3> 
<h4 class="trigger_open">Nullam luctus dui vel ex pretium bibendum?</h4> 
<div class="openable"> 
<p>Quisque at ante varius, porta nunc nec, cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dictum molestie neque sit amet gravida. Sed et justo vitae quam ullamcorper tempor. Vestibulum consequat erat risus, vitae facilisis turpis bibendum vitae. Aliquam erat volutpat. Donec laoreet, dolor ac sodales consectetur, massa nisi vehicula libero, vel sollicitudin massa lacus id purus. Quisque egestas venenatis purus, tempus ultrices mauris iaculis aliquet. </p> 
</div>

JSON-LD例子：

{
    "@context":"http://schema.org"
    ,"@type":"QAPage"
    ,"about":"Lorem ipsum about"
    ,"headline":"Dolor sit amet headline"
    ,"text":"Nunc placerat metus magna, eget suscipit libero blandit tristique. Vestibulum turpis sapien, ultrices non libero sed, sagittis malesuada lorem. "
    ,"mainContentOfPage":
    {
        "@type":"WebPageElement"
        ,"headline":Lorem ipsum"
        ,"text":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aliquam aliquet porttitor est non egestas. <br>\nAenean quis est eu odio iaculis egestas.\nAliquam erat volutpat. Praesent egestas nunc tortor, nec viverra nunc vestibulum vel!\n<h3 class=\"titolo_gruppo_faq\">Aliquam erat volutpat.</h3> \n<h4 class=\"trigger_open\">Nullam luctus dui vel ex pretium bibendum?</h4> \n<div class=\"openable\">\n <p>Quisque at ante varius, porta nunc nec, cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec dictum molestie neque sit amet gravida. Sed et justo vitae quam ullamcorper tempor. Vestibulum consequat erat risus, vitae facilisis turpis bibendum vitae. Aliquam erat volutpat.\nDonec laoreet, dolor ac sodales consectetur, massa nisi vehicula libero, vel sollicitudin massa lacus id purus. Quisque egestas venenatis purus, tempus ultrices mauris iaculis aliquet. </p> \n</div>\n
    }
    ,"author":{
        "@type":"Organization"
        ,"name":"Organization Ltd"
    }
    ,"inLanguage":"it-IT"
}

为什么会有这种差异？

这种差异是否会影响 Google 显示内容和信息的方式？

Answer 1

JSON-LD（作为 HTML script 元素中的数据块）和微数据在属性值应为字符串时的工作方式不同：

在JSON-LD中值为纯文本（即字符<和>没有特殊含义）
在 Microdata 中，该值是元素的 textContent（即，HTML 个元素被剥离）

在您的 JSON-LD 示例中，没有删除一些标签，它完全包含您在 text 属性.

假设您的 HTML <span><b>Hello world</b></span> 中有内容 "Hello world" 作为 text 属性的值。

在 Microdata 中，您可以使用以下方法之一：

<span itemprop="text"><b>Hello world</b></span>

<span><b itemprop="text">Hello world</b></span>

<meta itemprop="text" content="Hello world" />

在JSON-LD中，只能使用：

"text": "Hello world",

如果你会使用

"text": "<b>Hello world</b>",

该值将是“Hello world”，其中和不是 HTML 而是字符串值的一部分。

JSON-LD 中的内联微数据内容显示与相同标记不同

Inline Microdata content displays different from same markup in JSON-LD

html

microdata

json-ld