Básico de SEO para front-ends

Published in

sanar

12 min readAug 18, 2020

Espero que você tenha chegado até aqui fazendo uma busca no Google, isso me deixaria muito feliz como profissional de SEO, mas o que me deixa mais feliz é a oportunidade de falar um pouco sobre algo que sou apaixonado e, de alguma forma, poder ajudar quem está querendo aprender.

Conhecimento é algo que não deve ficar represado. Pensando assim, e diante da busca constante por melhorias na Sanar, eu e Paula Tavares, uma super engenheira front-end, nos unimos para fazer uma apresentação interna chamada “SEO básico para desenvolvedores front-ends”.

Se você é front-end e já trabalhou em algum projeto de SEO, certamente deve estar familiarizado com alguns dos termos e conceitos, ou já deve ter passado raiva, com algum SEO (profissional) chato pedindo uma série de mudanças no seu código, ou até mesmo a implantação de algum plugin de WP, acertei?

SEO pode ser usado para nomear tanto as técnicas quanto os profissionais, beleza?

Para quem ainda não viu muita coisa e está querendo informações básicas seguem abaixo alguns conceitos básicos.

O que é SEO?

“SEO (Search Engine Optimization) é a prática de melhorar a qualidade e quantidade de tráfego de um site através dos resultados dos mecanismos de buscas orgânicas.” (Moz.com)

Eu até tentaria definir SEO com minhas palavras, mas a Moz é uma referência mundial no assunto, então deixa assim.

Porquê SEO?

Numa resposta rápida, aplicar técnicas de SEO nos seus sites, vai ajudá-los a ter melhor desempenho e serem acessados por muito mais pessoas, o que pode significar mais grana.

Gosto muito de explicar alguns porquês, relacionados ao negócio com o objetivo de dar contexto e racionalizar a coisa. Na minha opinião, isso facilita muito o entendimento e a execução.

Assim, escolhi poucas e boas razões, seguem 5:

A maior fonte de tráfego da Web no mundo é a busca orgânica.
SEO foi eleito a forma mais eficiente de aumentar a consciência (awareness), tráfego e crescimento online.
Resultados orgânicos têm mais espaço e, portanto, mais atenção na página de busca que os anúncios.
Segundo o Google, 89% dos usuários que fizeram compras B2B e 81% de B2C usaram buscadores para pesquisar por novos produtos e serviços.
O tráfego orgânico do Facebook foi reduzido a menos de 2,2% e no Instagram rumores apontam que menos de 7%.

Como o front-end afeta o SEO?

Calma! Se você começou a ler daqui, e quer saber logo como isso tudo afeta seu projeto, observe que alguns dos principais fatores de ranqueamento são impactados ou tem relação direta com o front-end como conteúdo, HTML, CSS e JS.

O front é o que, na maioria dos projetos, os buscadores têm permissão para analisar e classificar. Precisa de mais?

O uso correto da base do SEO no front-end é fundamental para obter bons resultados de tráfego orgânico e ignorar isso, para a maioria das empresas, é jogar dinheiro fora!

Deixando o “quatchá-quatchá” (gíria baiana para historinha, conversa mole, baboseira, enrolação) de lado, vamos ao que interessa!

Elementos do HTML que impactam no SEO

Sem pretensão de ensinar padre a rezar missa, a ideia aqui é mostrar pontos do HTML com impactos na otimização do site, que basicamente se resume ao uso correto da semântica, meta tags (ou meta dados, como preferir), tags canônicas, atributos de imagem e marcações de dados estruturados. Isso para ficar no básico.

Por sorte muitos trabalham com CMSs o que facilita muito o dia-a-dia, basta só garantir que o sistema entregue o básico de SEO.

De toda sorte, validar seu html e compactá-lo é bastante simples e ajuda muito!

Usar boas práticas de acessibilidade também é essencial. Num mundo cada vez mais inclusivo precisamos fazer nossa parte para ajudar usuários com dificuldades e, de quebra, se beneficiar. Isso mesmo!

Um código limpo, validado, obedecendo regras de acessibilidade permite que o robô do Google acesse mais facilmente suas informações, vasculhe e indexe suas páginas mais rápido e te classifique melhor! Ajude ele a te ajudar!

Principais meta tags para SEO

Meta tags são marcadores de HTML usados pelos buscadores para compreender melhor e organizar o conteúdo da web. A não utilização (ausência) pode implicar em problemas de indexação e ranqueamento e traz impactos ao negócio. Esses elementos devem ser exclusivos de cada página. Esqueça a utilização das mesmas em todas as páginas do site!

Title tag: um dos principais componentes de SEO da página. Deve conter a principal palavra chave da página e não deve ultrapassar 70 caracteres.
Meta description: apesar de não ser fator direto de ranqueamento, tem forte influência no comportamento do usuário (quantidade de cliques). Deve ter entre 120 e 156 caracteres.
Meta Robots: Noindex impede que os mecanismos de buscas indexem o conteúdo. Ex: landing pages, área restrita, etc. OBS: não impede o conteúdo de ser lido, apenas indexado. Nofollow informa aos buscadores que os links externos da página não devem ser considerados para fins de SEO. Não transferem parte de seu SEO para o destino do link. Ex. Links de referência no Wikipedia. Se você está com cara de interrogação se perguntando o que é, basicamente, o site que coloca o link, se compromete com o que está recebendo, em termos de autoridade. Imagine indicar alguém pra uma vaga no trampo, sem conhecer direito, se a pessoa der uma mancada, pode pegar mal. É bem parecido.

Bônus:

Open Graph para FB e Twitter: não são SEO mais são importantes para favorecer o compartilhamento das páginas do site. São basicamente 3: title, description e image, e ajudam o compartilhamento, tornando as informações mais atrativas visualmente.
hreflang: é uma tag que sinaliza para o Google que o idioma apontado por ela deve ser considerado em um determinado país. Só faz sentido em projetos internacionais.

Headings, os cabeçalhos esquecidos…

Os cabeçalhos são estruturas fundamentais para organizar o texto, até aqui sem novidade. O problema está no mal uso das tags de headings. Por achar que ninguém usa, muitos devs as esquecem.

Os buscadores, ou search engines, usam as tags de cabeçalho para compreender a estrutura e conteúdo das páginas de um site. Já usuários humanos “escaneiam” a página pelos títulos e subtítulos antes da leitura, buscando algo que lhes interesse. Seu uso correto ajuda bastante a localizar a informação desejada no conteúdo. Muitos usuários abandonam a página quando a informação desejada é difícil de encontrar, afinal, são só dois cliques de distância para seu concorrente!

Tudo bem que muitas vezes não é o dev que insere o conteúdo da página, mas cabe a ele configurar corretamente o código evitando problemas. Ao trabalhar com componentização, preste atenção se atribuiu a todos os títulos a tag H1, assim, vai evitar que numa página de lista ou na home, todos os títulos fiquem com H1.

Como prêmio, um conteúdo bem estruturado aumenta as chances de featured snippets, que ocupam mais espaço da SERP (search engine result page, ou página de resultado de buscas) e empurram o 2º colocado mais para baixo.

Sim, isso mesmo, até esta data, cada página de resultado exibe apenas 1 featured snippet, no primeiro lugar.

Os headings e suas principais funções:

H1 é o título principal. Cada página não deve conter mais de um, podendo, caso contrário, atrapalhar no ranqueamento.
H2 pode ser usado mais de uma vez e deve ser usado nos subtítulos da página.
H3, 4, 5 e 6 são usados para os subníveis de títulos conforme a profundidade que o texto exige. Também podem aparecer mais de uma vez na estrutura.

Importante:

Os cabeçalhos não são perda de tempo, nem apenas marcação de CSS. É preciso obedecer a semântica e hierarquia do HTML. Só use h3 depois de usar h2 e assim sucessivamente.

Uso da canonical tag no SEO

Canonical tag é uma indicação para os buscadores deu que aquele link é o que deve ser considerado, caso seja diferente da URL da página. É uma marcação que ajuda a tratar conteúdos muito parecidos, ou até mesmo duplicados, evitando esse tipo de problema.

Basicamente, páginas muito semelhantes devem ter a tag canônica da principal página sobre o tema, fazendo com que essa se destaque nas buscas. Conteúdo duplicado é um dos grandes desafios do SEO e essa é uma das melhores maneiras de tratá-lo.

Muitas vezes os devs não se envolvem com conteúdo, mas esse é um recurso fundamental de SEO, principalmente quando o projeto é grande.

Ela deve ser inserida dentro do head da página e não pode usar caminhos relativos, a URL tem que ser completa, incluindo o https (se você ainda não usa SSL, ta correndo sérios riscos de ter cada vez menos acessos).

Schema markup

É o padrão escolhido pelo Google para adicionar dados estruturados ao html de um site, permitindo uma melhor compreensão, indexação e classificação de uma página. Existem categorias e informações específicas a serem observados na aplicação dos dados estruturados. A documentação está no site Schema.

A marcação de dados pode ser inserida no html, por Micro Data ou via JSON, e a forma de inserção não vai fazer muita diferença.

Além de facilitar a indexação, ajudam a gerar os rich e featured snippets. Seguem alguns exemplos:

Dicas de CSS para SEO

O CSS é o arquivo que dá a formatação do html, mas desde que os sites responsivos tornaram-se os mais acessados, sua importância, já grande, tomou proporções ainda maiores.

Precisamos ainda discutir a importância do CSS num mundo de sites responsivos e de indexação mobile como novo padrão do Google?

Não estou afirmando que é impossível fazer um site mobile sem CSS, mas responsivo, funcionando bem é muito complicado.

Aqui a ideia é ver os impactos do CSS em SEO, basicamente na velocidade de carregamento da página. Observe o CSS que bloqueia a renderização, e se possível elimine ele, senão deixe de forma que ele não atrase o carregamento da página.

Nem é preciso dizer que é crucial compactar o CSS, usar a menor quantidade de arquivos possível e não bloquear a renderização da página. Existe ainda a possibilidade de usar pequenos pedaços de CSS inline:

Velocidade de carregamento e SEO

Uma página de carregamento lento significa menos páginas “crawleadas” pelos buscadores, devido ao tempo dedicado a isso para cada site. Indexação ruim é um problema de SEO, de UX e de negócio.

Quantas vezes você xingou uma página lenta ao carregar?

Quando há concorrência, não tenha dúvida que o site que carregar mais rápido vai ter destaque e provavelmente um ranking melhor que o lento, sem falar no potencial de gerar mais receitas, se for um e-commerce.

No que diz respeito à experiência do usuário, páginas que levam mais tempo para carregar tendem a ter maior taxa de rejeição e menor tempo médio de permanência, além de taxas de conversão menores. Quanto mais lenta, maior o impacto negativo no negócio.

Algumas informações sobre velocidade de carregamento e SEO

Velocidade de carregamento da página é um fator de rankeamento confirmado pelo Google.
Quanto mais lenta a página, menos usuários e lucro você terá. “Time is Money!” nunca foi tão verdadeiro.
Em estudo realizado pela Amazon, uma diferença de apenas 0,1s, foi suficiente para reduzir suas vendas em 1%.
Segundo o Google 53% dos usuários abandonariam o site se demorasse mais de 3 segundos para carregar.

Melhore o Javascript e o SEO

Como tecnologia web a importância do Javascript pode ser determinada pelo seu uso. Hoje, cerca de 94,5% dos sites usam JS. Dificilmente existe um site responsivo, com boa usabilidade sem JS.

Do ponto de vista do marketing é também fundamental, uma vez que as principais tags de web analytics são JS. Google Analytics e Facebook Pixel são algumas delas.

Mesmo com tanta importância, é preciso usar com cautela, principalmente evitando scripts que bloqueiam a renderização e atrasam o carregamento da página. Não esqueça de minificar o JS e parsear o que puder de maneira a evitar atrasos desnecessários no carregamento. Lazy loading ajuda muito também!

Não vamos abordar Frameworks JS aqui, mas vou deixar uma afirmação: para SEO, renderizar no servidor é melhor do que no cliente (browser).

Outra dica importante é que o robô do Google não realiza ações como scroll de tela, por exemplo. Portanto, as páginas que dependem de ações como cliques ou scroll para carregar conteúdo podem ter a indexação prejudicada!

Ferramentas e extensões de SEO para ajudar o front-end

Um post de dicas precisa ter algumas ferramentas e extensões, afinal precisamos sair apenas da teoria e colocar a mão na massa!

Nesse cenário existem milhares de ferramentas, sem exagero, mas aqui vou colocar algumas que literalmente uso todos os dias. Se ligue!

Google Search Console (GSC): Ferramenta do Google que monitora elementos como indexação do site, indicadores de desempenho do site quanto a velocidade, posição nas páginas de resultado de buscas, impressões, cliques, links externos, featured snippets, problemas mobile, etc. É essencial para todo webmaster.
Google Tag Manager (GTM): Ferramenta do Google para gerenciar tags de Javascript, permitindo o gerenciamento destas sem a interferência do desenvolvedor. É muito importante e poderosa, mas nas mãos erradas pode dar dor de cabeça. Cuidado com os usuários!
GTMetrix: É uma ferramenta gratuita para verificar velocidade de carregamento da página, dá para simular carregamento em diferentes tipos de conexão e locais. A ferramenta ainda mostra o que é necessário corrigir de forma prioritária. É similar ao Pingdom Tools: Website Speed Test, também grátis.
Schema Markup Generator (JSON-LD): Excelente para gerar marcação de dados estruturados via JSON (jura?). Com poucos inputs dá para gerar a marcação de sua página e inserir a marcação via GTM.
Ferramenta de teste de dados estruturados: Ferramenta do Google para testar os dados estruturados, para quem não tem acesso ao GSC.
Tag assistant: extensão que exibe as tags carregadas na página. Permite ainda avaliar o funcionamento delas.
SEOQuake: extensão, permite um diagnóstico rápido da página, avaliando os principais elementos do front citados acima.

Concluindo as dicas básicas de SEO para Front-Ends

Não sei se ficou claro ainda para todo mundo, mas SEO e front-end estão tão conectados que é praticamente impossível separar uma coisa da outra.

É como acarajé e coca-cola, queijo e goiabada, São Cosme e Damião, cinema e pipoca! Tudo bem também se você discordar! Não vamos brigar!

Novamente, a ideia aqui é ajudar com informações simples, fáceis de aplicar e com um bom resultado prático.

Mas uma coisa que poucos gostam de falar é que os resultados não aparecem da noite pro dia, o que pode ser um pouco frustrante pros ansiosos.

A depender do mercado isso pode demorar mais ou menos, entre 3 meses a um ano para que os bons resultados aparecerem. Resultados orgânicos não são algo pra quem tem pressa, mas são bastante compensatórios.

E para finalizar, vou deixar com vocês essa frase de um cara que sempre foi uma inspiração de SEO para mim:

“SEO não é mais apenas um cargo, tornou-se parte da descrição de todos” Rand Fishkin