Hiding H1 from user but making it visible to search engines? [duplicate]

Question

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.

Answer 1

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

Never purposely serve different content to bots.

Answer 2

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.