21

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).

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
ladar
  • 5,858
  • 3
  • 26
  • 38

6 Answers6

33

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.

Rowe Morehouse
  • 4,451
  • 3
  • 28
  • 28
  • do you know if Google respects this? In a website I've developed, the content holder is a and it's designed like a calendar(wanna have events rich snippets in Google) so, events are CONTAINED inside their respective days/dates thus, it's implicit for the user, it wouldn't make sense not being able to use ... or else Google is being narrow in that you can only display events in one way.....
     – Breno Salgado Jun 29 '13 at 20:08
  • I'm asking because at the rich formats page they're explicitly saying this rich snippet content should not be hidden from the user... – Breno Salgado Jun 29 '13 at 20:09
  • 1
    @BrenoSalgado Google fully supports and backs Schema.org :) – Swivel Nov 27 '13 at 23:14
  • 6
    From schema.org: "This technique should be used sparingly." From Google: "In general, Google won't display any content in rich snippets that is not visible to human user." – Chuck Le Butt Sep 02 '14 at 10:34
  • I'm doing this and Google is using the data. I have a value showing "1 min" and then a `meta` tag providing the iso format which is "PT1M" and Google shows that in its results. – Tim Tisdall Oct 06 '17 at 15:25
7

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

vanthome
  • 4,816
  • 37
  • 44
  • their documentation says "general rule" — not never — and what they are signaling is don't try to keyword stuff using hidden content as part of your SEO strategy, or you wander into penalty territory. You can still use hidden content for your own purposes, when you want to break the "general rule" just don't do it in a keyword-density ranking attempt. – Rowe Morehouse Oct 07 '17 at 16:24
7

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.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • 3
    I have same question; I got 4 pages. I have to add breadcrumb information to a page but I don't want those breadcrumbs to be visible on web pages. But that data to be fetched by google rich snippet display. – user1769790 Aug 26 '13 at 21:49
6

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

Arnaud Keyen
  • 61
  • 1
  • 2
1

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".

Phoenix
  • 4,488
  • 1
  • 21
  • 13
  • Thanks, unfortunately, I need microdata since they will be used for other purposes and microdata (or RDFa etc.) offers better ways to add some semantic information than title or comment – ladar Jan 18 '12 at 00:48
0

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.

Maxime Elomari
  • 16
  • 2