Cuidados que produtores de conteúdo devem tomar com HTML para SEO

Por DINO 15 de junho de 2018

Cuidados que produtores de conteúdo devem tomar com HTML para SEO

O conteúdo relevante é o elemento mais importante de SEO. O Google prioriza a exibição de conteúdos nas buscas orgânicas a partir de algoritmos e inteligência artificial. Isto não significa, porém, que aspectos técnicos de uma página não exerçam nenhuma influência em SEO. Exercem, sim, e por isso quem produz conteúdo deve estar atento a eles.

O código HTML é um desses elementos. Embora a maioria dos produtores de conteúdo saiba o que é HTML, não custa mencionar a definição, pois ela será essencial para a compreensão completa deste artigo.

A fonte com maior autoridade é seguramente o W3C, consórcio global do qual participam as empresas de tecnologia encarregado de coordenar os padrões de linguagem da internet. O W3C define HTML como “a linguagem usada para descrição da estrutura de páginas”.

Em outras palavras, quando você acessa um site, seu navegador lê e interpreta códigos de HTML. O Google também. Portanto, um site com alta qualidade de HTML se beneficia em SEO. É o que reforça, por exemplo, o Search Engine Journal, um dos principais sites especializados no tema no mundo:

“A estrutura do seu site cumpre um tremendo papel na autoridade em SEO de uma maneira geral. A forma como você aloca os elementos de navegação de seu site merece atenção especial.”

Aspectos importantes de HTML para SEO

Para que você entenda os aspectos mais importantes da otimização de sites e HTML, vamos listar os cuidados a se tomar, do mais amplo para os mais específicos. O aspecto mais amplo diz respeito à forma como a página é estruturada.

Estrutura da página

O HTML5 é a versão mais recente do HTML e exerce papel importante em SEO. Essa nova versão foi anunciada oficialmente em 2008 pelo W3C. Uma das novidades foi a criação de novas tags que especificam as áreas de um site. Por exemplo, até a versão 4, todo o conteúdo de um site ficava alocado dentro da tag <body>. Na versão 5, algumas tags mais específicas foram criadas. As mais relevantes são:

<header>: abriga o topo da página, onde ficam, por exemplo, logotipo e banners.
<nav>: é onde fica o menu de navegação.
<article> e <section> abrigam o conteúdo em texto, imagem e vídeos.
<aside> define onde aparece uma barra lateral.
<footer> abriga o rodapé.

A imagem abaixo, do site Celibiol, explica visualmente a finalidade de cada uma dessas tags.

Para que o Google rapidamente compreenda os elementos presentes na página, o HTML precisa estar, portanto, organizado. A própria padronização do HTML com a contribuição do Google no W3C indica que ele foi criado para ajudar o usuário e, por consequência, os motores de busca.

Elementos do texto

Além de organizar o espaço que cada conteúdo ocupa, é importante especificar a função que cada elemento desempenha numa página. As tags de HTML funcionam também para essa finalidade. Por exemplo, ao marcar o título de um post com a tag <h1>, você indica tanto para o leitor quanto para o Google que aquele é o título da página — e, portanto, tem bastante importância.

Listamos a seguir as tags mais importantes aplicáveis ao conteúdo.

Title tag

A tag de título é aquela que aparece na aba superior do navegador.

No HTML, ela aparece dentro da tag <title>, como mostra o print do código da mesma página exibida na figura anterior.

Segundo Neil Patel, quando se pensa em melhorar o ranqueamento, o title é uma das principais tags. “Para um buscador ranquear um determinado site, ele precisa saber sobre o que é o conteúdo, sobre o que é cada página e sobre o que é o seu site”, explica Patel.

Títulos e subtítulos

O HTML prevê seis níveis de importância dos títulos. Eles são definidos pelas tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. O <h1> é normalmente usado para títulos e o <h2>, para intertítulos.

No código HTML dessa mesma página utilizado no exemplo anterior, o título (h1) aparece assim no código:

E o intertítulo (h2), assim:

Se houvesse um “inter-intertítulo” — ou seja, um intertítulo dentro do intertítulo —, ele ganharia a tag <h3>. E assim sucessivamente até o <h6>.

Organizar bem os títulos é uma forma de sinalizar para o leitor e para o Google, por meio do código HTML, qual a hierarquia da informação. Por isso, rende benefícios de SEO.

Links internos

Uma vez que a estrutura da página esteja no mínimo satisfatória, outro elemento importante é a chamada “profundidade” da navegação — que nada tem a ver com profundidade do conteúdo.

A profundidade da navegação diz respeito à quantidade de cliques que o usuário precisa fazer para chegar a um determinado ponto do site. Quanto menos cliques, melhor. Lembre-se: o Google valoriza a usabilidade, conforme lembra o Search Engine Journal:

“Do ponto de vista de SEO, é preferível ter um site raso (ou seja, que requer três cliques ou menos para se chegar a toda página) do que um profundo. E links internos reduzem o número de cliques necessários.”

Quando o artigo menciona “links internos”, ele se refere a uma arquitetura em que, na teoria, todas as páginas façam link para todas. É o que esquematiza graficamente o site Link Assistant:

Em linhas gerais, o Google prioriza sites que sejam amigáveis para o usuário. Quanto mais fácil for o acesso às suas páginas, mais amigável é o site.

Atributos de links e páginas

Por fim, é preciso saber utilizar funcionalidades de HTML que permitem comunicar aos mecanismos de busca que um conteúdo ou página precisa de tratamento especial.

Atributo nofollow

Por padrão, tudo o que é publicado em um site é indexado pelo Google. Mas, em certas ocasiões, você, como gestor de conteúdo, precisa abrir uma exceção e informar ao Google que um link não deve ser rastreado. Para isso, foi criado em 2005 o atributo “nofollow”.

Isso vai indicar para o Google que você não deseja que aquele link seja rastreado. Em outras palavras, você de certa maneira informa que o link foi criado, sim, mas não deve pesar a favor do site de mencionado. Você declara, assim, que não quer fazer uma referência a ele, como por exemplo, o admin do seu site que você citou em um artigo de ajuda.

Veja o exemplo:

Tag canônica

Suponha que você tenha recebido a autorização de um autor para republicar na íntegra um artigo que ele já publicou no blog dele. Nesse caso, você deve indicar para o Google que aquele conteúdo original já existe em outro lugar — e que o seu é uma cópia. Basta, então, inserir o atributo abaixo na tag <link> para a URL original. Assim:

Lembre que essa tag, chamada de canônica, deve aparecer no <head> do seu código HTML.

Segundo o Hallam Internet, o uso de tags canônicas “avisa aos motores de busca que o conteúdo original está localizado em alguma outra página que não a sua”. É, portanto, uma boa prática que favorece a sua reputação — e impacta positivamente seu SEO.

Atributo noindex

Muitas vezes, você deseja que uma página seja ignorada pelo Google. Por exemplo, antes de lançar um novo produto de sua empresa, você publica a página contendo descrição e preços, mas não quer que ela seja rastreada pelos motores de busca. Somente quem tiver recebido a URL terá acesso à página. Nesse caso, você deve inserir a tag abaixo dentro do cabeçalho (<head>) de HTML:

Lembre-se apenas de apagar essa tag, chamada de noindex, do código HTML quando a página for efetivamente publicada.

Otimização de HTML

Além de organizar as informações, o código HTML precisa tomar um cuidado adicional: evitar a lentidão no carregamento. Para carregar uma página, é preciso que o navegador do usuário interprete todo o código. Se ele for excessivamente extenso, o tempo de carregamento pode subir — e isso impacta negativamente o SEO.

Por isso, convém otimizar — ou seja, comprimir — o código HTML. Algumas ferramentas fazem isso automática e gratuitamente. A mais popular é o HTML Compressor.

Takeaways

Certifique-se de que seu conteúdo tenha uma macroestrutura adequada, o que pode ser facilitado pelas tags do HTML5 criadas para essa finalidade. Especificamente em relação ao conteúdo, as tags de title e de títulos (h1 a h6) também cooperam para indicar a prioridade da informação.

Do ponto de vista de navegação, o uso de links internos deve priorizar o acesso rápido — com o mínimo de cliques — a qualquer página. E, de preferência, com HTML otimizado.

E, para qualquer situação atípica, que possa prejudicar a reputação do seu site, use tags que avisam ao Google se tratar de casos excepcionais.

SEO