Arquivo

Textos com Etiquetas ‘H1’

Como usar um logo no seu blog e manter a relevância do H1

7 de junho de 2011

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.net.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.net.br/" title="Prodis a.k.a. Fernando Hamasaki de Amorim"><img src="http://prodis.net.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.

Geral , , , ,