Image-replacement: use com cuidado

Na lista de discussão webstandards-br rolou há pouco uma discussão sobre o uso de image-replacement e o posicionamento do Google quanto a isso. Leia com mais detalhes o que o Google diz sobre image-replacement. Atentem para o seguinte parágrafo:

Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele pode ser removido do índice do Google e não não vai mais aparecer nas páginas de resultados de pesquisa. Ao verificar seu site para ver se ele tem texto e links ocultos, procure por elementos que não sejam visíveis aos usuários da página. Existem textos ou links presentes exclusivamente para mecanismos de pesquisa e não para visitantes?

Isso mesmo. O Google recomenda não usar image-replacement nem esconder conteúdo textual de seus visitantes. Isso inclui aqueles textos descritivos que a gente costuma deixar no HTML só para usuários que usam tecnologias assistivas, como os links “pular para o conteúdo”, “ir para o menu principal” e etc. É bem verdade que há controvérsias quanto à rigorosidade do Google quanto isso. Uns dizem que o que não pode é exagerar no tamanho do texto escondido, que até 75 caracteres não há problema. O parágrafo acima também dá margens para um possível “bom senso” do googlebot. O certo é que é melhor prevenir do que remediar, já dizia o velho deitado.

Mas a questão principal do tópico era o uso de image-replacement no título do site, a famosa técnica de colocar o título do site em um link dentro de um h1 e, via CSS, ocultar o texto, substituindo-o pelo logotipo do site. Essa técnica é bastante usada por um sem-número de sites (inclusive de grandes evangelizadores) por aí, como o A List Apart, o Mezzoblue de Dave Shea e, só pra citar alguns dentro de nossa blogosfera: Maujor, Tableless, BrunoTorres.net e… o meu (tá, mas o meu é um tema pronto do WordPress🙂.

Mas qual o problema?

Se essa técnica é tão utilizada por blogs tão preocupados com os padrões e bem posicionados no Google, o que pode haver de errado com ela? Simples: A semântica. Vejamos o que o W3C nos diz sobre as tags hn (grifo meu):

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Como podemos ver, as tags hn são usadas para descrever seções e sub-seções de um site, e não o título do site ou o nome da empresa. Um exemplo de bom uso das tags hn é o seguinte:


<div class="secao">
    <h1>Título da seção</h1>
        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>

        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>
</div>

Como bem disse no decorrer do tópico o Israel Cefrin, se pensarmos que o HTML foi inventado para fins acadêmicos, é fácil entender o uso dos cabeçalhos, comparando-os com a estrutura básica de uma monografia, ou um trabalho acadêmico.

Mas e o título do site, como fica?

Oras, a tag title serve pra quê? Vejamos:

Authors should use the title element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead.

É uma boa prática, inclusive de SEO, colocar na tag title o nome do site e o contexto atual da página. Um bom exemplo do uso da tag title é esta exata página que voce está lendo. Olhe o título dela: Image-replacement: use com cuidado « Blog do Jader. Bonito, não? Isso me diz que eu estou, dentro do Blog do Jader, lendo o artigo Image-replacement: use com cuidado.

Ok, o título do site é com a tag title, mas e o logotipo?

O logotipo do site é uma imagem com relevância de conteúdo e não de decoração, certo? Logo, deve ser usada a tag img, com seu atributo alt devidamente preenchido. Isso garante que tanto mecanismos de busca quanto usuários, independentemente do dispositivo utilizado para acessar o seu site, tenham acesso ao conteúdo do logotipo.

Não faz sentido colocar essa imagem dentro de um h1 pois, como já vimos, as tags hn são para títulos de seções do site. Para que a imagem do logotipo tenha um identificador único, pra que seja mais fácil posicioná-la com CSS, basta acrescentar um id à tag e pronto, você já tem tudo o que precisa pra fazer o que quiser com ela.

Conclusões

Você pode estar se perguntando onde eu quero chegar com todo esse papo de semântica, SEO, estrutura de um documento, etc. A resposta é simples: a semântica é tudo e mesmo os gurus a deixam de lado às vezes. Boa parte das técnicas existentes que envolvem puramente HTML + CSS são baseadas na solução do problema e na validação do código. A semântica fica de lado e às vezes nem percebemos isso. Eu mesmo, antes desse tópico, nem pensava que essa prática tão comum pudesse estar tão errada semanticamente.

Faz parte do cotidiano de um desenvolvedor pesquisar novos meios de se resolver velhos problemas e, o que é mais importante, estar diposto a romper com velhos hábitos e se atualizar. O questionamento das ditas “verdades absolutas” é essencial para o crescimento não só no âmbito pessoal, mas também no profissional, e com isso nós temos sempre que estar lidando.

13 Comentários

Arquivado em Artigos, Cotidiano, Semântica, Tableless, Web Standards, XHTML

13 Respostas para “Image-replacement: use com cuidado

  1. Boa boa🙂
    A dicussao na lista rendeu muito! Legal a iniciativa de exteriorizar no blog de forma sintetizada e conclusiva.

    Site do Grupo Universitário Maurício de Nassau

  2. Realmente, dificilmente a gente pensa em coisas assim… Vale repensar a minha estratégia também…

  3. Com certeza essa discussão deu o que falar… Mas é uma discussao sadia!

    Interessante ver esse tipo de acontecimento, pois eu sempre uso image-replacement, principalmente como título do site, pela relevância que se dá, tento na title como na h2 (prefiro usar esta ao invés de h1) ao invés de usar img, pois o “peso” que se dá para isso é muito menor…

    Bom, sempre há os dois lados da moeda.
    Caso a gene veja que o Google realmente está pegando pesado, é melhor mudar a prática ;(

  4. Marcelo

    Teve um post sobre isso tambem em outro blog:
    http://iaku.org/seja-sensato-ao-usar-image-replacement/

    abraço!

  5. Ummm, interessante modo de pensar. Você tem razão. H1 não é pra logotipo ou nome da empresa. Vou adotar a partir de agora.
    Ótimas conclusões.

  6. Muito boas conclusões.

    Sua opinião sobre os hn é interessante e faz totalmente sentido, mas eu integraria esta questão à semântica de cada um… Assim como na separação de campos de formulário: uns usam listas, outros parágrafos, outros ainda somente <label> e <br /> e nenhuma das alternativas é semanticamente incorreta.😉

    Abraço!

  7. @Ramon, no caso dos formulários, não acho que seja correto separar os campos com parágrafos, muito menos manusear as quebras de linha com <br />.
    Um formulário, ao meu ver, é uma lista de campos a serem preenchidos, logo, listas são mais adequadas. Obviamente, sem abrir mão do correto uso da tag <label>.

    Quanto a “integrar a questão à semântica de cada um”, não entendi o que quis dizer. O meu principal foco ao escrever este post era focar na semântica. Eu não consegui?

  8. Sim, conseguiu!

    Porém certas questões dentro da semântica web são pessoais. Formulários devem usar <label> para identificar campos, isto é fato. Agora, qualquer coisa fora disto que determine a marcação do formulário é pessoal!

    Não existe nenhuma restrição documentada que invalide isso🙂

  9. Certamente um campo de formulário não seria um parágrafo.

    Não entendo como a semântica pode ser pessoal. Se cada um dá o seu significado ao que quiser, da forma que quiser, como pode haver uma padronização disso tudo? Lembre-se que estamos de padrões web, e padrões não são pessoais.

    Se eu vejo uma cadeira e falo que é mesa e você diz que é cadeira, como podemos nos comunicar sem que haja confusão?

  10. Convenhamos que não é fácil abrir mão de usar títulos com fontes legais, usando image-replacement. Uso IR’s em quatro lugares do site. E não são informações tão relevantes, logo, tudo bem.

    Sempre que for possível, melhor. Mas para não arrumar brigas com o designer – ou com o designer que está dentro da gente =D – às vezes não faz mal ceder.

    Meu posicionamento no Google até que é bom, estou satisfeito. Mas não cometo exageros e tento manter o código mais semântico possível. Essa é a minha SEO.

  11. Fala Jader,

    É a 1a vez que escreve aqui. Legal o seu blog!

    Mas então, não há problema com a técnica de image-replacement em si. Como você disse, tem sites muito bem posicionados que usam essa técnica. O problema que o Google fala é quando essa técnica é usada para burlar o sistema de qualificação do site. Por exemplo, você pode colocar inúmeras palavras-chave, como xuxa pelada, dinheiro fácil, free downloads, divx… e escondê-los por detrás de uma imagem qualquer, que com certeza não terá a foto da xuxa pelada, nem lhe ensinará a ganhar dinheiro fácil. Ou então a imagem esconderá uma série de links que não tem nada a ver com a imagem, colocados alí apenas para tentar, de maneira fraudulenta, aumentar o page-rank dos sites apontados por alí, que muito provavelmente serão da mesma pessoa, ou dos “clientes” dela.

    Pior ainda é se o texto diz algo como clique aqui para baixar de graça o photoshop, e ao clicar você é levado à uma fazenda de anúncios (ad-farms).

    Usar a técnica quando a imagem e sua descrição estão coerentes não causa problema nenhum.

  12. Ops… era pre eu ter escrito “É a 1a vez _EU_ que escrevO_ aqui”, mas acho que deu pra entender.

    Continue com esse blog, ele está muito legal. Gostei dos assuntos abordados aqui. Voltarei mais vezes!

  13. Ricardo

    Acho que o propósito de se usar a tag <h1> para o título é óbvio: sem imagens e sem css, a página continua exibindo um título, só o titulo da barra não é suficiente (o corpo da pagina começaria direto no conteúdo). E aí acrescentar um id ou qualquer outra coisa não vai fazer diferença.