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.
Olá Fernando!
Essa técnica também é conhecida como “Image replacement” e realmente é muito interessante.
Para não usar a tag img eu costumo utilizar algo desse tipo:
h1 {
url(”logo.png”);
text-indent: -999px;
overflow: hidden;
}
my blog
Abraços,
Muito cuidado na utilizacao desse recurso para que os buscadores, principalmente o Google, nao penalizem a indexacao do seu site, uma vez que havera texto oculto na pagina.
De fato esta técnica é perigosa, uma vez que os buscadores talvez possam identificar isto como black hat em SEO…
Ola
Como eu posso utilizar essa tag nos templates blogger?
Nao consigo fazer essa configuraçao no meu template