How To Use Microdata With Hidden Blocks?

- 1 answer

The situation: some div-blocks are hidden with specific display resolution. For example, there are two blocks with a price. One of them is shown above product picture when the display height is small and viсe versa.

Question: how to implement microdata if there are several blocks with identical content but one of them is shown while another one is hidden? Google and says it is not welcomed to hide marked content.

P. S. The such behavior is realised via css media max-width etc. There's no JS.



Microdata parsers don’t care if the HTML elements are visually hidden; they ignore any CSS.

Specific consumers (like search engines) may decide to handle Microdata from visually hidden HTML elements in a different way, but there are so many consumers (and most of them don’t document their behaviour) that there can’t be a general answer.¹ As many consumers also support JSON-LD, where everything is hidden by default, it would seem inconsistent to handle these two cases differently … but who knows.

So I think you have three four options:

  • Specify the Microdata on the elements for both resolutions (i.e., duplicate it). But it’s undefined what duplicated properties should mean (in practice this is probably no problem, though).
  • Specify the Microdata only on the elements for one resolution. Ideally for the variant that most of your users use.
  • Use JSON-LD instead. But it’s probably not worth to do this only because of that single issue (if it’s an issue at all).
  • Don’t duplicate your content/elements. ;-)

(I would only mark up the elements for one resolution.)

¹ Asking for SEO advice or the behaviour of a search engine service is off-topic on Stack Overflow. SEO-related questions can be asked on Webmasters SE. See, for example, the questions Can microdata be implemented in meta tags? and How does Google handle <link> elements in the <body>? (Microdata can be specified on meta and link elements in the body; these are hidden by default).