CSS

Hide Header1 Text if using Logo Image

What?

A website logo is normally an image made up to brand the company. But this is not the best way in terms of SEO as it will expect text.

Use CSS to place the logo as an image background on the h1 and move the text off the screen.

Why?

SEO needs a strong h1 which tells the search engine this text is a strong keyword for this page, in most cases this is the company name or the page title.

But if you are using a company logo where are you going to put the company name in text.

How?

Place the company name inside a h1 and use a logo as the background image for the h1. So whenever a h1 is used a search engine will see a company name and the user will see the CSS settings, which moves the text off the page and places the logo as the background of the h1.

<h1>Company Name</h1>

h1 {
    text-indent:-9999px;
    margin:0 auto;
    width:300px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
}
Back to top

Gain access to all tutorials

  • Premium tutorials covering WordPress, Laravel and VueJS
  • Download premium content
  • Download premium WordPress plugins
  • Only $5 a month

Join Paulund