Página Inicial > Geral > Como usar um logo no seu blog e manter a relevância do H1

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.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 , , , ,

  1. 10, junho, 2011 em 19:43 | #1

    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,

  2. Bruno
    19, julho, 2011 em 22:02 | #2

    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.

  3. Wallysson Nunes
    28, julho, 2011 em 17:56 | #3

    De fato esta técnica é perigosa, uma vez que os buscadores talvez possam identificar isto como black hat em SEO…

  4. 16, agosto, 2011 em 12:53 | #4

    Ola
    Como eu posso utilizar essa tag nos templates blogger?
    Nao consigo fazer essa configuraçao no meu template

  5. 15, agosto, 2013 em 02:41 | #5

    Valew.

  1. Nenhum trackback ainda.