SEO On-Page – Sem Mistérios! O que é? Por que fazer? Como fazer?

Lighthouse

O Lighthouse é uma ferramenta automatizada que faz um diagnóstico bem completo de diversos fatores importantes para otimização de sites e apps web. Você pode utilizar ele como uma extensão do Google Chrome ou na linha de comando.

O Lighthouse disponibiliza 5 relatórios de diagnósticos de avaliação de métricas importantes além de sugestões de melhorias para otimização.

Diagnóstico de Performance

O Diagnóstico de Performance tem como objetivo avaliar métricas de desempenho de carregamento da página. Vamos ver as principais métricas e quais as dicas disponibilizadas pelo Lighthouse para melhorias de otimização.

Primeira pintura com conteúdo (FCP)

Sabe aquele tempo de carregamento do site que ficamos aguardando até visualizar algum elemento visual da página? Esse tempo pode ser demorado e geralmente causa uma sensação frustrante no processo de navegação. A métrica FCP avalia a velocidade de carregamento percebida.

As sugestões do Google para reduzir o FCP são as seguinte:

• Eliminar recursos de bloqueio de renderização
• Minify CSS
• Remover CSS não utilizado
• Pré-conectar às origens necessárias
• Reduzir tempos de resposta do servidor (TTFB)
• Evitar redirecionamentos de várias páginas
• Pré-carregar solicitações de chave
• Evite enormes cargas de rede
• Servir ativos estáticos com uma política de cache eficiente
• Evite um tamanho DOM excessivo
• Minimize a profundidade crítica da solicitação
• Garantir que o texto permaneça visível durante o carregamento da fonte da web
• Mantenha a contagem de pedidos baixa e os tamanhos de transferência pequenos

Maior pintura com conteúdo (LCP)

A LCP mede o tempo ou a velocidade de carregamento percebida do maior elemento da página, quando esse elemento é visível para o usuário. Cada página tem um elemento que pode ser utilizado para medir a LCP.

Elementos utilizados para medir a LCP:

• <img> elementos
• elementos dentro de um <svg> elemento
• <video width="300" height="150"> elementos (a imagem do pôster é usada)
• Um elemento com uma imagem de plano de fundo carregada através da url()função (em oposição a um gradiente CSS)
• Elementos em nível de bloco que contém nós de texto ou outros elementos de texto em nível de linha filho.

Por experiência testando diversas configurações, uso de imagens e blocos de texto pude constatar que utilizar imagens podem gerar uma sobrecarga no carregamento. Por isso procuro sempre que possível utilizar texto estilizado para criar um layout moderno e ao mesmo tempos mais leve.

Como melhorar o LCP:

• Aplique carregamento instantâneo com o padrão PRPL
• Otimizando o caminho de renderização crítica
• Otimize seu CSS
• Otimize suas imagens
• Otimizar fontes da web
• Otimize seu JavaScript (para sites renderizados pelo cliente)

Atraso na primeira entrada (FID)

A métrica FID mede o tempo de resposta do navegador em relação a uma interação do usuário. Como o clique do mouse em um botão ou link e controles criados em javascript por exemplo.

A expectativa que temos quando acessamos uma página é interagir com a mesma e quando a página não responde a interação nos sentimos frustrados e em muitos casos até mesmo desistimos da navegação. Por isso a métrica FID é uma boa maneira de avaliarmos a experiência interativa do usuário com a página.

Muitas vezes a demora do navegador responder a uma interação do usuário acontece por que o navegador pode estar ocupado fazendo outras coisas como analisando e executando arquivos javascript ou css por exemplo.

Por isso é importante reduzir a quantidade de arquivos javascript e css solicitados ao servidor para renderizar a página. Quanto mais arquivos solicitados mais tempo de análise e execução será necessária do navegador e com isso mais tempo de demora na resposta.

Como melhorar o FID:

• Reduza o impacto do código de terceiros
• Reduza o tempo de execução do JavaScript
• Minimize o trabalho do encadeamento principal
• Mantenha a contagem de pedidos baixa e os tamanhos de transferência pequenos

Tempo para interatividade (TTI)

O TTI mede o tempo de carregamento da página até ela carregar os principais recursos de interação e ficar disponível para interação dos usuários.

Como melhorar o TTI:

• Minify JavaScript
• Pré-conectar às origens necessárias
• Pré-carregar solicitações de chave
• Reduza o impacto do código de terceiros
• Minimize a profundidade crítica da solicitação
• Reduza o tempo de execução do JavaScript
• Minimize o trabalho do encadeamento principal
• Mantenha a contagem de pedidos baixa e os tamanhos de transferência pequenos

Tempo total de bloqueio (TBT)

A métrica TBT mede o tempo total entre a FCP e a TTI. Durante esse tempo há um encadeamento principal que pode ser bloqueado por uma tarefa longa. Durante esse bloqueio caso o usuário interaja com a página o navegador tem que aguardar a finalização da tarefa para depois responder a interação do usuário.

Como melhorar o TBT:

• Reduza o impacto do código de terceiros
• Reduza o tempo de execução do JavaScript
• Minimize o trabalho do encadeamento principal
• Mantenha a contagem de pedidos baixa e os tamanhos de transferência pequenos

Deslocamento de layout cumulativo (CLS)

A CLS é uma métrica bem legal e tem relação com a mudança do layout da página. Algumas páginas modificam-se de forma inesperada conforme o usuário interage com elas. Essa mudança pode acontecer por causa de recursos que são carregados de forma assíncrona por exemplo.

Como melhorar o CLS:

• Sempre inclua atributos de tamanho nas suas imagens e elementos de vídeo ou reserve o espaço necessário com algo como caixas de proporção de aspecto CSS.
• Nunca insira conteudo acima do conteúdo existente, exceto em resposta a uma interação do usuário. Isso garante que todas as mudanças de layout que ocorrem sejam esperadas.
• Prefira transformar animações de propriedades que acionam alterações de layout. Animar transições de maneira a fornecer contexto e continuidade de estado para estado.
• Usando <link rel=preload>as principais fontes da Web: uma fonte pré-carregada terá uma chance maior de encontrar a primeira pintura; nesse caso, não haverá alteração no layout.
• Combinando <link rel=preload> e font-display: optional

PageSpeed + Lighthouse

Todas essas validações e diagnóstico feito pelo Lighthouse é utilizado pelo Google PageSpeed Insights para a pontuação de velocidade. Por isso investir tempo no diagnóstico e melhorias sugeridas pelo Lighthouse vai ajudar na melhoria da performance de carregamento do site.

AMP (Accelerated Mobile Page)

O AMP é um framework com diversos recursos, componentes e ferramentas para criação de sites, emails, materiais e anúncios. Com o AMP é possível criar sites com carregamento rápido e que tenha uma experiência suave para o usuário.

O Google oferece acesso a páginas AMP nos seus resultados orgânicos caso o site disponibilize páginas com AMP implementado.

Conteúdo duplicado e urls canônicas

Existem páginas do site que podem ser acessadas por mais de uma url. Dependendo da plataforma de gestão de conteúdo uma página pode ter mais de uma categoria de assunto e em alguns casos o acesso a página pode ser feito por um urls diferentes. Nesse caso as urls podem ter a categoria como diferenciação mas o conteúdo final é o mesmo.

Se você não informar para o Google qual deve ser a url canônica ele vai decidir qual das urls é a com maior relevância e em alguns casos até definir que as duas podem ser relevantes. E isso pode ser um problema! Um exemplo são as páginas AMP que possuem o mesmo conteúdo mas possuem uma estrutura diferente. Não é interessante ter uma página amp como canônica uma vez que não são todas os canais que exibem páginas amp.

Metatags e melhorias in-line

O Google utiliza as metatags, conteúdo da página e referências externas para definir um snippets de resultados orgânico para exibir para o usuário durante uma busca.

Meta title

O título é uma parte fundamental de uma boa indexação no Google. Ele pode ser considerado o principal fator de decisão de clique do usuário, por isso ter um título relevante e descritivo pode fazer a diferença no SEO On-Page.

• Para informar o título é necessário utilizar a metatag title, que deve ser localizada na seção head da página.
• O tamanho do título também é importante – evite títulos longos e muito curtos. Encontrar um meio termo pode ser difícil dependendo do assunto mas vale o esforço. Eu particularmente utilizo títulos longos (contrariando dicas do Google rsrsrs) mas levo a sério o aspecto descritivo e planejo o título em duas partes. A primeira parte contém o tópico principal e a segunda parte apresenta a estrutura geral dos tópicos internos. Exemplo Tudo Sobre SEO – O que é? Por que fazer? Como fazer? onde a primeira parte (Tudo Sobre SEO) passa a ideia geral e a aquela que pode aparecer mais vezes nos resultados, mas a segunda parte (O que é? Por que fazer? Como fazer) é importante para contextualizar ainda mais o conteúdo quando o usuário acessa a página.
• Não utilize excesso de palavras-chave no título! Um título como: “Saiba tudo sobre SEO – SEO On-Page, SEO Off-Page, Link building, linkbuilding, seo onpage, seo offpage…” pode ser interpretado como um tentativa de manipular a classificação do site em um resultado de pesquisa.
• O Google pode modificar o título nos resultados orgânicos. Isso acontece por que os títulos definidos nas páginas são fixos. Para exibir um resultado mais relevante o Google pode utilizar âncoras, texto da página e outras fontes para definir outros títulos para os resultados.

Meta description

Outro fator de grande impacto nos resultados orgânicos é a meta tag description. O Google pode utilizar a meta tag description caso ache que ela ofereça uma descrição mais relevante do que o conteúdo da página. A meta tag description não tem limite de tamanho, mas o Google pode truncar a descrição conforme a dimensão do dispositivo.

• Cuidado para não duplicar as metas descriptions das páginas. Se o site tiver descrições semelhantes ou iguais provavelmente o Google não vai exibi-las.
• Vale a pena dedicar tempo na criação das descrições. Procure incluir detalhes importantes do conteúdo, no caso de uma página de produtos por exemplo que tem diversas informações relevantes mas espalhadas, você pode reunir essas informações em uma descrição mais completa. Boas descrições podem gerar maior tráfego orgânico.

Meta tag viewport

A meta tag viewport é utilizada pelo navegador para identificar a compatibilidade da página com dispositivos móveis. Sem isso o navegador vai renderizar a página nas dimensões típicas e reduzir o tamanho dificultando a leitura e navegação.

Veja o passo a passo de uso da meta tag viewport: https://web.dev/viewport/?utm_source=lighthouse&utm_medium=lr

Link hreflang

Se o site possui páginas com versões de idiomas você pode informar aos mecanismos de pesquisa as urls das versões e com isso os mecanismos podem exibir as páginas com as versões corretas de idiomas.

Veja o passo a passo de uso do atributo hreflang: https://web.dev/hreflang/?utm_source=lighthouse&utm_medium=lr

Imagens

As imagens além de servirem para ilustrar o conteúdo e deixar a experiência da leitura mais relevante ajudam também a atrair mais tráfego orgânico através da busca por imagens do Google.

Atributo alt

• O atributo alt ajuda tecnologias assistivas como leitores de tela, além de exibir o texto do atributo caso a imagens não seja exibida.
• Procure não utilizar textos muitos longos, para não ser considerado como spam.
• Procure evitar utilizar somente imagens como links de navegação do site.

Tipo e Nome do arquivo

• Procure utilizar nomes de arquivos descritivos, como aprendendo-seo.jpg, seo-on-page-iniciante.png por exemplo.
• Evite nomes genéricos como seo01.jpg, arquivo_a.png, arq-img.jpg.
• Procure utilizar formatos de arquivos mais próprios para web como jpg, png ou gif. O formato WebP é recomendado por ter um taxa de compressão maior e isso deixa o tempo de carregamento da página mais rápido.

Sitemaps de imagens

Você pode utilizar um sitemap com extensões e informações de imagens para enviar ao Google. Isso pode ser útil quando o site utiliza imagens que são carregadas através de um javascript por exemplo.

Minificar CSS e JavaScript

Dependendo da complexidade e recursos utilizados no desenvolvimento do site o uso recorrente de arquivos de css e javascript pode acabar sobrecarregando o carregamento da página, interferindo na experiência do usuário.

A minificação é um técnica que procura eliminar tudo aquilo que é desnecessário nos arquivos css e javascript, como: comentários, espaços em branco, recuos e quebras de linha. Isso faz com que os arquivos tenham seu tamanho reduzido e em alguns casos combinados reduzindo a quantidade de requisições feitas ao servidor.

O ganho em velocidade de carregamento com técnicas de minificação pode fazer a diferença entre o sucesso e fracasso das estratégias de SEO. Por isso vale todo o esforço e dedicação no processo de minificação.

Saiba como utilizar os recursos de minificação:

• https://web.dev/minify-css/
• https://web.dev/unminified-javascript/?utm_source=lighthouse&utm_medium=lr

Ativar compactação dos arquivos

Você pode ativar a compactação dos arquivos reduzindo o tempo de download dos mesmo. Você pode utilizar a compactação em GZip, Deflate ou Brotli. A compactação em Brotli é a que proporciona a maior redução do tamanho dos arquivos. Verifique com o desenvolvedor do site a possibilidade de utilizar recursos de compactação.

Saiba mais sobre como utilizar recursos de compactação: https://web.dev/uses-text-compression/?utm_source=lighthouse&utm_medium=lr

Preload

Alguns sites dependem de recursos chaves para o funcionamento. Esses recursos podem travar o site e deixá-lo inutilizado até que o recurso fique disponível. Para acelerar o processo de solicitação e disponibilização desses recursos é possível utilizar o atributo de link preload.

O preload fará o pré-carregamento dos recursos críticos e com isso o usuário terá acesso a elementos visuais e interativos mais rápido.

Saiba mais sobre como utilizar o atributo preload e acelerar o acesso ao seu site: https://web.dev/uses-rel-preload/?utm_source=lighthouse&utm_medium=lr

URL’s e estrutura de links interna

Conectar os conteúdos pode fazer toda a diferença no engajamento dos usuários com o site. Se levarmos em conta o comportamento de compra on-line podemos planejar a produção de conteúdo para que as páginas sejam linkadas em textos âncoras que estimulem a continuidade da navegação.

• A cada conteúdo novo é importante revisar os demais conteúdos para identificar palavras que podem servir como âncoras para linkar o novo conteúdo.
• A linkagem interna entre conteúdos pode ajudar a reduzir a taxa de rejeição. Muitos usuários podem ser estimulados a clicar em um link uma vez que ele demonstra relevância e uma oportunidade de aprofundar o conhecimento.

Links Permanentes

O Google recomenda utilizar estruturas de links permanentes. Links mais descritivos vão ajudar na linkagem em outras páginas, além de passar uma sensação de segurança para o usuário.

Os links também são exibidos nos snippets de resultados, por isso é importante que o link seja bem descritivo.

O WordPress permite configurar a estrutura dos links de posts e páginas, facilitando definir estruturas mais descritivas e que vão auxiliar no SEO.

Robots.txt

O robots.txt é um arquivo texto que contém regras de acesso para mecanismos de buscas como o Google. Ele não bloqueia a indexação das urls mas você pode gerenciar o acesso e requisições de acesso às páginas, evitando uma sobrecarga desnecessária de solicitações no servidor web do site.

Existem diversas páginas que não necessitam de rastreamento do Google tais como: páginas de acesso que solicitam usuário e senha, urls de arquivos e imagens.

Mesmo você bloqueando ou limitando o acesso do rastreador através do robots.txt o rastreador ainda pode indexar a url caso a encontre referenciada em outro domínio. Se você deseja bloquear uma url no índice de resultados utilize diretivas noindex.

Saiba mais sobre as opções de uso do robots.txt na documentação do Google:

• https://support.google.com/webmasters/answer/6062608?hl=pt-BR
• https://support.google.com/webmasters/answer/6062596?hl=pt-BR

Sitemap.xml

Os sitemaps são arquivos em xml que contém uma estrutura organizada de urls, arquivos, vídeos e imagens e a relação entre eles. Você pode utilizar um sitemap para enviar diversas informações para o Google de forma automatizada.

Um site que tenha um alto volume de publicação de conteúdos como portais de jornais, universidades, blogs e fóruns de comunidades podem utilizar o sitemap para enviar novas urls ao Google de forma automatizada.

Navegação segura com HTTPS

O HTTPS ou Protocolo Seguro de Transferência de Hipertexto permite aos usuários que navegam no site ter segurança, integridade e confiabilidade na transmissão de dados entre o computador do usuário e o site.

O Google recomenda o uso do HTTPS para proporcionar uma experiência mais segura para os usuários. Site que não utilizam https são mostrados como não seguros pelo navegador Chrome!

O protocolo HTTPS é implementado por meio de um certificado digital SSL. Os certificados SSL são emitidos por uma autoridade certificadora. Então esse certificado deve ser implementado no servidor web onde o site está hospedado.

É importante e recomendado fazer redirecionamentos 301 para todas as urls do site que tem solicitação de acesso pelo protocolo HTTP. Isso garante que urls que foram compartilhadas em outros canais digitais e que já estão indexadas no Google como http redirecionem os usuários para páginas seguras.

Saiba como informar ao Google os redirecionamentos das urls para o protocolo HTTPS

• https://support.google.com/webmasters/answer/6073543?hl=pt-BR

Ferramentas para SEO On-Page

Já falei das ferramentas Google PageSpeed Insights e Lighthouse. Essas ferramentas vão diagnosticar e proporcionar a maioria das melhorias necessárias para um bom desempenho em SEO On-Page. Mas existem outras ferramentas e recursos que podem melhorar o SEO On-page do site.

Recursos de cache

sse recurso fez toda a diferença no site da 30/30. Inicialmente o site estava muito lento no carregamento, tanto mobile quanto desktop, e estava pondo a perder toda a estratégia de SEO.

O site da 30/30 é feito em WordPress e com isso eu posso contar com inúmeras ferramentas de otimização para SEO. Foram essas ferramentas que possibilitaram eu implementar diversos recursos apontados como necessários pelo PageSpeed Insights e Lighthouse.

A ferramenta que mais utilizo é o W3 Total Cache. Como ela eu fiz diversas configurações de cache do site, que basicamente mantém cópias de páginas já pré-formatadas disponíveis para os usuários, poupando assim ao navegador ter que fazer uma renderização demorada. Isso deixa o acesso bem veloz as páginas do site.

Outro recurso muito bom do WTC é a minificação de arquivos HTML, CSS e JavaScript. Ele identifica os arquivos, faz a minificação e em alguns casos você pode até combinar os arquivos.

A compactação dos arquivos para GZip também é uma das várias opções disponíveis.

Posso afirmar com 100% de certeza que o site do 30/30 só é viável para as estratégias de SEO graças ao W3 Total Cache. Eu continuo aprimorando diversos outros recursos de SEO On-Page mas é essa ferramenta que sustenta a maior das melhorias de aumento de performance de carregamento do site.

Google Search Console

O Google Search Console é uma ferramenta completa que auxilia no monitoramento do tráfego orgânico e posicionamento nos resultados de pesquisa do Google. Ela auxilia tanto no SEO On-Page quanto no SEO Off-Page.

No SEO On-Page ele vai diagnosticar possíveis erros em urls, além de identificar problemas mais críticos como scripts maliciosos no site. É pelo Google Search Console que você vai fazer a solicitação de revisão desses problemas críticos.

Você também pode fazer a validação de implementação de dados estruturados além de solicitação uma nova renderização de uma página que teve seu conteúdo alterado.

• https://www.thinkwithgoogle.com/intl/pt-br/advertising-channels/mobile/quer-melhorar-rapidez-do-seu-site-mobile-comece-pelas-imagens/
• https://www.thinkwithgoogle.com/intl/pt-br/advertising-channels/mobile/fracoes-de-segundo-que-valem-milhoes-como-velocidade-mobile-pode-acelerar-o-seu-negocio/
• https://www.thinkwithgoogle.com/intl/pt-br/advertising-channels/mobile/mais-rapidez-mais-conversao-como-performance-trouxe-resultados-para-clickbus/

Erro 404

Você já deve ter clicado em um link ou resultado de busca orgânica e ter se deparado com uma página inexistente! Geralmente uma página contendo um erro 404 é exibida. De modo geral o erro 404 diz que você conseguiu se comunicar com o servidor mas o servidor não conseguiu entregar o que foi solicitado. Por isso você acessa o site apesar da página de conteúdo não estar disponível.

Erros 404 podem ser causados por diversos motivos, tais como: a url final foi alterada, a estrutura de categorias do link permanente foi modificada, o site foi movido para um novo domínio, uma imagem foi excluída, são alguns casos.

O Google Search Console pode ajudar identificando urls com erro 404. Com isso é possível identificar e resolver o problema. Isso é necessário por que tem grande impacto no SEO e na experiência do usuário. Por isso qualquer mudança na estrutura dos links, categorias e mudanças de nomes de arquivos devem ser planejados com antecedência. Já tive experiências em que clientes por ansiedade fizeram mudanças no site que impactaram a estrutura de urls perdendo todo o resultado orgânico!

Soft 404

Um erro soft 404 é quando uma url é retornada como não existente mas o servidor responde com código de nível 200 como se a url fosse válida. Isso pode acontecer quando a página contém pouco ou nenhum conteúdo (vazia). Isso é ruim para o SEO, por que o Google vai continuar tentando indexar a url e exibindo uma página não válida.

Redirecionamentos

É importante utilizar fazer um redirecionamento 301 para as urls que são apontadas com erro 404 e soft 404. Assim os mecanismos de busca vão entender que a página foi movida permanentemente para outra url. Com isso você não perde o posicionamento orgânico.

Saiba como fazer redirecionamentos:

• https://support.google.com/webmasters/answer/93633?hl=pt-BR
• https://en.wikipedia.org/wiki/HTTP_301