SEO Patrick

Capítulo 1: Introdução ao Tech SEO

Neste guia de boas práticas de tech seo, você vai mergulhar fundo no universo da otimização técnica para mecanismos de busca, e vai entender como os desenvolvedores podem desempenhar um papel essencial na melhoria do desempenho de um site nos resultados de pesquisa.

Aqui, nosso foco não se limita apenas a explicar os conceitos de Tech SEO, mas também a fornecer orientações práticas e estratégias que podem ser implementadas de forma direta e efetiva. 

O guia abordará desde a otimização das métricas do Core Web Vitals até a implementação eficiente de dados estruturados e a resolução de problemas de conteúdo duplicado, fornecendo um conjunto diversificado de tópicos destinados a capacitar desenvolvedores a criar sites que se destacam.

Este ebook não se propõe a ser uma coleção de diretrizes, mas um guia prático e fundamentado para você transformar o desenvolvimento web em uma poderosa ferramenta de otimização de SEO. 

Vamos começar essa jornada para aprimorar o seu domínio no Tech SEO e alcançar resultados extraordinários.

Capítulo 2: Core Web Vitals e otimização de métricas

Uma visão detalhada das métricas do Core Web Vitals (LCP, FID, CLS)

O Core Web Vitals é um conjunto de métricas de desempenho do site que são essenciais para medir e melhorar a experiência do usuário durante a interação com uma página da web. 

Essas métricas são especificamente focadas em três aspectos cruciais da experiência do usuário: velocidade de carregamento, interatividade e estabilidade visual. Confira cada uma delas detalhadamente abaixo:

LCP (Largest Contentful Paint): o LCP mede o tempo que leva para o maior elemento de conteúdo visível em uma página ser completamente carregado. Esse elemento pode ser uma imagem, um vídeo ou um bloco de texto. O objetivo é garantir que o conteúdo mais importante seja exibido aos usuários o mais rápido possível, proporcionando uma experiência de carregamento eficaz.

FID (First Input Delay): o FID mede o tempo de atraso entre a primeira interação do usuário com a página e a resposta real do site. Isso pode incluir cliques em botões, links ou outras interações. Um FID baixo é essencial para garantir que os visitantes possam interagir com o site de maneira rápida e responsiva.

CLS (Cumulative Layout Shift): o CLS avalia a estabilidade visual de uma página durante o carregamento. Ele calcula a quantidade de deslocamento de layout inesperado que ocorre, evitando situações em que elementos da página mudem de posição de maneira frustrante para o usuário.

Estratégias para otimizar cada métrica no front-end

Otimizando o LCP (Largest Contentful Paint)

1. Comprimir e otimizar imagens: reduzir o tamanho das imagens sem comprometer a qualidade usando ferramentas de compressão e formatos otimizados, como WebP.
2. Priorizar carregamento de conteúdo: carregar primeiro o conteúdo visível acima da dobra (above-the-fold), garantindo que os elementos mais importantes apareçam rapidamente.
3. Minimizar de recursos de terceiros: limitar a quantidade de scripts, fontes e recursos externos, permitindo que o conteúdo principal do site seja carregado antes de elementos de terceiros.

Otimizando o FID (First Input Delay):

1. Carregar recursos de forma assíncrona: carregue scripts e recursos não essenciais de forma assíncrona, permitindo que o conteúdo visível seja carregado e interaja sem atrasos.
2. Reduza o bloqueio de JavaScript: identifique e otimize scripts que podem bloquear a renderização da página, adiando tarefas não essenciais ou carregando-as de maneira mais eficiente.
3. Utilização de serviços de cache: use serviços de cache para armazenar informações previamente carregadas e reduzir a necessidade de carregar recursos repetidamente.

Otimizando o CLS (Cumulative Layout Shift):

1. Definir dimensões para mídia: defina as dimensões (largura e altura) para elementos de mídia, como imagens e vídeos, no HTML, evitando mudanças de layout à medida que esses elementos são carregados.
2. Carregamento diferido de imagens: Carregue imagens abaixo da dobra de forma diferida, permitindo que o conteúdo acima da dobra seja exibido primeiro e evitando alterações de layout quando as imagens carregarem.
3. Evitar inserções dinâmicas de conteúdo: evite inserções de conteúdo que ocorrem após o carregamento inicial da página, pois isso pode causar movimentos inesperados no layout.

Capítulo 3: Análise do site e melhoria da indexação

Quando você cria ou atualiza uma página da web, o Google envia “rastreadores” para examiná-la. Eles seguem links, leem o conteúdo e coletam informações. Imagine-os como detetives digitais. Depois de coletar informações, o Google as armazena em um enorme banco de dados, conhecido como “índice”. 

Agora que você entendeu como o Google encontra e analisa o site, é hora de saber as estratégias para melhorar a indexação e aumentar sua visibilidade nos resultados de pesquisa. Aqui estão algumas dicas:

Robots.txt

O robot.txt é uma ferramenta-chave na otimização da indexação do site. Esse arquivo serve como um sinalizador para os rastreadores do Google, orientando-os sobre quais partes do site podem ser exploradas e quais devem ser ignoradas. 

Ao ajustar o robots.txt de forma adequada, é possível direcionar a atenção dos rastreadores para o conteúdo mais relevante e garantir que informações sensíveis ou duplicadas sejam excluídas da indexação.

Sitemap

Um sitemap é como um menu para os rastreadores. Ele lista todas as páginas importantes do  site. Isso é especialmente útil se o site é grande ou possui muitos links internos. Um sitemap ajuda o Google a navegar e entender melhor a estrutura do site.

Dados Estruturados (Schema)

Os dados estruturados, também conhecidos como schema, são marcadores adicionados ao conteúdo para ajudar os motores de busca a entender melhor o significado e o contexto do que está sendo apresentado. 

Ou seja, eles atuam como um “tradutor” para o Google, fornecendo informações adicionais sobre o conteúdo da sua página. Isso pode incluir informações sobre produtos, eventos, avaliações e muito mais. 

Ao incorporar dados estruturados, é possível aumentar a chance dos resultados de pesquisa aparecerem com informações enriquecidas, como estrelas de avaliação ou datas de eventos.

Tag canonical

Às vezes, o site pode ter conteúdo similar em diversas páginas. A tag canonical indica ao Google qual página é a principal, evitando que o Google interprete o conteúdo como duplicado, o que poderia afetar a classificação nos resultados de pesquisa.

Além disso, ajuda a consolidar a autoridade da página principal e evita problemas relacionados à duplicidade de conteúdo de forma geral.

HTML semântico

O HTML semântico ajuda os motores de busca e os navegadores a interpretar melhor o conteúdo da página web. É como dar pistas sobre como as diferentes partes do conteúdo se relacionam entre si. Isso vai além de simplesmente mostrar como a página deve ser visualizada – é sobre como o conteúdo é estruturado e entendido. Veja as principais tags dentro do contexto de SEO:

Hierarquia de Tags de Título (H1, H2, H3) 

Essas tags estabelecem uma hierarquia no conteúdo, indicando como cada seção se relaciona. Utilizar a hierarquia de tags corretamente ajuda tanto os motores de busca quanto os leitores a entenderem a organização do conteúdo. 

Isso torna a leitura mais fácil e também pode influenciar a forma como os motores de busca vão interpretar e classificar o conteúdo.

Meta Description

A meta description não afeta diretamente a estrutura da página, mas é essencial para a otimização de SEO. É uma breve descrição do conteúdo da página que aparece nos resultados de busca. 

Embora não seja um fator direto de classificação, uma meta description bem elaborada pode influenciar em qual link da página de resultados o usuário irá clicar.

Ao criar uma meta description envolvente e informativa, os usuários são incentivados a visitarem o site. O Google indica mantê-la abaixo de 160 caracteres, destaque os pontos-chave do conteúdo e forneça uma visão geral atraente.

Outras Tags Importantes para SEO

<alt>: atributo alt em imagens, fornece descrição para imagens, auxiliando na acessibilidade e na indexação de imagens.

<link>: usado para vincular a folhas de estilo, favicons e outros recursos. Também pode ser usado para indicar a versão preferida de uma página (canonical).

<rel=”nofollow”>: atributo usado para dizer aos motores de busca que o link não deve influenciar a classificação do destino.

<rel=”canonical”>: usado para indicar a versão preferida de uma página em casos de conteúdo duplicado.

<rel=”prev”> e <rel=”next”>: são usadas para indicar a relação entre páginas de conteúdo paginado, como listas de itens divididas em várias páginas. Essas tags ajudam os motores de busca a entender a sequência de páginas e a navegação entre elas. 

<meta name=”viewport”>: importante para tornar o site responsivo em dispositivos móveis.

<meta name=”robots”>: pode ser usada para controlar a indexação de páginas específicas.

<strong> e <em>: usadas para enfatizar palavras ou frases. Os motores de busca consideram essas tags ao interpretar a relevância do texto.

Usar essas tags de maneira estratégica e consciente é fundamental para otimizar a estrutura e o conteúdo do site para SEO. Elas não apenas comunicam efetivamente o significado do conteúdo aos motores de busca, mas também melhoram a experiência do usuário e a acessibilidade, criando uma base sólida para uma presença online eficaz.

Capítulo 4: CDN (Content Delivery Network)

Uma CDN é uma rede distribuída de servidores localizados em diferentes regiões geográficas. O objetivo principal de uma CDN é otimizar a entrega de conteúdo na internet, como imagens, vídeos, arquivos de estilo e scripts, aos usuários finais de maneira rápida e eficiente. 

Em vez de depender de um único servidor central para atender todas as solicitações de um site, uma CDN possui servidores espalhados globalmente, o que permite que o conteúdo seja entregue a partir do servidor mais próximo ao usuário.

Motivos para considerar uma CDN em projetos internacionais

• Redução de latência: a latência (o atraso entre a solicitação e a resposta) é reduzida, resultando em tempos de carregamento mais rápidos.
• Desempenho: a carga sobre o servidor principal é reduzida, resultando em um desempenho geral mais eficaz.
• Confiabilidade: a CDN ajuda a minimizar os impactos de falhas de servidor, garantindo que o conteúdo ainda esteja disponível mesmo se um servidor falhar.
• Escalabilidade: CDNs são projetadas para lidar com picos de tráfego, o que é especialmente útil em eventos populares ou lançamentos de produtos.
• Acesso Global: fornece uma experiência de alta qualidade para usuários em todo o mundo, independentemente de sua localização.

Uma CDN bem escolhida e configurada pode ter um impacto significativo no desempenho do site em escala global. 

Ao implementar uma CDN em projetos internacionais, é possível oferecer uma experiência de usuário mais rápida, consistente e confiável, independentemente da localização geográfica dos visitantes.

Capítulo 5: Carregamento assíncrono e otimização de recursos

Agora vamos falar de duas técnicas mais avançadas e fundamentais para aprimorar o desempenho do  site: o uso das diretrizes “defer” e “async” para scripts, além das estratégias preload, prefetch e preconnect.

Uso das Diretrizes “defer” e “async” para Scripts

Ao incorporar scripts no  site pode impactar significativamente o desempenho. As diretrizes “defer” e “async” são utilizadas para controlar como e quando esses scripts são carregados.

“defer”: adicionar o atributo “defer” a uma tag <script>, indica ao navegador que deverá executá-lo somente após o carregamento completo da página. Essa técnica é ideal para scripts que não precisam ser executados imediatamente.

“async”: este atributo permite que o navegador baixe e execute o script assim que estiver disponível, acelerando a renderização da página, mas pode resultar em scripts executados fora de ordem, caso haja dependências. O “async” deve ser usado para scripts independentes que não afetam diretamente a estrutura da página.

Estratégias para Preload, Prefetch e Preconnect

A pré-otimização atua para garantir um carregamento suave e eficaz de recursos essenciais. É a abordagem que antecipa as necessidades do usuário, reduzindo ao máximo os tempos de espera e a latência.

Nesse contexto, há três estratégias vitais que devem ser consideradas na pré-otimização, cada uma direcionada a um aspecto fundamental do processo de carregamento:

Pré-Carregamento (Preload): a tag <link rel=”preload”> especifica recursos críticos que serão necessários logo após o carregamento da página. Isso inclui fontes, folhas de estilo e scripts. Ao pré-carregar esses recursos, você garante que eles estejam prontos para uso imediato.

Pré-Renderização (Prefetch): a tag <link rel=”prefetch”> sinaliza ao navegador que se espera que o usuário acesse uma determinada página em breve. Isso permite que o navegador baixe os recursos da página antes de serem solicitados, acelerando a experiência do usuário quando a página for acessada.

Pré-Conexão (Preconnect): a tag <link rel=”preconnect”> estabelece uma conexão com um servidor antes que os recursos sejam solicitados. Isso é útil para domínios de terceiros, como fontes externas ou APIs, reduzindo a latência e acelerando o carregamento.

Noscript: alternativas para conteúdo em páginas sem suporte JavaScript

Embora o JavaScript tenha se tornado essencial na interatividade web, é importante prever que alguns usuários podem desativar ou ter dispositivos que não suportam essa tecnologia. 

Aqui é onde entra a tag <noscript>, oferecendo uma alternativa quando o JavaScript não está disponível. Dentro dessa tag, é possível inserir conteúdo, como mensagens informativas ou versões alternativas de elementos interativos, que será exibido somente para os usuários que não podem acessar o JavaScript.

Considerar alternativas em relação ao JavaScript, garante que todos os visitantes, independentemente das suas configurações, tenham acesso a informações e funcionalidades essenciais. Isso não apenas melhora a acessibilidade, mas também preserva a experiência do usuário.

Capítulo 6: Páginas órfãs e sua otimização

Páginas órfãs são aquelas que não têm links internos ou externos que as conectem a outras páginas. Essa desconexão pode prejudicar a indexação pelo mecanismo de busca, impactando a visibilidade do conteúdo. 

A otimização de páginas órfãs envolve a aplicação de estratégias para integrá-las mais profundamente à arquitetura do site. Veja:

• Linkagem interna: criar links internos conectando páginas órfãs a outras partes relevantes do site. Isso pode ser feito através de menus de navegação, links relacionados ou incorporação em conteúdos relevantes. Além disso, a criação de conteúdo interno ou externo que se conecte a essas páginas pode melhorar sua visibilidade.

• Metadados descritivos: a otimização de SEO nas páginas órfãs também envolve a criação de metadados descritivos, títulos relevantes e o uso de palavras-chave pertinentes para atrair a atenção dos mecanismos de busca.

Ao utilizar essas estratégias, é possível melhorar a indexação e a visibilidade do conteúdo, além de fortalecer a estrutura geral do site.

Capítulo 7: Pontos importantes de Javascript para SEO

O JavaScript desempenha um papel vital na criação de sites dinâmicos e interativos, mas quando se trata de otimização para mecanismos de busca (SEO), é essencial considerar como o JavaScript pode afetar a visibilidade do seu site nos resultados de pesquisa. Aqui estão alguns pontos importantes a serem considerados ao usar JavaScript para garantir uma boa classificação nos mecanismos de busca:

1. Acessibilidade e Rastreabilidade: Mecanismos de busca, como o Google, podem rastrear e indexar o conteúdo gerado por JavaScript, mas ainda é recomendável fornecer uma versão HTML estática do seu conteúdo. Isso garante que o conteúdo seja acessível e rastreável, independentemente das limitações de interpretação do JavaScript pelos mecanismos de busca.

2. Conteúdo Crítico no HTML: Certifique-se de que o conteúdo mais importante e relevante para SEO esteja presente diretamente no HTML da página, em vez de ser carregado dinamicamente por meio de JavaScript. Isso garante que os motores de busca possam identificar imediatamente o conteúdo relevante.

3. Renderização do Lado do Servidor (SSR) e Renderização do Lado do Cliente (CSR): A renderização do lado do servidor (SSR) envolve a geração do conteúdo pelo servidor antes de ser enviado ao navegador, tornando o conteúdo mais acessível aos mecanismos de busca. A renderização do lado do cliente (CSR), por outro lado, pode resultar em atrasos na indexação, já que o conteúdo é gerado no navegador. Utilizar uma abordagem híbrida, como a renderização universal, pode ser uma solução.

4. Uso Adequado de Fragmentos de URL (Hashbangs): Se o seu site utiliza fragmentos de URL (hashbangs) para carregar conteúdo dinâmico, certifique-se de que eles sejam implementados corretamente. O Google é capaz de indexar conteúdo com hashbangs, mas é preferível usar URLs convencionais para garantir uma indexação mais eficaz.

5. Degradação Graciosa: Planeje a degradação graciosa do seu site para quando o JavaScript não estiver disponível. Isso não apenas melhora a experiência do usuário, mas também garante que o conteúdo seja acessível aos motores de busca, mesmo quando o JavaScript não é executado.

6. Use “nofollow” em Links Não Essenciais: Se você estiver usando JavaScript para criar links que não são essenciais para a indexação (por exemplo, menus expansíveis), considere usar o atributo “nofollow” nesses links. Isso evita que os mecanismos de busca desperdicem recursos de rastreamento em links menos importantes.

7. Teste de Renderização: Utilize ferramentas como o Google Search Console para testar como o Google renderiza e indexa as páginas com JavaScript. Isso permite que você identifique problemas e otimize a indexação do seu site.

Em resumo, ao usar JavaScript em seu site, é crucial considerar como isso afeta a acessibilidade, indexação e experiência do usuário. Mantendo uma abordagem equilibrada entre dinamismo e otimização para mecanismos de busca, você pode criar um site interativo e ao mesmo tempo garantir que ele seja bem classificado nos resultados de pesquisa.

Capítulo 8: Otimização de Lazy Loading e Elementos abaixo da dobra

A otimização de lazy loading (carregamento preguiçoso) e de elementos abaixo da dobra é uma parte importante da melhoria do desempenho de um site. 

Além de proporcionar uma experiência mais rápida aos usuários, também pode ter um impacto positivo no SEO, pois a velocidade de carregamento é um fator de classificação importante. 

Estratégias para otimizar elementos abaixo da dobra e melhorar o desempenho

Confira uma checklist eficaz para implementar essa técnica nos sites:

• Priorização de elementos: identifique os conteúdos mais importantes e carregue esses elementos primeiro, enquanto a página continua carregando em segundo plano.
• Técnicas de JavaScript: utilize bibliotecas e scripts que oferecem suporte ao lazy loading de imagens e recursos. O atributo loading=”lazy” em tags <img> é uma abordagem nativa e eficaz para implementar o lazy loading.
• Definição de tamanhos: especifique os tamanhos das imagens no HTML para evitar saltos de layout quando as imagens estiverem carregadas.
• Imagens responsivas: combine o lazy loading com técnicas de imagens responsivas para fornecer a resolução apropriada para diferentes dispositivos.
• Uso de fontes web seguras: Evite o uso de fontes externas que podem causar atrasos no carregamento da página. Opte por fontes web seguras e amplamente suportadas.
• CSS crítico: Incorpore o CSS crítico diretamente no HTML ou utilize técnicas como inlining para garantir que o estilo inicial da página seja carregado rapidamente.
• Reduza scripts de terceiros: minimize a quantidade de scripts de terceiros, como widgets e rastreadores, pois esses scripts podem impactar negativamente o desempenho da página.

A implementação eficaz do lazy loading e a otimização de elementos abaixo da dobra são essenciais para melhorar a velocidade de carregamento do  site.

Capítulo 9: Meta Robots e seu impacto na indexação

O uso adequado das meta robots é fundamental para controlar a forma como os mecanismos de busca indexam e exibem o conteúdo do seu site nos resultados de pesquisa. 

A Meta Robots é usada no cabeçalho HTML de uma página para instruir os mecanismos de busca sobre como devem interagir com a página. Ela contém diretivas que controlam a indexação e o acompanhamento de links.

Diretivas Comuns:

• index: instrui os mecanismos de busca a indexar a página.
• noindex: impede os mecanismos de busca de indexar a página.
• follow: instrui os mecanismos de busca a seguir os links na página.
• nofollow: impede os mecanismos de busca de seguir os links na página.

Capítulo 10: Controlar a visibilidade de páginas usando noindex, nofollow e outros

Noindex

Use noindex em páginas que contenham conteúdo duplicado, como versões de impressão ou páginas de login.

Páginas de agradecimento, páginas de busca interna e outras páginas de baixa relevância também podem ser marcadas como noindex.

Nofollow

Use nofollow em links para páginas que não devem ser rastreadas, como páginas de saída para sites de terceiros ou links irrelevantes.

Noarchive

Use noarchive para evitar que os mecanismos de busca armazenem uma cópia em cache da página. Isso pode ser útil quando você não deseja que o conteúdo anterior seja acessado a partir do cache.

Nosnippet

A meta tag nosnippet impede que os mecanismos de busca exibam um snippet (trecho de texto) da página nos resultados de pesquisa. Isso pode ser usado para proteger informações sensíveis.

Noodp e Noydir:

Essas meta tags desativam a exibição de descrições de diretórios do DMOZ e do Yahoo no snippet da página nos resultados de pesquisa.

Capítulo 11: Testes de responsividade

A responsividade é um fator de classificação nos mecanismos de busca, especialmente no Google. Sites responsivos têm mais chances de serem classificados mais altamente nos resultados de pesquisa, especialmente em buscas feitas em dispositivos móveis.

Fazer testes de responsividade garante que um site ofereça uma experiência otimizada em uma variedade de dispositivos, especialmente em dispositivos móveis.

Teste mobile-friendly do Google para garantir a compatibilidade com dispositivos móveis

O Google oferece uma ferramenta chamada “Teste de Compatibilidade com Dispositivos Móveis” que avalia se o seu site é amigável para dispositivos móveis. 

A ferramenta fornece informações valiosas sobre problemas de responsividade, indicando se a página foi considerada “amigável para dispositivos móveis” ou não. 

Se o site for considerado não compatível, a ferramenta fornecerá detalhes sobre os problemas que precisam ser corrigidos.

Mobile-friendly do Google

Melhores Práticas:

• Utilize design responsivo como padrão para garantir que o conteúdo se ajuste automaticamente a diferentes tamanhos de tela.
• Teste o site em uma variedade de dispositivos e navegadores para garantir que a responsividade funcione corretamente.
• Otimize imagens e elementos para carregamento rápido em dispositivos móveis.
• Mantenha o foco na experiência do usuário, facilitando a navegação e a interação em dispositivos móveis.

Capítulo 12: Utilizando ferramentas de teste de rich results

A utilização de rich results, também conhecidos como resultados ricos, são elementos especiais nos resultados de pesquisa que vão além dos tradicionais snippets de texto.

Esses elementos podem aumentar a visibilidade e a atratividade dos seus conteúdos nos resultados de pesquisa, pois fornecem informações adicionais e visuais aos usuários diretamente na página de resultados de busca. 

Eles são gerados a partir da marcação estruturada (schema markup) adicionada ao código HTML das páginas. pode aumentar a visibilidade e a atratividade dos seus conteúdos nos resultados de pesquisa.

Como usar o teste de rich results do Google para melhorar os resultados de pesquisa:

O Google oferece uma ferramenta de teste de rich results que permite verificar como os seus conteúdos aparecerão nos resultados de pesquisa com rich results. Essa ferramenta identifica erros, oferece feedback e exibe uma visualização dos rich results.

Tipos de rich results

Os Rich results podem incluir diversas formas de informações, como avaliações de produtos, preços, horários de funcionamento, imagens, vídeos, receitas, eventos, perguntas frequentes e muito mais. 

Essas informações são apresentadas de maneira visualmente atrativa, proporcionando aos usuários uma visão mais completa sobre o conteúdo da página antes mesmo de clicar no resultado.

Alguns exemplos de rich results incluem:

• Rich Snippets: exibem informações adicionais, como avaliações de produtos, estrelas de avaliação, preços e disponibilidade diretamente nos resultados de pesquisa.
• Carrosséis: exibem uma série de cartões deslizáveis, muitas vezes relacionados a filmes, receitas, notícias e outros tipos de conteúdo.
• Painéis de conhecimento: mostram informações detalhadas sobre entidades específicas, como pessoas famosas, lugares ou empresas, extraídas de fontes confiáveis.
• Perguntas e respostas: mostram respostas diretas a perguntas frequentes diretamente nos resultados de pesquisa.
• Eventos: exibem detalhes sobre eventos, incluindo data, horário e local.
• Receitas: exibem detalhes de receitas, incluindo ingredientes, tempo de preparo e calorias.

Otimização de recursos para se qualificar para rich results

Marcação Estruturada (Schema Markup)

A marcação estruturada em JSON-LD é uma forma de comunicar informações específicas sobre o conteúdo do seu site aos mecanismos de busca.

Use esquemas apropriados, como schema.org, para marcar detalhes como avaliações de produtos, receitas, eventos, perguntas e respostas, entre outros.