0

I have h1 tag in a page. I do not want to display it to user but want to make sure that its content will be used for SEO. What is recommended way of achieving it these days. I can think of:

  1. in css: position absolute; left: -99999em;
  2. display: none;
  3. visibility: hidden; (even though it still exists in flow of document)
  4. remove h1 with javascript when page loads

As far as I know 1,2,3 will be easily detected by Google and penalised accordingly, is that right? Would 4 be the only option not resulting in being penalised? What other options are available and safe to use?

BTW I'm not trying to trick user or search engines in any way, it just happens that h1 is in a way and need to get rid of it.

Improve this question
9
  • 2
    If you don't need it why is it there in the first place?
    – John Conde ♦
    Jan 22, 2015 at 0:09
  • 2
    Hide it and risk SEO penalties. There is no legitimate reason for this to be hidden Remove it server-side if you can.
    – John Conde ♦
    Jan 22, 2015 at 0:12
  • 1
    Even option 4 will not help you since the page is downloaded before JS can run. John is right. Do not hide content. If you do not want an h1 tag for the users then remove it. Google will slap you silly and it will be a very long long long road back.
    – closetnoc
    Jan 22, 2015 at 0:37
  • 2
    hmm option 4 would load page as usual, so as far as spiders are concerned these would see H1 in html. Only when DOM is loaded JS would hide H1 somehow. As bad as it sounds this should trick spiders into thinking H1 is visible, am I missing something?
    – spirytus
    Jan 22, 2015 at 1:49
  • 1
    I echo the above comments. If you don't want an H1 for users, then you shouldn't want it for search engines. Every page can be marked up with a title of some sort - without knowing the context of your scenario, it's hard to explain why, if or how you should markup your web pages but it should come down to, you either use an H1 or you don't; Not one or the other.
    – zigojacko
    Jan 22, 2015 at 9:40

2 Answers 2

Reset to default
1

Should be a comment, but can't highlight this enough:

Never purposely serve different content to bots.

Improve this answer
3
  • On the whole I'd agree with you, @Martijn. But it's also important to consider that there are plenty of situations - e.g. where accessibility needs to be taken into account - where you might want to serve different content to javascript-capable and javascript incapable user agents, aren't there?
    – Rounin
    Jan 22, 2015 at 13:42
  • Google provides mechanisms such as crawlable AJAX that allow you to show Googlebot the same content that users with JavaScript see. There is no reason to show Googebot content that normal users can't see.
    – Stephen Ostermiller ♦
    Jan 22, 2015 at 13:46
  • @Rounin: Yeah you are correct. But then you use javascript for the benefit of the user, without blackhatting it. If the H1 is not relevant to the user, simply don't show it in the first place (which, is bad because every page needs 1 H1).
    – Martijn
    Jan 22, 2015 at 14:18
1

I would tend to go with something like option 4), but instead of using javascript to actually remove <h1> from the DOM after onload, I would apply a new color style declaration to <h1> (in this case, one with 0% opacity).

Something like:

<script>
function changeH1Color() {
    var heading1 = document.getElementsByTagName('h1')[0];
    heading1.style.color = 'rgba(63,63,63,0)';
    }

window.onload = changeH1Color();
</script>

This function will enable you to change the color of <h1> to any color you wish after onload, including (if you really wish) a color with 100% alpha-channel transparency.

=====

After giving consideration to the fact that the intention is for <h1> to always remain invisible to sighted human users - while, simultaneously, always existing in the DOM - I've realised the post-onload script above is probably overkill.

Adding:

h1 {
color: rgba(63,63,63,0);
}

to the stylesheet ought to suffice.

Improve this answer
4
  • 1
    This will result in a penalty as well, Google can excecute basic javascript, a simple comparison between 1st DOM and doc-ready DOM and you lose.
    – Martijn
    Jan 22, 2015 at 13:23
  • 1
    Do you have a source, @Martijn? I am not aware of any official Google position which states that changing the color of a DOM element for javascript-capable user-agents incurs a penalty.
    – Rounin
    Jan 22, 2015 at 13:34
  • 1
    Even if Google doesn't catch this with an algorithm, a manual penalty could be applied for this. The problem is when you are ranking for the keywords in the H1 tag. The user clicks to the page and can't actually find that text. They report you to Google for cloaking and Google issues a manual penalty.
    – Stephen Ostermiller ♦
    Jan 22, 2015 at 13:50
  • The usual disclaimer applies that it's entirely Google's affair to decide for itself what it will and what it won't penalise.
    – Rounin
    Jan 22, 2015 at 14:39

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