What's the correct way to hide the <h1> tag and not be banned from Google?

Question

The website I am working on uses an image defined in CSS as the main logo. The HTML code looks like this:

<h1>example.com | The best something ever</h1>

I would like to display just the image defined in CSS and pass the information from the H1 tag to the search enginges only.

What's the correct way to do this? Google is very strict about this, I know that display:none is wrong, what about visibility: hidden?

Complicity

Any time you are showing text only to search engines and not to users that is cloaking and against Google's webmaster policies because it is spammy. Bottom line is that if you want search engines to see the text, you have to show it to users too. – Saluki

Answer 1

You should be fine with visibility: hidden.

That said, if your image is part of the content (and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a img element with title and alternate text, instead of a css background-image.

Additionally, if you hope to attract search engines to the keywords inside the <h1> element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1 element, for example.

Melamie

You're right. I will include the logo as an img element instead of a css background-image and use the title and alt properties. Thank you. – Complicity

Is visibility: hidden really safe? Google Guidelines page doesn't specify visibility explicitly, but I assume it also falls under this rule: developers.google.com/search/docs/advanced/guidelines/… – Disvalue

Using visibility:hidden is NOT safe. Any technical means to hide text for users that search engines index could cause Google to penalize your site. – Saluki

Answer 2

The easiest, foolproof, best for SEO solution would be

<h1><img src=logo.png alt="Something.com | The best something ever"></h1>

Banzai

Is this really better than to use hidden H1 as a separate element with keywords inside? Since this is 7 years old info now... – Senhauser

If you image has those words in it, that would be 100% appropriate. If it doesn't then search engines might see this as keyword stuffing and penalize your site. Search engines don't usually give much weight to alt text, so it probably wouldn't help your rankings for those keywords. – Saluki

Answer 3

The "correct" way to do this is to have the text in the title bar or in your page's meta text.

Lying

Aren't meta texts largely ignored by search engines nowadays? At least for SEO purposes. – Melamie

@hgpc: Possibly, but it's not actively cheating, which most of the other methods discussed here are, and which will get you heavily down-ranked if detected. – Lying

Google ignores meta keywords, but the <title> of the page is very much used by Google and the text in it is weighted heavily. The page title isn't technically "meta" info because it doesn't use a <meta> tag and it shows up for users in browser tabs and window title bars. – Saluki

Answer 4

You're not going to get good SEO results if you, first hide the <h1>, and second use generic phrases inside the <h1>.

Don't just use the <h1> for sizing, you can use classes to style.

<h1> tags should contain keyword rich information such as:

Automotive Repair

Automotive repair being the keyword that relates to the particular page I'm theoretically working on.

Hope that makes sense.

Coadjutrix

Most reasonable answer here. Don't try to cheat it coz it dont work. – Radar

I do not quite agree with this comments. In some situations it is reasonable or legit to do so. I.g. if you have an image with parts of the headline text in it (for example to use special animated effects on it) I don’t see the reason why the design should create any SEO disadvantages. If the text in an image IS part of the main headline it should be treated so. I guess "alt=” is always a good choice anyway. – Marniemaro

Answer 5

set the image as the background of your h1 (set the width/height so it fits) then set your text-indent to something crazy like -9999px. That way when css is disabled (such as being crawled) the bot will see the text in the header instead of the background.

example:

CSS

#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}

HTML

<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>

Slowworm

Some search engines will ignore text that is very obviously indented off the page. You could play it safer by using a smaller text-indent and combining it with overflow:hidden. Something like text-indent:-100em is often enough. – Retain

Yes, this is the way it's being done right now. The content of the <h1> tag is indented by -9999px and I'm not sure this is the right way to do it. – Complicity

yeah, you could drop the number down and use ems. It was a quick example, but yes that's a possible outcome using massively offset text. good point meagar. – Slowworm

This is cloaking and could get your site penalized. – Saluki

Answer 6

I think that visibility: hidden; would work fine. Have you tried it yet?

Ruck

This is cloaking and could get your site penalized. – Saluki

Answer 7

Does your web site consist of just one single page?

Otherwise you should put the headline of each page in the h1 tag, not the tagline of the site. Repeating the same headline on every page would make it pretty much useless.

Foreordination

Answer 8

A full article in this matter is explained here https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/ So , when i work i use this code to support screen reader as well as hide some h1's and use pictures instead of it like (logo)

.offscreen{
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

to find more follow the link

Biddable

This is cloaking and could get your site penalized. – Saluki

Answer 9

<h1 style="font-size: 2px; margin: 0px;">Something goes here</h1>

Works like a charm.... ;-) The screen readers will interpret it and won't affect your SEO.

Appleton

This is cloaking and could get your site penalized. – Saluki

Answer 10

Resizing the block would work:

h1 {
    overflow: hidden;
    width: 1px;
    height: 1px;
}

Chi

This is cloaking and could get your site penalized. – Saluki

Answer 11

Some frameworks (e.g. Bootstrap, TailwindCSS) will use visually-hidden or sr-only class or mixing to have element available to screen readers only.

Example:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Lindo

This is cloaking and could get your site penalized. – Saluki

I disagree. Cloaking is “practice of presenting different content to users and search engines with the intent to manipulate search rankings and mislead users”, so it depends entirely on how you use such technique, not if you use it. Further, example of what isn’t violating e.g. Google’s policy is “Text that's only accessible to screen readers and is intended to improve the experience for those using screen readers”. For more on what is and isn’t considered cloaking, please refer to developers.google.com/search/docs/essentials/spam-policies – Lindo

This question is about an H1 tag not about tags for screen readers. – Saluki