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

Question

I have an issue about Microdata. Usually I insert Microdata as inline attributes in pages, but I decided to separate HTML code and structured data, so I starting creating inline JSON-LD.

When testing pages with Google testing tool I noticed some differences between what Google shows depending on structuring Microdata. The itemscope is WebPageElement and the itemprop is text: text is fetched from database and so it can contain HTML tags because it is generated using text editor.

HTML code used (the first div with itemprop="text" is not present in 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>

In inline Microdata, tags are stripped and only text is shown:

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.

In JSON-LD only some tags are stripped, while others and their HTML attributes still persist:

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 example:

{
    "@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>
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>

    }
    ,"author":{
        "@type":"Organization"
        ,"name":"Organization Ltd"
    }
    ,"inLanguage":"it-IT"
}

Why this difference?

Does this difference affect how Google shows content and information?

Answer 1

JSON-LD (as data block in a HTML script element) and Microdata work differently if the property value should be a string:

• In JSON-LD the value is plain text (i.e., the characters < and > have no special meaning)
• In Microdata the value is the textContent of the element (i.e., HTML elements get stripped)

In your JSON-LD example, there are not some tags stripped, it contains exactly the HTML tags (interpreted as plain text) which you provide in the text property.

Let’s say you have in your HTML <span><b>Hello world</b></span> and you want to provide the content "Hello world" as value for a text property.

In Microdata, you could use one of the following ways:

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

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

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

In JSON-LD, you can only use:

"text": "Hello world",

If you would use

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

the value would be "<b>Hello world</b>", where <b> and </b> are not HTML but part of the string value.