What's the correct way to hide the

Question

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

<h1>Something.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 ?

Thanks in advance!

Answer 1

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

Answer 2

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

Answer 3

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

Works like a charm.... ;-)

Answer 4

The easiest, foolproof, best for SEO solution would be

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