Como usar um logo no seu blog e manter a relevância do H1
As tags de cabeçalho H1, H2, H3, H4, H5 e H6 são utilizadas para marcar pontos de destaque no texto da página. Essas tags, quando utilizadas corretamente, estruturam o texto de uma forma hierárquica, de maneira que haja sub-níveis no contexto da página.
As tags de cabeçalho possuem um grau de importância no raqueamento nos mecanismos de busca, onde a tag H1 possui o maior peso, H2 um peso menor e assim por diante até a tag H6.
Em geral, utilizamos a tag H1 para destacarmos o título de blogs e/ou sites. Por exemplo, nesse blog:
<div id="header">
<div id="caption">
<h1 id="title"><a href="http://prodis.pro.br/" title="Prodis a.k.a. Fernando Hamasaki de Amorim">Prodis a.k.a. Fernando Hamasaki de Amorim</a></h1>
</div>
...
Mas e se eu quiser utilizar uma imagem no nome do meu blog ao invés de um texto HTML? Vou perder a relevância do H1 nos mecanismos de busca?
Uma alternativa, que na verdade eu “chupinhei” do código-fonte do blog do Héric Tilly, é utilizar tanto a tag H1 como a imagem de logo.
<div id="header">
<div id="caption">
<h1>Prodis a.k.a. Fernando Hamasaki de Amorim</h1>
<a href="http://prodis.pro.br/" title="Prodis a.k.a. Fernando Hamasaki de Amorim"><img src="http://prodis.pro.br/images/logo.png" alt="Prodis a.k.a. Fernando Hamasaki de Amorim"></a></h1>
</div>
...
Para o texto dentro das tags H1 não ser exibido, escondemos via CSS:
#caption h1 {
display: none;
}
Agora você tem uma imagem para o nome do seu blog e continua com a relevância do H1 para os mecanismos de busca.
Comentários