CODEWITHSUNDEEP
htmlcssseo
theorise
theorise

Reputation: 7425

Best practice for brand logo on websites

I have to make a microsite and I want to know the best method of using a logo in the HTML template. (Ignore the fact this is invalid code, its just arbitrary waffle if I use alt="" for example.)

Option 1:

<a href="#">
   <img src="logo.gif" /> 
</a>

Option 2:

<h1>
   <a href="#">
      <img src="logo.gif" /> 
   </a>
</h1>

Option 3:

<h1>
   <a href="#">
   </a>
</h1>

h1{background: url(logo.gif);}
h1 a{height: #px; width: #px;}

Option 4:

Is using h1, h2 or h3 better for SEO, as I understand that repetitive h1's are a bad idea and the company brand is NOT the main subject for every page on it's website?

What I normally use is Option 3, like this:

<h2>
   <span>Company name</span>
   <a href="#">
   </a>
</h2>

h2{height: #px; width: #px; background: url(logo.gif);}
h2 a{display: block; height: #px; width: #px;}
h2 a span{display: none;}

Upvotes: 16

Views: 11910

Answers (5)

TheAlbear
TheAlbear

Reputation: 5585

I like option 3 as it allows you to add the company name as live text.

But do not have the company logo as an h1 tag, the h1 tag is the main thrust of the page content and should be the content heading. I wouldn't have the company logo in a heading tag at all as it is not a heading.

Upvotes: 1

Knu
Knu

Reputation: 15136

In HTML5 (if your header contains only your logo and tagline/motto) id do this: 

<header role="banner">
<a href="#"> 
   <img src="logo.gif" alt="Waffle Inc." />  
</a> 
</header>

Upvotes: 8

Quentin
Quentin

Reputation: 943586

Use h1 on the homepage. It makes sense for the primary heading for the home page to be the company identify. The alt text should be the company name.

Use a plain div on other pages, where it isn't any kind of heading. The page will have its own main heading.

Upvotes: 2

Stephan Muller
Stephan Muller

Reputation: 27600

I usually use option three, but that has one downside: if CSS isn't loaded the company logo isn't visible either. I think the logo is one of the images that should be present on a website at any time, even with no css, because it's a very important part of the brand. Therefor I think it's semantically most correct to use an <img> for the logo. It is an image important in the page's contents, not just a part of the style.

My favorite option (I should use it more) is to have the logo image with an alt text separarely from the heading. In the <h1> I put the name of the brand again, or if it's not the homepage I'll put it in a regular div and use <h1> for the actual page title. Usually it can't hurt in terms of design to use both logo and the name as a title.

About option 4: it depends on which version of HTML you use because HTML5 allows multiple h1's. I've added a question to Google's moderator questions about the SEO implications of this which I hope Matt Cutts will answer in his next round of videos.

Upvotes: 8

Russell Dias
Russell Dias

Reputation: 73302

Using <h1> for the logo is usually encouraged as your brand identity is essentially a statement and not simply a decorative feature. However do not use <h*> tags for arbitrary images on your website.

I would recommend you place your logo within the <img> tags and simply specify an alt attribute for it, do not have it as a background image.

Upvotes: 2

Related Questions