Hide Microdata Property Value in 'Content' Attribute

Hide Microdata property value in 'content' attribute?

In HTML5, the content attribute is only allowed on the meta element. Microdata doesn’t define it as global attribute either. But RDFa extends HTML to make content a global attribute.

According to your example, you are using Microdata. So you shouldn’t use the content attribute for span.

Microdata defines a way to add name-value pairs without having to mark up visible content: Microdata extends HTML5 to allow meta and link in body (in the future, this will be defined in the HTML5 spec directly; see the "Contexts in which this element can be used" for link and meta in the HTML 5.1 Editor’s Draft).

So instead of

<span itemprop="name" content="Generic Name Here"></span>

you should use

<meta itemprop="name" content="Generic Name Here" />

For schema.org, see Missing/implicit information: use the meta tag with content:

This technique should be used sparingly. Only use meta with content for information that cannot otherwise be marked up.

Is it OK to hide microdata with CSS?

Hiding content marked up with Microdata sort of defeats the point of it, it is intended to add additional information about stuff that's already visible on the page. The main argument for this is that people always remember to update visible content, but frequently forget to update content they can't see, so hidden 'meta' content is frequently out of date and inaccurate. Microdata instead takes the approach of describing what the visible content is, so if the content changes the data it produces changes. Take this example from the spec:

<h1 itemprop="fn">
  <span itemprop="n" itemscope>
    <span itemprop="given-name">Jack</span>
    <span itemprop="family-name">Bauer</span>
  </span>
</h1>

If you change the visible content none of the Microdata markup actually changes:

<h1 itemprop="fn">
  <span itemprop="n" itemscope>
    <span itemprop="given-name">Tim</span>
    <span itemprop="family-name">Berners-Lee</span>
  </span>
</h1>

So Microdata is almost certainly not what you want to use in your situation. What you really ought to use instead depends on exactly what you want this information for. If you want to add hidden data for processing with scripts on your site then instead use data-* attributes. If you want to add additional descriptive information that not all users need to see, consider using ARIA. Particularly, in your case, aria-describedby.

Microdata and not all content in same place

Wrap

Yes, you can wrap the whole content in such a div. You could also use the body or html element instead.

<body itemscope itemtype="http://schema.org/LocalBusiness">
  <!-- all "itemprop" in here will belong to this "LocalBusiness",
       unless they are nested under another "itemscope" -->
</body>

`itemref`

Another option is to use the itemref attribute. It allows you to add properties from anywhere on the page to an item.

<div id="a">
  <span itemprop="name">Seattle, WA</span>
  <img itemprop="image" src="img.jpg" alt="Sample Image">
</div>

<div itemscope itemtype="http://schema.org/LocalBusiness" itemref="a b c">
</div>

<span id="b" itemprop="telephone">(123) 456-6789</span>

<div>
  <p id="c" itemprop="description">some description text</p>
</div>

You have to make sure that these referenced properties are not nested under another itemscope, otherwise they get added to this item, too.

Hide

If you need to hide elements for Microdata, use link (for URI values) and meta (for any other string values) elements. These two elements are hidden by default in the browser stylesheets.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <meta itemprop="name" content="Seattle, WA">
  <link itemprop="image" href="img.jpg">
</div>

HTML5 microdata: span content?

Yes, this is wrong. Neither Microdata nor HTML5 define a content attribute for the span element.

Several people wanted to use it, see for example the code in these questions:

Hide Microdata property value in 'content' attribute?
Categories for Product in schema.org?
Is the "content" attribute valid for the <span> tag > if so is it a good practice?
schema.org product availability tags markup

I’m not sure where exactly this confusion is coming from.

(It doesn’t help that Google’s Structured Data Testing Tool incorrectly uses the content attribute instead of the element content; but at least all other Microdata parsers seem to do it correctly.)

Maybe some people got confused because RDFa (but not Microdata) defines and allows the content attribute for span. See HTML+RDFa’s Extensions to the HTML5 Syntax:

For the avoidance of doubt, the following RDFa attributes are allowed on all elements in the HTML5 content model: @vocab, @typeof, @property, @resource, @prefix, @content, @about, @rel, @rev, @datatype, and @inlist.

Schema.org - Data on hidden elements

You want to hide the microdata by using the meta tag.

For example,

<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Funky Skirt</span>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <meta itemprop="price" content="100.00" />
        <link itemprop="availability" href="http://schema.org/InStock" />In stock
    </div>
</div>

This is a better way to hide microdata than using css because Google doesn't like it when content is hidden with either

visibility: hidden;

display: none;

Hope this helps.

Hiding complex microdata structures

In this case the person scope could be a <span> tag? That tag has no semantic value and if there are only meta tags inside it, it shouldn't be visible in your site.

You could also look into itemref and add the Person only once to the page and reference that id multiple times. However not all testing tools support itemref, so testing if it's correctly set up is quite hard at the moment.

Microdata vs. the data attribute in modular HTML5

Both ways are possible.

Microdata is not only for "typed data". You could define your own Microdata vocabulary, if you like. But you could also use a "local" one (emphasis mine):

The examples in the previous section show how information could be marked up on a page that doesn't expect its microdata to be re-used. Microdata is most useful, though, when it is used in contexts where other authors and readers are able to cooperate to make new uses of the markup.

However, if you want to use some other Microdata vocabulary (e.g. schema.org) on your pages in the future, you might get some conflicts with your "local" Microdata. So I’d not use Microdata if it doesn’t offer you benefits over data-* attributes.

Regarding the meta element: You can get something similar with data-* attributes, too. In HTML5, the script element can be used for "data blocks". So you could use something like:

<div class="wrapper" id="module1">
  <script type="text/plain" data-userDoesSomething="alert('Data attributes are better!');">
  </script>
  Module-specific content
</div>

<div class="wrapper" id="module1">
  <script type="text/plain" data-userDoesSomething>
    alert('Data attributes are better!');
  </script>
  Module-specific content
</div>

<!-- etc. -->

Instead of text/plain, you could use whatever suits your needs (JSON, HTML, …).

Hide Microdata Property Value in 'Content' Attribute