1

I'm changing some of my pages to better display in different devices (tables, smart phones etc). I want to figure out a good way of handling headings. So far my options are

  1. hide headings for small screens
  2. show shorter heading for small screens
  3. keep it the same.

If I show a shorter heading for small screens then it will probably take the form of putting in two h1 elements in the same and then toggling responsively depending on the screen size.

What are the implications of 1 and 2 for SEO? Will I be penalised?

  • 1
    Why two H1s? You can do something like: <h1><span class='long'>This is a very long heading</span><span class='short'>Heading</span></h1> and toggle .long / .short. – user11312 Mar 24 '15 at 13:50
  • That's another option I hadn't thought of! Although I guess it would more clearly show my intent if there were two h1s, e.g. this header is for large screens, this header is for small screens. My original question stands though – Simon B Mar 24 '15 at 14:32
2

I'm assuming you only have one domain with no option for sub-domains. So here's what I suggest:

I'd go with number 3 and not make elaborate headings. Also, you should configure the view port using the meta tag to make the mobile screen adjust to the site. If the heading is too large, then the text will wrap, but no side-scrolling will happen which is acceptable for responsive design. Here's the tag I'm talking about:

<meta name="viewport" content="width=device-width, initial-scale=1">

If that isn't acceptable, then you could consider changing the font size based on screen size (via media queries in css), or you could use a ridiculously short version of your title in the H1 tag and an extended version in an H2 tag. For example, do this:

<h1>Beach</h1><h2>The perfect family getaway</h2>

instead of this:

<h1>Beach, the perfect family getaway</h1>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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