Melhor maneira para usar logo em H1?

[Thiago Nunes 0]

Olá pessoal,

 

Depois de muita pesquisa, conclui que a melhor pratica em relação à aplicação da logo, é usá-la dentro de um h1 na home, e nas páginas internas dentro de uma div. Essa seria a melhor solução de acordo com Matt Cuts:

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

Onde o alt é usado para fins de SEO e o title para usabilidade. Como podemos perceber, a imagem é chamada pela tag img. Percebi, porém, que nos portais Terra, UOL e G1 as mesmas são um background da tag <a>. Penso que para fins de otimização é preferível optar pelo uso do background, pois nesse caso é possível a utilização de sprites.
a
Acredito que para fins de SEO é melhor usar a tag img ao invés de background. E vocês, o que pensam a respeito?

Obrigado!

[mangakah 217]

No exemplo que você deu, atributo [inline]title[/inline] deve ficar no link (<a>), não na imagem. Pelo menos é assim que sempre vi sendo utilizado.

 

Mas essa forma aí já está ultrapassada, hoje em dia é preferível usar texto puro dentro do link. O próprio StackOverflow agora está usando dessa forma: apenas texto dentro do link e URL relativa (apenas um slash). Com CSS é aplicada a imagem do logo como plano de fundo e a seguinte técnica para esconder o texto.

a {
   text-indent: -999999em;
   /* ... */
}

 

Assim, a imagem do logo fica para o visitante humano e o texto para os bots.

 

Se o seu logo for apenas texto, considere usar um web-font ao invés de uma imagem. Se essa fonte estiver presente apenas no logo, você pode dar uma enxugada no arquivo removendo todos os caracteres da fonteque não estão presentes no logo, usando um programa específico.

[Thiago Nunes 0]

Olá mangakah,

Obrigado pela contribuição!