9

I have a website with a page that has a video as the main content. It uses a responsive design layout that requires the <h1> tag (with the same text) to be used in two different places: one for desktop browsers and one for mobile browsers.

I will have to hide the mobile version of the <h1> tag for desktop browsers, and hide the desktop <h1> tag for mobile versions.

Will this present any problems with respect to SEO or otherwise?

Or what if I make the second header a simple <div> or <p> tag instead of an <h1> tag, and apply CSS accordingly - would that be acceptable then?

Improve this question
12
  • There is no rule against using multiple H1 tags, however, Google warns against it saying that there really should only be one. They have a point, but Google does not make the rules- the community does. If there is a way to satisfy your requirements and still only have one H1 tag without hiding content, that is what I recommend. For a more complete and technical response, I leave that to someone who may have more ideas for you to answer.
    – closetnoc
    Jun 29, 2014 at 19:19
  • Thanks @closetnoc what if I use the second one as div instead of h1 ? Will it harm SEO because the same sentence is repeating ?
    – Sandesh Yadav
    Jun 29, 2014 at 19:22
  • Whats the difference between the desktop version of H1 and the Mobile...Please add that to your question.
    – Simon Hayter
    Jun 29, 2014 at 19:38
  • I am not sure. I would not think it would be enough to get a penalty. But does it help? I am not sure. I know that it would be work, and I do not know the system you are using, if it is at all possible to make one sentence slightly different from the other, I would go for that. I would almost take two marketing techniques to engage/motivate the user. It sounds like your in a tough spot. I write my own CMS so for me it is an easy task. I would almost bet you would be okay.
    – closetnoc
    Jun 29, 2014 at 19:38
  • @bybe There is no difference in the text. Only difference is one is visible in desktop and another in mobile. I am doing this because the layout of the site needs this.
    – Sandesh Yadav
    Jun 29, 2014 at 20:07

2 Answers 2

Reset to default
3

Using multiple H1 tags is valid in HTML 5, as long as each is inside a <section> element (except for the first H1 on the page which does not need a specific wrapper).

For SEO, Google has confirmed that multiple H1 tags are fine.

However, you ought to take another look at your responsive layout, as requiring an H1 in two different places seems strange to me. It's almost certainly possible that you can achieve two different layouts with the same HTML in the same places. Perhaps ask a question on Stack Overflow with your specific scenario, you are bound to get a good answer.

Improve this answer
2
  • I haven't used it yet myself, but it looks like grid-template-areas is a slick solution for re-arranging layouts with CSS in a responsive design that doesn't require any duplication of sections. See tomduffytech.com/responsive-layout It appears to be supported in all recent major browsers caniuse.com/?search=grid-template-areas (93.5% of users support it).
    – Stephen Ostermiller ♦
    Aug 4, 2021 at 12:58
  • @StephenOstermiller Same thing can be achieved with flexbox using order property.
    – user
    Oct 30, 2022 at 23:13
0

Using multiple H1 tags is valid in HTML 5, as long as each is inside a element (except for the first H1 on the page which does not need a specific wrapper).

Improve this answer
1
  • This question is tagged "SEO" which implies they are asking if it is acceptable to search engines. Its good to know that the standards would allow it, but do you any SEO experience regarding it?
    – Stephen Ostermiller ♦
    Sep 30, 2015 at 15:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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