-1

given these two classes (which I've copied from bootstrap 4.1.3):

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

which of the following code is better for an image logo or headline regarding accessibility, (browser) compatibility and SEO? Are there any differences?

<header>
    <h1 class="text-hide" style="background:url('foo.png'); width:100px; height:100px">Foo</h1>
</header>

or

<header>
    <h1>
        <img src="foo.png" alt="Foo" width="100" height="100">
    </h1>
</header>

or

<header>
    <h1 class="text-hide">Foo</h1>
    <img src="foo.png" alt="Foo"  width="100" height="100">
</header>
0

I'd just use

<header>
    <img src="foo.png" alt="Foo" width="100" height="100">
</header>

You shouldn't even consider hiding text for SEO purposes. It is against Google's webmaster guidelines:

Hiding text or links in your content to manipulate Google’s search rankings can be seen as deceptive and is a violation of Google’s Webmaster Guidelines. Text (such as excessive keywords) can be hidden in several ways, including:

  • Using white text on a white background
  • Locating text behind an image
  • Using CSS to position text off-screen
  • Setting the font size to 0
  • Hiding a link by only linking one small character—for example, a hyphen in the middle of a paragraph

Using the .text-hide class on any element to show it to search engines but not to users is a way to get your entire site penalized and kicked out of the search results.

Using alt text for an image is a Google recommended practice for telling them about the text that is in an image. That is also the accessible way that works with screen readers.

An h1 tag with only in an image isn't isn't going to help SEO. The h1 through h6 heading tags aren't needed for SEO anymore. Googlebot now renders pages and it pays far more attention to big and prominent text than it does to the tags that were used to make it that way. If you have an actual title, headline, or heading, then for semantics please use the appropriate h1, h2, or h3 tag. However, doing so isn't going to make your site rank better these days. Don't try to abuse the semantics by putting those tags around non-headings such as hidden text or images.

It would appear that part of your concern is that your page may have a hard time ranking for your brand name unless you include the keyword on the page next to the logo. It just isn't necessary to make that type of "optimization". Google figures out your site's brand name very reliably. Ranking for your brand name is one of the easiest things to do in SEO. Hidden text isn't required. To rank for your brand name you should:

  • Use the brand name in the title of every page of your site.
  • Put the brand name in the copyright statement in the footer of every page.
  • Get a domain name that contains the brand name.

Pretty soon many of your inbound links will have your brand name or your domain name as their anchor text.

Those are very powerful signals to Google that your site represents your brand. When somebody searches for your brand, you will be the first result and Google will a larger menu of links from your site called sitelinks.

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

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