Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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!

share|improve this question

2 Answers 2

up vote 3 down vote accepted

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

share|improve this answer
    
Too bad the "newer ways" you're talking about are not implemented yet... –  Armel Larcier Feb 5 '13 at 12:57
    
@Armel Larcier I don't for the others, but for template Layout you can use this polyfill https://code.google.com/p/css-template-layout/ –  Pierre-Marc David Caron Mar 5 at 18:16

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.