HTML Semântico e qual seu impacto no SEO
HTML é a linguagem de marcação utilizada para estruturar todas as páginas de internet. Bem, pelo menos aquelas que seu navegador interpreta. Aliado ao CSS, o HTML forma de maneira maravilhosa as páginas que navegamos. HTML5 é a última versão da linguagem que adicionou vários novos elementos que podemos utilizar para melhor organizar e definir nossas páginas para mecanismos de busca.
Se você possui um website, um portal ou uma landing page, não importa o tamanho, e este projeto está codificado de forma semântica, ou seja, que respeita os padrões do HTML5, com certeza está um passo a frente em direção ao alto ranqueamento. Faremos nesse artigo, uma análise geral sobre o que precisamos para dar esse passo e vamos entender um pouco mais como utilizar os elementos de forma correta, ou melhor, de forma que é sugerida pelo manual do W3C.
O que o HTML5 significa para SEO
É importante salientar que nem só de um HTML bem escrito vive o ranqueamento de uma página web. Diversos fatores irão contribuir para que seu website esteja entre os primeiros nas pesquisas. Mas com certeza, um website bem estruturado e que informe aos robôs o que procurar e onde procurar ajuda muito na hora de avaliar sua estratégia de SEO.
Utilizar as tags mais comuns, como a title e o h1, é fundamental para formar a estratégica básica de SEO. Os mecanismos de busca usam essas tags para entender o que é, e sobre o que fala a página que está analisando. Otimizar estes elementos é o básico quando falamos em boas práticas de SEO. O HTML5 introduziu vários elementos semânticos, que fazem muito mais do que o básico e que ajudam os mecanismos de busca a identificar determinadas áreas de nosso código e indexar de maneira mais assertiva o conteúdo que estamos publicando. Por esse motivo é tão importante considerar esses novos elementos no momento de otimizar nossas páginas.
O que é um elemento semântico?
Você não faz café com um carro certo? Para isso temos a cafeteira. E não transportamos pessoas com a cafeteira. Para isso temos o carro. Os elementos semânticos do HTML são tags que possuem um significado e uma função especifica no código.
O elemento h1 é um elemento semântico. Ele diz aos bots dos mecanismos de busca que o conteúdo entre as tags é o cabeçalho mais importante contido naquele documento. Logo, os bots terão uma atenção especial quando analisarem esse conteúdo.
A tag div, por outro lado, é um elemento não semântico, ou simplesmente estrutural. Essa tag apenas indica uma divisão no documento, para organização e estruturação do código. Sendo assim ela não fornece informações sobre o que vem antes, dentro ou depois da tag.
Novos elementos semânticos do HTML5
O HTML5, apesar de já bem conhecido, trouxe uma serie de novas tags semânticas que enriquecem e organizam ainda mais a informação para os bots de mecanismos de busca. Vamos ver alguns desses elementos e entender o que eles significam na prática para o SEO on-page:
Main
A tag main abriga o conteúdo dominante de uma e outras seções que estendem o tema principal da página, incluindo a tag article e o suporte a tag section.
Article
A tag article deixa mais fácil marcar novos posts ou matérias em uma publicação online. Mecanismos de busca conseguem colocar mais peso em qualquer conteúdo contido nessa tag. Ela também ajuda a realizar uma limpeza no código reduzindo o uso da tag div.
Section
Páginas de internet são normalmente quebradas em diferentes seções para que fique mais fácil com que os usuários encontrem o que estão procurando. A tag section deve ser usada para especificar essas subseções em seu conteúdo. Cada uma com seu próprio cabeçalho HTML.
Header
A tag header é similar a tag h1 na medida que a tag header pode ser utilizada para especificar o cabeçalho de uma página. Além disso esta tag também pode indicar o cabeçalho de uma seção da página e também pode conter links de navegação e outros textos relevantes.
Footer
Embora não tão útil como a tag header, a tag footer continua a oferecer benefícios no SEO uma vez que, ela é utilizada para especificar conteúdos no rodapé de um website. Esses conteúdos podem ser informações da empresa ou do negócio e links importantes. Cada página pode ter sua seção de rodapé diferente uma das outras, mas todas deve ter a seção.
Nav
Navegação é sem dúvida um dos aspectos mais importantes de um site. A tag nav pode ser utilizada para especificar links em uma página na navegação ou utilizar para paginação.
Video
A tag video é facilmente uma das tags mais úteis, da maneira que ela nos possibilita a compatibilidade cross-browser para exibir vídeos sem utilizar o Flash. No HTML5 também é possível inserir informações adicionais sobre o vídeo, como legendas e títulos.
Aside
Uma tag aside pode ser com uma tag section, mas foca em um conteúdo secundário como um sidebar, ou uma call to action. Todo aquele conteúdo que deve ser exibido na página, mas não tem relação direta com o conteúdo principal exibido deve ser inserido em uma tag aside.
Isso realmente irá ajudar meu site?
Certeza não é uma palavra que podemos utilizar quando falamos de tecnologia. As coisas mudam muito rapidamente. E além de escrever um código semântico ainda existem muitos outros fatores para alcançar o topo das buscas. Mas lá atrás, em 2017, alguns estudos de casos analisados pelo Google revelaram que websites que possuíam HTML5 organizado de forma semântica tiveram seu rankeamento elevado ou pelo menos criaram melhores exposições nos resultados de busca. Estamos em 2019 e escrever o código de forma a informar ao navegador e aos bots o que cada coisa faz ainda continua sendo uma ótima prática na hora de escrever seu código.
Afirmar isso é um fato pois quanto mais detalhes semânticos você fornece para os bots, melhor os mecanismos de busca poderão entender e indexar seu conteúdo. E é claro, por último, mas não menos importante. Utilizar elementos semânticos do HTML5 não lhe arrancarão um dedo, e com toda certeza irão deixar seu código muito mais clean e legível.
O que achou deste post? Deixe um comentário e me diga se você dá a devida importância para o desenvolvimento de HTML semântico. Não esquece de me seguir lá nas redes sociais. Nos vemos pelos pelos códigos! Até mais!
Sobre o Autor
Comente!