Responsive design best practice: Duplicate html elements for media querying and SEO impact?

Question

I have a page with, in order of html appearance, a figure tag, headgroup tag, and an article tag.

In order to make a page's design responsive using media queries, I need a different order for elements, so the image appears after the title.

The simplest solution I can think of is cloning the headgroup tag in the source code and place the copy before the figure tag, thus making it possible to show/hide the appropriate tag according to viewport size.

But I have the feeling this is not ideal SEO-wise.

My question is simple:

Does this simple technique really have an impact on SEO?

Is there an html attribute to declare duplicate elements in a page?

Is there another recommended solution? Best practice?

Thanks in advance for any advised input!

Answer 1

But I have the feeling this is not ideal SEO-wise.

Yep, I wouldn't do it.

Even worse, it's bad for your users that rely on your document outline (screenreader, …) or your users that don't use CSS (text browsers, feed readers, …).

Is there another recommended solution? Best practice?

Use CSS.

Using the "classical" float or position or newer ways like Regions, Flexible Box, Grid Layout, Template Layout, …

Is there an html attribute to declare duplicate elements in a page?

No, not exactly. There is the hidden attribute:

When specified on an element, it indicates that the element is not yet, or is no longer, directly relevant to the page's current state, or that it is being used to declare content to be reused by other parts of the page as opposed to being directly accessed by the user.

In your case, you'd have to use JS to switch it (and to recognize which media query fired).

Answer 2

<hgroup> is deprecated and therefore shouldn't be used.

In my experience, the difference in the SEO impact of the ordering is negligible. Use semantic HTML (i.e. appropriate headlines, captions, etc.) and you'll be fine.

As noted above, just use CSS for positioning.