How To Use Microdata With Hidden Blocks?
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 Schema.org 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
link elements in the
body; these are hidden by default).
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM