CODEWITHSUNDEEP
htmlseoaccessibilitygraphical-logo
user2160744
user2160744

Reputation: 1

H1 with two logo's

I have two logo's in my site header.

I like the solution here: Replacing H1 text with a logo image: best method for SEO and accessibility? :

Solution: According to Matt Cuts (and some other comments) the best solution is to use an image with alt and title attributes. The alt attribute is for SEO and the title attribute is for accessibility. Using an image also makes sense for semantic markup. A company logo is actually an important piece of content.

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" title="Click to return to Stack Overflow homepage" />
  </a>
</h1>

How to have this with 2 logo's?

<h1>
   <a href="http://stackoverflow.com">
     <img src="logo1.png" title="Click to return to Stack Overflow homepage" alt="logo1 " />
  </a>
  <a href="http://stackoverflow.com">
    <img src="logo2.png" title="Click to return to Stack Overflow homepage" alt="logo2" />
  </a>
</h1>

would the h1 then be: logo1 logo2?

Upvotes: 0

Views: 282

Answers (2)

Ryan B
Ryan B

Reputation: 3392

In the case of the two logos, it depends on the context. Are you using two images because they are two different things, ie

<h2>Our Sponsors</h2>
<a><img src="" alt="Google"/></a> <a><img src="" alt="MS"/></a>
<a><img src="" alt="Adobe"/></a>

Or something like:

<a><img src="" alt="Toyota"/><img src="" alt="Corolla"/></a>

If it is th second, you should do:

<a><img src="" alt="Toyota Corolla"/><img src="" alt=""/></a>

For assistive technology, the first Toyota Corolla example will read as:

Link image toyota image corolla

and the second way:

Link image Toyota corolla.

Some say using null alts (alt="") is bad for accessibility and/or SEO. This is false. If an image is used for decorative purposes, a null alt attribute should be used, because all it does is add unneeded chatter. Once upon a time, search engines used to ding people for using null alt, but not anymore.

Upvotes: 0

Jakob Pl&#246;ns
Jakob Pl&#246;ns

Reputation: 33

You shouldn't use h1 as logo, as explained by Harry Roberts (http://csswizardry.com/2013/01/your-logo-is-still-an-image-and-so-is-mine/).

If you want to use two logos, just use two links.

Upvotes: 2

Related Questions