Melhores práticas de SEO para desenvolvedores: coloque suas habilidades para trabalhar
Tags: programming, braziliandevs
Published: 2023-01-25 17:52:44

Este artigo é para desenvolvedores que desejam levar em consideração os recursos de promoção do site e evitar refazer as coisas após o final do desenvolvimento.


Tradicionalmente, a equipe de desenvolvimento discute e cria a arquitetura e a lógica de negócios de um projeto. Mas a promoção do site é adiada para a última etapa e é tratada pela equipe de SEO. Essa abordagem para a construção de um projeto pode ter consequências fatais. 

Na fase de produção ou mesmo após o deploy, muitas vezes é necessário fazer edições no projeto. Essas edições podem incluir alterações em **metatags** e atributos para links, bem como melhorias na estrutura do link.


![Gráfico demonstrando o SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjnxgm7h5qmuwlp7rvrc.png)

Preparei uma lista de verificação com as principais coisas que você precisa considerar na fase de desenvolvimento.

## Títulos e meta descrições

Tags de título e descrições meta são bits de código HTML no header de uma página web. Eles ajudam os mecanismos de pesquisa a entender o conteúdo de uma página.

```jsx
<head>
    <title>
       O que os desenvolvedores precisam saber sobre SEO
    </title>

    <meta name="description" content="Melhores práticas de SEO para desenvolvedores: coloque suas habilidades para trabalhar.">
</head>
```

Você pode pensar: _O que mais há para acrescentar?_

Para começar, você vê snippets nos resultados do mecanismo de pesquisa. Os snippets geralmente contêm um título e uma descrição.

Geralmente, mas nem sempre. Às vezes, quando um robô de pesquisa identifica um título como irrelevante para o texto da página, o snippet pode ser gerado automaticamente com base no conteúdo da página.

À primeira vista, esse é um problema para redatores e especialistas em SEO, e não para desenvolvedores. No entanto, há casos em que os desenvolvedores não devem apenas adicionar a tag `<title>` à página, mas também gerar um título e uma descrição automaticamente no back-end, dependendo da lógica do projeto.

É melhor que os desenvolvedores gerem títulos e descrições exclusivos. Mas isso não garante que eles aparecerão no snippet. Por exemplo, se os títulos diferirem apenas em uma palavra, há uma chance de que o robô de busca os marque como irrelevantes.

Exemplo:

> As melhores confeitarias de Belo Horizonte
As melhores confeitarias em Rio de Janeiro
As melhores confeitarias de São Paulo

## Meta tags e microdados

### Metatags

Meta tags são tags HTML ocultas que são colocadas no `<head>` de suas páginas web. As tags HTML fornecem informações sobre seu site ou página Web para os mecanismos de pesquisa, como título, descrição, palavras-chave, robôs, direitos autorais e idioma. Os mecanismos de pesquisa geralmente indexam metatags para usá-los nos resultados da pesquisa. Sem meta tags, seu site não pode alcançar os leitores organicamente quando eles digitam algo diretamente em um mecanismo de pesquisa.

Para gerar meta tags corretamente, você pode usar geradores de meta tags, como o [Free Meta Tag Generator](https://www.freemetataggenerator.com/).


### microdados

Microdados é a chamada linguagem única que é compreendida e interpretada pelos robôs de busca do Google, Yandex e Yahoo. Os mecanismos de pesquisa criaram essa linguagem em 2011. Com microdados, você pode mostrar aos robôs de pesquisa que um texto específico ou outros elementos em uma página são importantes e pertencem a um determinado tipo de dados (os robôs de pesquisa não podem interpretar o significado do conteúdo e estabelecer prioridades).

Por exemplo, a página Sobre do seu site ou a página Contatos deve usar microdados para marcar o bloco com detalhes de contato, caso em que um robô de busca mostrará “detalhes de contato da empresa X” em resposta à consulta de um usuário.

O Google lançou uma [ferramenta de teste de dados estruturados(https://developers.google.com/search/docs/appearance/structured-data?hl=pt-br) que ajuda você a verificar como os dados do seu site estão estruturados.

### O arquivo robots.txt

Robots.txt é um arquivo de texto que você coloca em seu site para informar aos robôs de pesquisa quais páginas eles podem indexar e quais você gostaria que eles não indexassem.

Você não precisa usar um arquivo robots.txt. Caso contrário, todas as páginas do seu site estarão disponíveis para os robôs de busca.

Você deve ter em mente, porém, que se você fechar certas páginas do seu site para pesquisar rastreadores, elas ainda poderão ser indexadas se os robôs de pesquisa encontrarem links para essas páginas em outros sites ou em páginas do seu site que estão abertas para um rastreador de pesquisa. Para realmente impedir que uma URL seja indexada, você pode usar a diretiva "noindex".

```jsx
<meta name="robots" content="noindex">
```

O arquivo robots.txt sempre deve estar na raiz do seu domínio. Robots.txt também permite que você diga aos mecanismos de busca onde encontrar o mapa do site.

### Sitemaps

Um mapa do site é um arquivo XML, em seu site que informa aos indexadores de mecanismos de pesquisa com que frequência suas páginas mudam e a importância de determinadas páginas em relação a outras páginas em seu site. Essas informações ajudam os mecanismos de pesquisa a indexar seu site.


![Imagem de um mapa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kd4ae5uug3lrjm5xpr9.png)

Os mecanismos de pesquisa leem o mapa do site para rastrear seu site de maneira mais inteligente. No mapa do site, você pode fornecer informações sobre arquivos que considera importantes, quando uma página foi atualizada pela última vez, com que frequência uma página é atualizada e assim por diante.

Um mapa do site não é obrigatório. No entanto, preste atenção quando seu site tiver um grande arquivo de páginas de conteúdo isoladas ou mal vinculadas umas às outras.

Se o seu site contém um formulário de pesquisa ou filtros, muitas vezes você pode acessar as páginas de resultados apenas por meio deste formulário. Geralmente não há links que o direcionem para essas páginas. Se você considera essas páginas importantes e deseja que os mecanismos de pesquisa as indexem, adicione links aos resultados da página em `sitemap.xml`.

### Nofollow e noindex

Há também tags como **nofollow** e **noindex**. Elas fazem parte do Robot Exclusion Protocol (REP) que controla como as páginas web são indexadas.

Nofollow não permite que um robô de busca siga um link em seu site. Nofollow mostra que os sistemas de pesquisa não devem seguir os links em uma página e que não há necessidade de verificar as URLs correspondentes. Isso significa que os mecanismos de pesquisa não enviam nem o Pagerank nem o texto do link.

Por exemplo, `<meta name="robots" content="nofollow" />` ou `<a hrefs=”https:// www.examples.com” rel=”nofollow”> `

Você pode configurar sua página de forma que todos os links de saída sejam nofollow e não carreguem o peso da página. Mas quando você precisa de um link dofollow, pode inseri-lo manualmente por meio do seu **CMS**. Alguns CMSs são capazes de fazer isso automaticamente.

Noindex impede que as páginas sejam indexadas. Essa meta tag pode ser adicionada ao código inicial da página HTML e informa aos mecanismos de pesquisa para não indexar uma página específica nos resultados da pesquisa.

Adicione "noindex" ao código HTML para transformar links normais em links noindex:

```jsx
<a href="http://www.example.com" rel="noindex">Link text</a>
```

### Links canônicos

Um link canônico é um elemento HTML que ajuda os webmasters a evitar problemas de conteúdo duplicado.

Muitas vezes há situações em que o mesmo conteúdo está disponível em um site por meio de vários links. No estágio de desenvolvimento, você pode resolver isso se já souber que algumas páginas podem se relacionar a diferentes categorias. Por exemplo, em um site de comércio eletrônico, os produtos podem ser apresentados em várias categorias. A presença de conteúdo duplicado em seu site tem uma influência ruim no ranking, já que os mecanismos de busca não sabem qual versão classificar para os resultados da pesquisa.

A solução para esse problema é marcar todas as páginas duplicadas com o elemento de link rel="canonical".

```jsx
<link rel="canonical" href="http://example.com/origin-content/" />
```

### Imagens

O texto Alt, também conhecido como atributo `alt`, descrição `alt` ou tag `alt`, é usado no código HTML para descrever os elementos da interface e as imagens na página. Você precisa dar a cada imagem uma tag `alt` compatível com SEO.

Você pode escrever texto alternativo para imagens automaticamente ou manualmente.

O texto alternativo é usado:

- Tornar a internet mais acessível, por exemplo, para deficientes visuais;
- Se a imagem do arquivo não puder ser carregada;
- Garantir uma melhor descrição das imagens para os robôs de busca, ajudando-os a indexar as imagens corretamente.

#### Práticas recomendadas de texto alternativo:

- Use assuntos e contexto específicos ao escrever o texto alternativo.
- Deixe seu texto alternativo não ter mais de 125 caracteres.
- Não comece o texto alternativo com “imagem de…” ou “imagem de…”
- Use algumas palavras-chave importantes, mas com moderação.
- Não adicione sua palavra-chave a cada texto alternativo.
- Se uma imagem não tiver nenhum valor, ela deve residir no CSS, não no HTML.
- Use a tag `longdesc=""` para imagens mais complexas que requerem descrições mais longas.

Vou demonstrar um exemplo bom e ruim de um texto alternativo:


![Imagem de uma mulher](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kv4b76bsoh8my1xpcqb.png)

**Ruim:** `alt="Mulher apontando para a tela do computador de uma pessoa."`

**Bom:** `alt="Professor de uma escola de negócios apontando para a tela do computador de uma aluna."`

### Títulos H1, H2, H3

Nesta seção, veremos as meta tags H1, H2 e H3 (H significa cabeçalho) e como elas influenciam a otimização do seu site. Se essas meta tags forem colocadas incorretamente em sua página, será difícil para os mecanismos de pesquisa receber informações sobre seu site. Os títulos garantem a classificação do seu site e ordenam o código HTML da sua página.

Cada página do seu site deve conter apenas um cabeçalho H1. Deve ser diferente de todos os outros títulos nas páginas do seu site. Os cabeçalhos H2 e H3 não são obrigatórios, mas se você os usar, eles não devem duplicar o conteúdo. Você pode usar alguns títulos H2 e H3 em uma página.

Tenha em mente que:

1. Os títulos devem incluir uma palavra-chave para classificar seu site mais alto nos resultados da pesquisa.

2. Cada título deve ser único. Se eles se repetirem, um mecanismo de pesquisa pode não classificá-los.

3. Se o cabeçalho estiver próximo ao código HTML, seu valor aumentará em relação a todos os outros elementos.

4. A palavra-chave deve estar o mais próximo possível do início do título.

5. O comprimento de um título não deve ter mais de 60 caracteres.

6. Não deve haver erros gramaticais no título.

7. Os cabeçalhos são verificados para reotimização, portanto, não devem ser sobrecarregados com palavras-chave.

A otimização bem-sucedida do seu site depende de como as tags são escritas. Portanto, você deve manter as seguintes regras em mente ao escrever tags:

- Mantenha a hierarquia de tags (H1 deve ser maior do que todos os outros títulos).
- Mantenha a hierarquia das fontes (quanto maior o cabeçalho, maior a fonte).
- Atenha-se aos elementos de texto nos títulos e não vincule a outras fontes de um título.
- Não abuse dos cabeçalhos H1, H2 e H3. Os robôs de busca podem pensar que sua página é spam se você usar um grande número de cabeçalhos para destacar partes importantes de sua página.
- Você pode usar uma imagem como título. Por exemplo, você pode usar uma imagem com seu logotipo otimizado de acordo.

### Redirecionamentos

Um redirecionamento é uma maneira de enviar usuários e mecanismos de pesquisa para uma URL diferente daquela solicitada originalmente.

Os redirecionamentos não têm uma má influência no SEO. No entanto, uma implementação ruim pode causar todos os tipos de problemas, desde a perda de classificação da página até a perda de tráfego.

Os redirecionamentos são necessários quando você exclui uma postagem ou altera sua estrutura de URL.

### Velocidade da página

A velocidade da página é o tempo que leva para carregar o conteúdo do seu site. Você pode verificar a velocidade de carregamento do seu site no PageSpeed ​​Insights do Google. Você também pode tentar otimizar o tempo de carregamento.

A velocidade da página sinaliza a classificação da página. Uma velocidade de página lenta significa que os mecanismos de pesquisa podem verificar um número menor de páginas usando o orçamento de rastreamento fornecido, o que pode influenciar negativamente sua indexação.

A velocidade da página também é importante para os usuários. Como regra, páginas com tempo de carregamento longo tendem a ser abandonadas mais rapidamente, diminuindo o tempo médio em uma página web. Tempos de carregamento de página elevados têm uma influência negativa nas conversões.

O que você pode fazer para aumentar a velocidade da página?

1. Ative a compactação de arquivos (de preferência mantendo a qualidade).

2. Reduza CSS, JavaScript e HTML.

3. Reduzir redirecionamentos.

4. Remova o JavaScript de bloqueio de renderização.

5. Aproveite o cache do navegador.

6. Melhore os tempos de resposta do servidor.

7. Use uma rede de distribuição de conteúdo.

8. Otimizar imagens.

### URL

Uma URL é um texto legível por humanos que substitui os números (endereços IP) que os computadores usam para se comunicar com servidores e identificar a estrutura de arquivos em um site. Uma URL consiste em um protocolo, nome de domínio e caminho e tem o seguinte formato básico: `protocol://domain-name.top-level-domain/path`.

O que você deve saber sobre URLs:

- Uma URL mostra a estrutura do site.

- Somente letras minúsculas são usadas em URLs legíveis por humanos.

- Uma URL legível por humanos precisa ter menos de 90 caracteres.

Você precisa criar URLs amigáveis ​​para SEO (links de sites). Mantenha suas URLs curtas e use o termo de pesquisa para o qual deseja classificar em seu caminho. As URLs precisam mudar e ser relevantes em todas as páginas.

## Você fez de tudo, mas não vai funcionar

Talvez você tenha adicionado ou alterado um título e meta descrição de acordo com todas as recomendações de especialistas em SEO, mas o snippet não mudou. Ou você adicionou uma nova página ao mapa do site, mas ela não aparece nos resultados da pesquisa.

Isso acontece quando você implantou seu site para produção e um mecanismo de pesquisa já indexou o conteúdo. Depois disso, você assumiu a otimização, adicionou metatags e atualizou o site de produção. Feito isso, você precisa esperar até que o mecanismo de pesquisa indexe seu site novamente. A indexação do Google pode ser iniciada a partir do console. 

## Conclusão

Espero que minhas recomendações tenham sido úteis, especialmente quando você está apenas começando seu projeto, e o ajude a economizar muito tempo mudando a lógica na hora de promover seu site.