SEO técnico na prática: estudo de caso do site Novas árvores por aí
Tags: seo, webdev, braziliandevs, tutorial
Published: 2024-05-21 00:12:46

Sejam bem-vindos a mais um post sobre SEO! Anteriormente eu expliquei alguns conceitos sobre o que é o tal do _Search Engine Optimization_ e hoje quis fazer algo mais "mão na massa".

Muito do conteúdo que vejo é teórico, então decidi utilizar um site real para fazer análises e colocar em prática aquilo que aprendemos.

O site que vamos analisar é o ["Novas árvores por aí"](https://novasarvoresporai.com.br/). Uma ONG que ajuda a repaginar cidades tornando-as mais verdes.

Segundo o próprio site:

> O Novas Árvores por Aí nasceu para resgatar o verde das matas, há muito trocado pela paisagem cinzenta das grandes cidades. Idealizado pelo ambientalista Nik Sabey, promove desde o plantio de árvores calçadas ao cultivo de pequenos bosques urbanos. Atua também com projetos de paisagismo, jardins de chuva, palestras, cursos, e afins, buscando sempre o resgate da nossa biodiversidade.
> O Novas é uma iniciativa que visa incentivar, fomentar, promover e instruir o plantio de árvores nativas.

Eu não sou o mantenedor do site da organização, portanto não conseguirei modificar e ver os resultados das mudanças que estarei sugerindo aqui. Entretanto, pedi permissão para o dono do projeto através do Instagram e ele permitiu que eu fizesse essa análise.

## O que é SEO on-page?

SEO on-page é um conjunto de técnicas e estruturas que executamos em nossas páginas para ajudar o robô dos mecanismos de pesquisas (Google, Bing, DuckDuckGo, etc) a trilharem seu caminho com tranquilidade e mostrarem nosso site em seus resultados.

## Análise do SEO on-page

Para fazer a análise de SEO on-page do Novas árvores por aí vamos utilizar diversas ferramentas. Elas vão servir para apontar as falhas e sugerir mudanças que podemos fazer para melhorar a estrutura da nossa página perante os robôs.

### Busca no Google

A primeira ferramenta que podemos usar é o próprio Google. Uma simples busca já revela muita coisa. Ao pesquisarmos o nome da organização temos esse resultado:

![Resultado da busca do site Novas Árvores por Aí no Google](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vi9py94nxfeg8s7025et.png)

Nota-se que não é um dos melhores resultados. Não temos um ícone que faça o resultado se destacar, não temos a breve descrição do que aquele site representa e até o título está reduzido. Somente nessa primeira pesquisa, notamos 3 pontos de melhoras:

- Adicionar [metatag de description](https://developers.google.com/search/docs/appearance/snippet?hl=pt-br);
- Verificar o porquê o robô do Google não está mostrando o <title> completo do site (a tag está com o conteúdo 'Novas Árvores por Aí | Nasceu para resgatar o verde das matas', porém o resultado só mostra a primeira parte)
- Adicionar a tag que aponta para o favicon.

### Análise no Lighthouse

Em seguida, vamos para a ferramenta [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=pt-br), que possui uma opção de análise de SEO:

![Análise de SEO do site Novas Árvores por Aí no Lighthouse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msdcji0v3jftg3jdbhx3.png)

Além da falta de metatag de description, a extensão também apontou que o site está com uma metatag de robots para `noindex` e o arquivo robots.txt também. Ou seja, está dizendo para os robôs não indexarem aquela página nos resultados de pesquisa. Apesar da página ainda aparecer, isso é algo que prejudica o desempenho do site na listagem. Tanto que se buscarmos por "ong árvores", "ong novas árvores" ou "ong árvores por aí", que remetem à ong em questão, o site sequer aparece. Várias outras ficam na frente, ou, ainda, as próprias redes sociais da Novas Árvores por Aí se destacam, ignorando a existência do site. Logo, temos mais um a fazer:

- Alterar valor de metatag robots de "noindex" para "index";
- Remover valor 'noindex' do arquivo robots.txt.

### Análise na Detailed SEO

Agora vamos utilizar a extensão [Detailead SEO](https://chromewebstore.google.com/detail/detailed-seo-extension/pfjdepjjfjjahkjfpkcgfmfhmnakjfba?pli=1) para verificar o que mais precisamos ajustar em nosso site.

Em primeiro momento, temos essa visão geral do site:

![Análise do site pela extensão Detailed SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1buxsolmhahcrfngdpqh.png)

O title está tudo certo, mas, conforme vimos previamente, estamos sem descrição. Além disso, nossa url está como 'not indexable', mostrando mais uma vez a ausência do valor 'index' na meta tag de robots. Visto que já tinhamos isso em nossa lista, seguimos.

![Análise do site pela extensão Detailed SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fp7t8iuyn74qhmfe41x.png)

Agora temos novos pontos de atenção: não possuímos `meta name="keywords"` que definiria nossas palavras-chave e o html do site está na linguagem en-US, sendo que ele é do Brasil! Logo, acrescentamos em nossa lista:

- Adicionar meta tag de keywords com as palavras-chave referentes ao nosso site; (ex: árvores, ong, reflorestamento).
- Adicionar propriedade lang='pt-br' na tag `<html>` (importante para motores de busca e leitores de acessibilidade).

Agora, olhemos os headings da página:

![Aba de Headings pela extensão Detailed SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd3s8etpb1o64rkxkdn5.png)

Temos diversos headings iguais, o que o mecanismo de busca pode considerar spam; além disso, a ordem dos headings está invertida (em teoria, o h1 deveria ser o primeiro na página). Outro ponto importante é que o h1 está sendo usado lá embaixo, na terceira dobra da página, com algo que não é o título principal e sim uma seção secundária da página. Com isso, adicionamos em nossa lista:

- Reorganizar os títulos e remover títulos duplicados.

Agora, na aba 'Images' da extensão Detailed SEO temos uma informação importante: muitas imagens estão sem título e sem descrição alternativa. Ambos são importantes para a acessibilidade de nosso site. 

![Aba de Images pela extensão Detailed SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qleld3rkgfjq0bp733ir.png)

Logo, mais uma ação:

- Adicionar título e alt text nas imagens.

Lembrando que se uma imagem tem apenas valor estético, ela não necessariamente precisa de um texto descritivo. Mas, se fizer parte de algum contexto, se ela fornece ao usuário alguma informação, o texto alternativo é essencial.

Já na aba 'Schema', vemos os dados estruturados da página. E logo vemos que não há nenhum!

![Aba de dados estruturados da extensão Detailed SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qof1wx50brtzh9ujyow0.png)

Eu já fiz uma outra [publicação explicando o que são, para que servem e como criar dados estruturados em sua página](https://dev.to/gabrielgomeso/melhore-os-resultados-de-pesquisa-do-seu-site-com-dados-estruturados-a81), portanto, não irei aprofundar esse assunto aqui. Porém, é válido colocar em nossa lista:

- Adicionar dados estruturados de [Organização](https://schema.org/Organization) do tipo '[NGO](https://schema.org/NGO)' (organização não governamental e que não visa lucro).

## Ações de melhoria

Com tudo isso exposto, podemos agrupar os problemas que observamos e temos as seguintes ações:

- Adicionar [metatag de description](https://developers.google.com/search/docs/appearance/snippet?hl=pt-br);
- Verificar o porquê o robô do Google não está mostrando o <title> completo do site (a tag está com o conteúdo 'Novas Árvores por Aí | Nasceu para resgatar o verde das matas', porém o resultado só mostra a primeira parte);
- Adicionar a tag que aponta para o favicon;
- Alterar valor de metatag robots de "noindex" para "index";
- Remover valor 'noindex' do arquivo robots.txt;
- Adicionar meta tag de keywords com as palavras-chave referentes ao nosso site; (ex: árvores, ong, reflorestamento);
- Adicionar propriedade lang='pt-br' na tag `<html>` (importante para motores de busca e leitores de acessibilidade);
- Reorganizar os títulos e remover títulos duplicados;
- Adicionar título e alt text nas imagens;
- Adicionar dados estruturados de [Organização](https://schema.org/Organization) do tipo '[NGO](https://schema.org/NGO)' (organização não governamental e que não visa lucro).

Tendo isso em mente, vem a pergunta: "Depois que eu resolver isso, quanto tempo demora para que a minha página apareça no primeiro resultado de todas as pesquisas no Google?". E, infelizmente, não é assim que funciona.
SEO é um grupo de técnicas para melhorar o modo que os robôs veem e navegam pela nossa página. Mas, não necessariamente, isso significa que nosso site vai se tornar o primeiro nas buscas apenas por termos ajustado tudo de acordo. Esse é, na verdade, o primeiro passo de muitos. Temos que nos perguntar diversas outras coisas: como está a performance do nosso site? Nós estamos respondendo as perguntas que o nosso usuário tem quando ele entra em nosso site? As informações do nosso site estão atualizadas?

O SEO on-page tratado aqui é o primeiro passo. Temos também o SEO off-page (linkagem de outros sites para o seu, marketing, etc), o conteúdo e relevância da nossa página e/ou produto para nos preocupar. E isso vai muito além de decisões de desenvolvimento/engenharia.

No fim, não é atoa que exista toda uma área para análise de SEO e métricas através de analytics, mas esse são pontos que tratamos conforme vamos nos aprofundando nessa matéria.
Essas são apenas algumas ferramentas e práticas que podemos utilizar para ajustar nossos sites. Caso você se interesse mais, recomendo acompanhar o conteúdo do blog de [Central de Pesquisa do Google ]( https://developers.google.com/search/blog) e empresas especializadas na área, como MOZ e Semrush, que estão sempre ensinando algo ou informando dados sobre as ferramentas de pesquisa.

Meus agradecimentos à ONG Novas Árvores por Aí que me permitiu fazer esse post (sigam eles no [Instagram](https://www.instagram.com/novasarvoresporai/)); e obrigado para quem leu até aqui, até a próxima!

P.S: caso você encontre qualquer erro ou tenha uma sugestão de como melhorar essa publicação fique à vontade para me mandar uma mensagem ou comentar abaixo. Críticas são sempre bem-vindas. :)