: How to hide h1 and h2 tags using JavaScript while still having them for SEO My website does not currently use H1 and H2 tags, but I want to use them and hide them to make my site SEO

@Odierno851

I'm not sure if this will solve your issue, but would making the text be the same color as the background achieve what you want? Considering the answers above, it might be enough to get the result you're after, but keep the text "hidden" from the user. It's sneaky, but the only thing I can come up with aside from CSS:

visibility: hidden;


You might also consider placing it under a graphic.

Personally, I stay away from stuff like this, because I wouldn't want to risk having my site ranked lower or banned.

Another technique might be to just put an image on the page with the alt="whatever your important info is." It's legit and while not as powerful, might do the trick.

Vote Up Vote Down

@Shelley277

For Google just focus on your content. What you can do is use heading elements which do not actually add any real change to your document but will flag which part is the heading.

For other less popular search engines you can still do the cloaking but I would recommend against it.

Vote Up Vote Down

@Ann8826881

You can't hide h1 and h2 tags (or any text for that matter) and still have them apply positively to SEO.

For several years now, Google has been trying to index precisely what the user sees. Google is able to intelligently process CSS and now JavaScript to achieve this goal. If the user doesn't see it then there is no point it being indexed.

Delivering different content to Google than to users is called cloaking. A black hat SEO technique from yesteryear, will likely see you actively penalised in the SERPs these days.

All search engines don't necessarily work the same way as Google, but since Google is currently by far the most prolific search engine, it is Google that governs how we must behave.

Vote Up Vote Down

@Caterina187

It is easy to hide them when you can add them to your PHP Code. Just add the following CSS properties to your style file.

h1,h2 {
display: none;
}


Or, if you use jQuery as JavaScript framework you can do the same in JS:

$(document).ready(function() {
$('h1,h2').css('display', 'none');
});


I would recommend using the CSS only solution.

Vote Up Vote Down