CODEWITHSUNDEEP
htmlmicrodata
ladar
ladar

Reputation: 5876

Is it OK to hide microdata with CSS?

let's say I have some html document with a lot of text. Is it "good" (~not bad :)) to have elements that contain microdata and hide those elements so that user won't actually see them?

Let's say I have this:

<div style="display:none" itemscope...>some microdata describing div below</div>
<div> There is actual text that is described by microdata</div>

The point is that this way it may be easier to describe the 2nd div. You don't have to make changes in whole text, just add some elements and hide them. I want to create simple HTML editor that would support creating microdata and this way seems to be easier to implement and personally easier to use (first create actual content, then annotate it).

Upvotes: 21

Views: 16442

Answers (6)

vanthome
vanthome

Reputation: 4924

schema.org and thus google officially state in [1], that you should not mark up hidden content:

More is better, except for hidden text. In general, the more
content you mark up, the better. However, as a general rule, you should mark up only the content that is visible to people who visit > the web page and not content in hidden div's or other hidden page elements.

You can use the link and meta html tags also in the body to markup content which should be invisible to the user:

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>

[1] http://schema.org/docs/gs.html

Upvotes: 7

Arnaud Keyen
Arnaud Keyen

Reputation: 61

You can use meta tags, like this :

<meta itemprop="VALUE" content="CONTENT" />

<meta itemprop="priceCurrency" content="USD" />

https://schema.org/docs/gs.html#advanced_missing

Upvotes: 6

Maxime Elomari
Maxime Elomari

Reputation: 16

If we are talking about Google penalities, you've to read carefuly the documentation of the rich snippets type you're working on.

By example, if I take the product rich snippets, following the documentation (https://support.google.com/webmasters/answer/146750?hl=en#offer_properties) only the specified fields : Google recognizes specific machine-readable values for the following product tags are not ignored by Google when hidden:

  • category
  • priceValidUntil
  • priceCurrency
  • price
  • identifier
  • condition

So, the best way for these fields would be to use them in meta tags.

Upvotes: 0

Rowe Morehouse
Rowe Morehouse

Reputation: 4585

schema.org has an actual method for "hiding" microdata:

http://schema.org/docs/gs.html#advanced_missing

If you are trying to impact SEO then "hiding" your semantic markup data from the user but keeping it machine readable (for robots / spiders) does not defeat the purpose at all.

If your schema.org markup is properly formatted, google is not going to penalize your index rankings if you "hide" the values.

Upvotes: 33

robertc
robertc

Reputation: 75707

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.

Upvotes: 7

Phoenix
Phoenix

Reputation: 4536

Are you going to be doing anything with the hidden data? I'd use HTML comments or the title attribute.

HTML Comments:

<!-- This is an HTML Comment -->
<div>Content</div>

Title Attribute:

<div title="some information describing div">Content of div</div>

HTML comments are, of course, just like comments in programming languages, except they go through to the client. The standard title element attribute (available for all html elements) holds extra information on the element, and is used like a tooltip when hovering over the element.

For instance, the HTML for your accept rate up there is:

<div class="accept-rate cool" title="this user has accepted an answer for 4 of 6 eligible questions">67% accept rate</div>

Which if you hover over it it says "this user has accepted an answer for 4 of 6 eligible questions".

Upvotes: 1

Related Questions