Básico de SEO para front-ends

Marcusbianco
Aug 18, 2020 · 12 min read
Básico de SEO para front-ends

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:

  1. A maior fonte de tráfego da Web no mundo é a busca orgânica.

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.

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.

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.

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.

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.

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

Referências:

sanar

Ajudando médicos a fazer a medicina melhor

sanar

Somos uma startup que atua em toda a jornada médica. Queremos ajudar médicos a fazer a medicina melhor. E você está convidado a entrar nesta jornada com a gente

Marcusbianco

Written by

Especialista em SEO otimizando desde 2008 para o público mais qualificado e os melhores resultados orgânicos!

sanar

Somos uma startup que atua em toda a jornada médica. Queremos ajudar médicos a fazer a medicina melhor. E você está convidado a entrar nesta jornada com a gente