: Hiding H1 from user but making it visible to search engines? 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.

@Chiappetta492

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

Never purposely serve different content to bots.

Vote Up Vote Down

@Gloria169

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.

Vote Up Vote Down