Beatriz Maciel

Posted on Jul 18, 2022

Guia SEO para desenvolvedores 2022

#seo #beginners #frontend #html

O que é SEO?

O Search Engine Optimization (SEO) significa, em tradução livre, "otimização do motor de busca" e tem como objetivo rankear websites nas pesquisas de sites como Google, Bing e Yahoo. É claro que hoje em dia focamos nossos esforços na pesquisa do Google, que tem sido a mais forte ferramenta de pesquisa online, mas as práticas de SEO são úteis para além dele.

Os sites de busca têm robôs que são configurados para ler as páginas da web, identificando se o conteúdo que está ali é interessante para o usuário que faz a pesquisa. Ao entendermos como esses robôs funcionam, podemos deixar nosso site em evidência

📌 HTML5

Existe muito conteúdo sobre SEO, mas no desenvolvimento vamos focar na estrutura HTML e, mais especificamente, nas convenções estabelecidas no HTML5 e as tags que ele introduziu. No geral, um(a) programador(a) trabalha em conjunto quando pensamos em boas práticas de SEO e existem especialistas no assunto. Entretanto, em algumas situações podemos ter que fazer não só a parte de desenvolvimento como também de rankeamento do site. Para isso deixarei algumas referências no final do texto que são mais teóricas e conceituais. O foco aqui é entendermos a hierarquia e a relevância da programação nesse processo.

Tags

Para nós, desenvolvedores, grande parte do trabalho de SEO consiste na organização das tags HTML de forma que os sites de pesquisa possam fazer o crawling (o "mapeamento" ou o "escaneamento") de forma correta.

⚠️ Importante: As tags que introduzimos no HTML são semânticas e não interferem no nosso layout, elas servem realmente para organizar o código e para que os robôs as leiam e as categorizem.

Estrutura

Já conhecemos a estrutura do HTML: <header></header> para as configurações da página e <body></body> para o conteúdo que fica visível. O taggeamento mais importante que faremos ficará dentro da tag body, e falaremos dele a seguir.

Cabeçalho

Para o cabecalho é importante usarmos a tag <header></header>, especificando onde começa e onde termina nosso cabeçalho. Podemos ter mais de um cabeçalho.

Rodapé

Usamos a tag <footer></footer> para o rodapé. Podemos ter mais de um rodapés na página, como mostra a imagem a seguir:

Seções

A tag <section></section> serve para delimitar o escopo de um componente ou conteúdo. Podemos ter várias sessões no nosso site e dentro delas provavelmente usaremos as tags h (h1, h2, h3, h4, h5, h6), p, além de imagens e tantas outras coisas.

⚠️ Importante: Podemos usar a tag <div></div>, mas ela é mais genérica e, portanto, menos rankeável. Antes de usar uma div se certifique se realmente não existe a possibilidade de deixar o elemento mais específico através de uma tag. Se tiver dúvidas, olhe sempre na documentação oficial do HTML5.

Imagens

As imagens são muito importantes no rankeamento do nosso site. Vamos analisar essa estrutura de imagem, que está perfeitamente enquadrada semanticamente:

<figure>
    <img src="pasta/tema/nome.jpg" alt="Descição da Imagem" title="Titulo da Imagem">
    <figcaption>Descição da Imagem</figcaption>
</figure>

Utilizamos a tag <figure> para especificarmos o escopo da imagem. Nesse caso usamos duas tags internas: <img> e <figcaption></figcaption>, então faz sentido "abraçarmos" as duas com a tag <figure>.
A tag <img> é bastante relevante para o SEO. Dentro dela é importantíssimo usarmos title e alt. O title serve para quando descansamos o mouse em cima da imagem e uma descrição aparece. Já o alt serve para acessibilidade e não é visível quando a imagem carrega, somente no modo de visualização de acessibilidade. Essas duas especificações são essenciais para imagens e não podem ser esquecidas.
Já a tag <figcaption> serve para especificar a descrição da imagem, que pode ser mais extensa e detalhada.

Títulos e subtítulos

A hierarquia é muito importante na semântica SEO, então quando falamos de títulos não seria diferente. Você pode ter quantos títulos e subtítulos quiser, mas é importante que respeite a hierarquia entre eles e sempre deixe títulos menores dentro de títulos maiores.
Há quem defenda que cada página só deveria ter um h1, mas isto não está escrito em pedra. Pela dúvida, mantenha o h1 com o mesmo título do seu site, exatamente o que deverá estar em evidência no motor de busca.

⚠️ Importante: o conteúdo das tags de título (<title></title>) devem ter entre 50 e 60 caracteres. Não ultrapasse esse limite! Além disso, é aqui que deve estar as palavras chaves de busca do seu website, sendo as mais relevantes à esquerda.

Descrição

Quando fazemos uma busca os sites costumam ser elencados através de seus títulos (que geralmente é o link clicável) e uma descrição. Os buscadores adicionam uma descrição automática por padrão, mas podemos também configurar a descrição usando palavras chave e chamando para a ação, de forma que o usuário se sinta impelido em clicar.
A forma correta de fazer a descrição no HTML5 é a seguinte, dentro do <header>:

<meta name="description" content="Insira uma descrição aqui">

Geralmente a descrição fica abaixo da tag <title> e deve ter menos de 156 caracteres. A descrição também deve ser única e deve conter a palavra-chave primária do website.

No exemplo acima vemos um anúncio de aspirador de pó. A descrição contém a "chamada para ação", que é o: "clique e confira as melhores ofertas". Uma descrição boa é sucinta, chama o usuário para ação e traz palavras-chaves relevantes.

Meta tags

Você deve ter reparado que usamos uma tag <meta> para escrevermos a descrição. As tags meta podem nos auxiliar se quisermos adicionar novas informações, como as palavras-chave, viewport, charset e o autor da página.

Exemplos:

<!--- META KEYWORDS --->
<meta name="keywords" content="HTML, CSS, Javascript">

<!--- META CHARSET --->
<meta charset="UTF-8">

<!--- META EDGE --->
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!--- META AUTHOR --->
<meta name="author" content="Sonia Guimarães">

Canonical

Uma URL canônica é a "principal" rota do site a ser mapeada pelo crawling. Se não definirmos isso no código, os robôs assumirão uma página a partir de suas métricas e algoritmos, por isso é importante descrevermos a URL principal do nosso site.
⚠️ Importante: Algumas vezes temos a mesma URL com pequenas diferenças, por exemplo:

www.meusite.com
http://meusite.com
https://meusite.com

Este caso pode confundir os crawlers, por isso é importante salientarmos qual é o link principal. Lembre-se: páginas https têm mais peso para as buscas, porque seguem um protocolo mais seguro.

A sintaxe da URL canônica é a seguinte:

<link rel="canonical" href="https://example.com/dresses/green-dresses" />

Você pode saber mais sobre URLs canônicas aqui.

Outras tags

Como dito anteriormente, o HTML5 conta com diversas tags e seria impossível destacar todas aqui. Se você está em dúvida, pesquise na documentação oficial e confira se já não existe uma tag para o que você precisa. Algumas tags relevantes, além das que vimos anteriormente: <article>, <aside>, <nav>, <main>, <button>, <link>, <address> e tantas outras.

📌 URL

Outro detalhe importante para o rankeamento são as URLs amigáveis, ou seja, URLs que sejam facilmente legíveis pelos usuários. Evite usar códigos, números, letras e caracteres especiais e tente usar mais nomes separados por hífens e barras.

Exemplo:

http://www.meusite.com/produtos/perfumes

E evite coisas como:

http://www.meusite.com/conteudo/produtos/uh6Djvf81/perfumes_0232

As URLs também devem ter menos de 115 caracteres, mas quanto menor, melhor.

📌 Crawling

Crawling é o mapeamento que os robôs fazem em um website. Para guiar a facilitar o trabalho desses robôs existem dois tipos de arquivos importantes:

Robots.txt

O robots.txt funciona como um arquivo de instruções para os robôs de motores de busca. Se o seu site tem poucas páginas não é necessário mexer necessariamente nesse arquivo. Aqui dizemos mais quais são as páginas que não queremos que os robôs façam a varredura.

Um exemplo da sintaxe utilizada no arquivo é a seguinte:

User-agent: Googlebot-news
Allow: /

User-agent: *
Disallow: /

Aqui estamos permitindo que apenas o Googlebot mapeie o que está depois da barra (/) e estamos desautorizando os outros user-agents (outros robôs) a mapearam o que está depois da barra (/). Quando utilizamos o asterisco ( * ) queremos dizer todos. Para saber mais sobre a sintaxe do robots.txt, clique aqui.

Sitemap.xml

Como escrito no nome, este arquivo serve como Mapa do Site. Nele você deve listar as páginas do seu site que você quer que o site de buscas rastreie, guiando-o para seus conteúdos e páginas.
É importante ressaltar, entretanto, que é "mais importante ter um site facilmente rastreável pelos robôs do que usar o sitemap.xml para contornar falhas na arquitetura do site" (SEOMarketing).
Podemos inserir até 50.000 URLs no arquivo sitemap.xml, sendo recomendação do próprio Google. O arquivo também pode ser criado de forma manual ou através de ferramentas.
Um exemplo da sintaxe do sitemap.xml é a seguinte:

<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>https://www.seusite.com.br</loc>
      <lastmod>22-07-11</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.9</priority>
   </url>
</urlset>

Para saber mais sobre o sitemap.xml, acesse este arquivo completo do SEOMarketing.

📌 Favicon

É bastante nítido, neste ponto do artigo, que SEO tem tudo a ver com a experiência do usuário e em como o usuário pode navegar de forma mais confortável e intuitiva pelo nosso website. Neste sentido, um favicon é muito importante, porque deixa claro em qual aba está o seu website.
Para adicionar um favicon lembre-se de seguir a seguinte semântica:

<link rel="shortcut icon" type="image/ico" href="http://meusite/favicon.png">

O rel="" serve para acessibilidade enquanto o type="" serve para mostrar qual é o tipo de conteúdo que será anexado.

📌 Velocidade e carregamento

Uma das coisas que elencam negativamente um website é a velocidade de carregamento. No Google Chrome podemos fazer uma varredura simples e eficiente ao inspecionarmos um site, através da aba Lighthouse.

Ao apertar no botão "Analyze Page Load", o navegador gera um relatório do carregamento do site.

Como pode ser visto neste exemplo, a versão mobile do site do Google tem nota 60 de performance, 80 de acessibilidade, 100 de boas práticas e 85 de SEO. Se passarmos a barra de rolagem perceberemos que o Lighthouse detalha quais pontos estão bons e quais podem ser melhorados. Podemos salvar isso num pdf ou em formato json para analisar de forma minuciosa o que pode ser melhorado no nosso site. Saiba mais sobre como interpretar o relatório do Lighthouse aqui.

Imagens

O tópico de imagens aparece neste artigo dentro da seção de Tags e dentro da seção de Velocidade e Carregamento porque de fato é um elemento essencial na qualidade do SEO. Já falamos sobre a semântica das imagens ao introduzí-las no HTML, mas devemos falar também sobre o seu tamanho.
Uma das coisas que mais pesa o carregamento de um site é o tamanho das imagens e é muito importante carregar imagens o mais leves possíveis para as devidas finalidades. Se a imagem ocupa a tela inteira, se ocupa um tamanho de 200x200 pixels, tudo precisa ser levado em consideração para que nosso site não fique mais pesado do que o necessário.
O squoosh.app e o compressjpeg.com são ótimas opçãos para comprimir imagens. É importante salientar também que mobile e desktop precisam ter imagens de tamanhos diferentes, porque têm necessidades diferentes. Dica de ouro: use jpeg para imagens sem transparência, png para com transparência e SVGs para ícones, sempre que for possível. Demarque com clareza o que é ícone e o que é imagem, porque essa diferenciação é uma das que mais conta pontos no SEO dos robôs de motor de busca.

📌 Server Side Rendering (SSR)

O Server Side Rendering (SSR) é a habilidade de renderização de uma página através do servidor ao invés do browser. É o oposto the Client Side Rendering, que carrega a aplicação do lado do cliente, ou seja, no navegador do usuário.
Geralmente os frameworks the usamos, tais como o React.js e o Angular, são renderizados do lado do usuário e isso pode fazer com que o carregamento do site seja mais lento. Para lidar com esse problema podemos fazer a implementação do Next.js (no caso do React.js) e o Angular Universal (no caso de Angular). No geral, existem prós e contras em utilizarmos SSR ou CSR, mas quando estamos falando de SEO geralmente a indicação é que carreguemos a página do lado do servidor e não no do cliente.
Entretanto, recentemente parece que os crawlers (os robôs que fazem as varreduras dos motores de busca) estão aceitando e lendo JavaScript com mais facilidade, até porque as aplicações que usam frameworks como React, Angular e Vue estão cada vez mais populares.


Imagem retirada do canal Duomly

No Server Side Rendering, em ordem:

O usuário faz requisições para o website
O servidor cria arquivos HTML prontos
O navegador renderiza o HTML de forma não interativa
O navegador faz o download do JavaScript
O navegador executa o JavaScript
O website fica interativo


Imagem retirada do canal Duomly

No Cliente Side Rendering, em ordem:

O usuário faz requisições para o website
O servidor envia o arquivo HTML com os links JavaScript
O navegador faz o download do HTML
O navegador faz o download do CSS e do JavaScript
O navegador executa o framework ou a biblioteca
O navegador carrega o website

🎯 Conclusões

Em síntese, vimos neste artigo quais práticas um(a) desenvolvedor(a) deve seguir para melhorar as métricas de SEO. Muitas das coisas descritas aqui são também boas práticas para o cotidiano, como o taggeamento correto no HTML5, o uso de imagens no tamanho ideal e o cuidado no encurtamento das URLs. Pensar no SEO é também pensar em usabilidade e acessibilidade, além de desenvolver habilidades a fim de facilitar a navegação e os objetivos dos usuários.
Muitos dos assuntos tratados neste artigo foram feitos de forma superficial, então te convido a conferir o material de referência especificado abaixo. Aqui você encontrará uma curadoria no assunto de SEO para desenvolvedores em diversos âmbitos, se tornando um(a) programador(a) melhor e mais capacitado(a).

DEV Community

Guia SEO para desenvolvedores 2022

O que é SEO?

📌 HTML5

Tags

Estrutura

Cabeçalho

Rodapé

Seções

Imagens

Títulos e subtítulos

Descrição

Meta tags

Canonical

Outras tags

📌 URL

📌 Crawling

Robots.txt

Sitemap.xml

📌 Favicon

📌 Velocidade e carregamento

Imagens

📌 Server Side Rendering (SSR)

🎯 Conclusões

Referências

Top comments (0)

Read next

How reading can make you a better developer

AudiPlay : Custom HTML5 Audio Player

Setting Up a Recursive DNS Resolver Using Unbound on Docker

Creating an animated loading spinner with pure CSS