SEO: Imagem clicável no header do WordPress

Muitos temas do WordPress trazem uma imagem no topo, com o nome do blog em um link. A imagem é apenas um pano de fundo, o título é definido pelo usuário, que não tem muitas opções, já que deve se ater a fontes comuns, disponíveis em qualquer computador.

Daí, você pega uma bela imagem, acrescenta o nome do seu blog no Photoshop, com a fonte que sempre sonhou. Então vem o primeiro problema, como se livrar do título que insiste em aparecer?

Você faz uma busca e encontra a resposta, “display: none;” logo abaixo do CSS que define o header. Problema resolvido e você não pensa mais no assunto.

Porém, ah porém, O Google, assim como qualquer site de busca, não vê imagens. Mesmo que você acrescente as tags alt e title, como manda o figurino, seu site nunca será visto da mesma maneira que um utilizando o método tradicional.

Por que isso acontece? Simples, tags alt e title não têm o mesmo peso que o título entre as tags <h1></h1>.

Sem contar os navegadores configurados para não mostrar imagens, navegadores modo texto etc. Poucas pessoas usam esses navegadores, mas Deus gosta de sites que sejam de fácil acesso, leia-se que funcionem em qualquer dispositivo. E “display:none” esconde realmente o que está por trás dele, inclusive dos buscadores.

A melhor maneira de lidar com isso é mostrar tanto a imagem quanto o título original, dentro das tags <h1></h1>.

Mãos a obra:

A primeira coisa é localizar, no CSS do seu blog, o código responsável por gerar o link do título. Ele é mais ou menos assim:

#header h1 a{
text-decoration: none;
color: #006600;
}

Substitua pelo código abaixo:

#header h1 a {
display: block;
width: X% or Xpx;
height: Xpx;
outline: none;
text-indent: -9000px;
text-decoration: none;
background: url(YOUR IMAGE ADRESS) no-repeat left top;
border-bottom: Xpx solid #006000;
}

“Width” pode ser em porcentagem ou píxels, dependendo do seu tema, “height” é a altura da sua imagem;

“border-bottom” é com você, dependendo se quer ou não uma linha abaixo da imagem, remova ou mude a configuração, se for o caso;

O pulo do gato é o “text-indent: -9000px”, o que ele faz é dizer ao navegador para jogar seu título para bem longe da página visível, 9000px de distância, para ser mais exato. Porém, e agora o porém é legal, seu site será visto perfeitamente em qualquer navegador e, o que é melhor, pelos mecanismos de busca.