Embora SEO seja amplamente reconhecido como a chave para aumentar a visibilidade nos motores de busca, e UX seja vital para garantir que os usuários encontrem o que precisam de forma rápida e agradável, muitos profissionais ainda veem essas áreas como separadas. No entanto, quando SEO e UX trabalham juntos de forma estratégica, o resultado é um site que não só ranqueia bem, mas também oferece uma experiência intuitiva e envolvente, que maximiza as conversões.

Neste artigo, exploraremos como alinhar essas duas abordagens para criar sites que não apenas se destacam nos rankings de busca, mas também proporcionam uma jornada do usuário otimizada, gerando resultados reais para o seu negócio.

Por que SEO e UX é o casamento perfeito e devem trabalhar juntos?

SEO e UX compartilham um objetivo comum: fornecer valor ao usuário. O Google e outros mecanismos de busca priorizam sites que oferecem uma experiência satisfatória. Assim, ao melhorar a UX, você também está otimizando para SEO.

Exemplos de convergência entre SEO e UX:

• Velocidade de Carregamento: Páginas rápidas melhoram a experiência e são um fator de ranqueamento.
• Mobile-First Indexing: Um site responsivo garante boa usabilidade em dispositivos móveis e melhor classificação.
• Engajamento: Métricas como tempo na página e taxa de rejeição afetam o SEO e são diretamente impactadas pela experiência do usuário.

A psicologia do design e como ela impacta a experiência do usuário

A psicologia do design é essencial para criar experiências de usuário eficazes, influenciando como os visitantes percebem e interagem com um site. As cores, por exemplo, têm um impacto direto nas emoções e decisões do usuário. O vermelho pode gerar urgência, enquanto o azul transmite confiança. O uso de espaço em branco, ou “espaço negativo”, ajuda a reduzir a sobrecarga cognitiva e torna a navegação mais agradável, enquanto o layout simétrico proporciona harmonia e facilita a compreensão.

A tipografia também desempenha um papel importante na legibilidade e na percepção do conteúdo. Fontes legíveis e de tamanho adequado garantem uma leitura confortável, enquanto a consistência na navegação e no design cria familiaridade e confiança. Além disso, princípios como o efeito de ancoragem, onde informações iniciais influenciam decisões subsequentes, podem ser usados para otimizar ações do usuário, como cliques em CTAs.

Ao aplicar esses princípios psicológicos, é possível criar sites que não só são visualmente atraentes, mas também funcionais e eficazes em guiar os usuários para a ação desejada, melhorando tanto a experiência quanto as taxas de conversão.

Elementos-chave para alinhar SEO e UX

Velocidade de carregamento

A velocidade de carregamento de um site é um dos fatores mais críticos tanto para a experiência do usuário quanto para o SEO. Em um mundo onde a paciência do usuário é cada vez mais limitada, sites lentos podem resultar em altas taxas de rejeição e uma experiência frustrante, o que afeta diretamente as conversões. De acordo com estudos, 47% dos usuários esperam que uma página carregue em dois segundos ou menos, e 40% abandonarão um site se ele demorar mais de três segundos para carregar. Isso mostra o impacto direto que a velocidade tem na retenção e no engajamento do usuário.

O Google utiliza a velocidade de carregamento como um dos critérios para classificar sites nos resultados de busca. Sites mais rápidos não só oferecem uma experiência melhor para o usuário, mas também têm uma vantagem competitiva, já que o Google prioriza páginas com tempo de carregamento rápido, especialmente em dispositivos móveis.

Como otimizar:

• Utilize ferramentas como Google PageSpeed Insights e GTmetrix.
• Comprimir imagens usando formatos modernos como WebP.
• Implementar lazy loading para carregar conteúdos somente quando necessário.
• Ativar o cache do navegador para reutilizar recursos estáticos.

Mobile-first design

Com mais de 60% do tráfego global da web vindo de dispositivos móveis, é imperativo que as empresas e desenvolvedores priorizem a experiência móvel ao projetar suas páginas. Esse conceito não é apenas uma tendência, mas uma necessidade para garantir que os usuários tenham uma experiência fluida e satisfatória, independentemente do dispositivo que estão usando.

A experiência do usuário em dispositivos móveis deve ser o centro de qualquer estratégia de design. Como as telas dos dispositivos móveis são menores, os usuários precisam ser capazes de navegar facilmente e acessar as informações de forma rápida e sem frustrações. O mobile-first design ajuda a garantir que o conteúdo seja exibido de forma otimizada, com navegação simples e botões de fácil acesso.

Desde 2018, o Google adota o mobile-first indexing, o que significa que o Google agora usa a versão móvel de um site como a principal para determinar o ranking nas páginas de resultados de busca. Isso reforça ainda mais a importância do mobile-first design para SEO. Se seu site não for otimizado para dispositivos móveis, ele pode ter um desempenho ruim nos rankings de busca, mesmo que tenha uma versão desktop bem projetada.

O mobile-first design não só garante uma melhor experiência para os usuários móveis, mas também ajuda a melhorar o SEO, já que o Google prioriza sites que são bem otimizados para dispositivos móveis. Isso significa que, ao adotar uma abordagem mobile-first, você está não apenas melhorando a experiência do usuário, mas também aumentando suas chances de ranquear bem nos motores de busca.

Estrutura de navegação simples e intuitiva

Uma navegação bem estruturada não só melhora a experiência do usuário, mas também tem um impacto positivo no SEO. O Google, por exemplo, valoriza a facilidade de navegação como parte de sua avaliação de qualidade de um site. Sites com uma navegação bem organizada e fácil de entender são mais propensos a serem indexados corretamente, o que melhora seu desempenho nos resultados de busca.

Além disso, uma navegação clara facilita a crawling (rastreamento) do site pelos motores de busca. Quando o Googlebot visita um site, ele segue os links de navegação para entender como o conteúdo está organizado. Se os links forem fáceis de encontrar e seguir, o Googlebot conseguirá indexar melhor o conteúdo do seu site, o que pode ajudar a melhorar o ranking.

Core Web Vitals

Os Core Web Vitals são um conjunto de métricas desenvolvidas pelo Google para medir a experiência do usuário em um site, focando na performance e na interatividade. Elas são essenciais para avaliar como os usuários percebem a velocidade e a usabilidade de uma página. Em 2021, o Google passou a incorporar essas métricas como um fator de classificação nos resultados de busca, tornando-as fundamentais para o SEO.

Principais métricas:

• LCP (Largest Contentful Paint): Mede o tempo para carregar o maior elemento visível. Ideal: até 2,5 segundos.
• FID (First Input Delay): Avalia a responsividade à primeira interação do usuário. Ideal: menos de 100ms.
• CLS (Cumulative Layout Shift): Mede a estabilidade visual. Ideal: menos de 0,1.

Como otimizar:

• Minimize o uso de scripts bloqueadores.
• Reserve espaços para anúncios e imagens para evitar deslocamento de layout.
• Melhore a qualidade do servidor para reduzir tempos de resposta.

Estrutura de links internos

Uma estrutura de links internos bem planejada melhora tanto a experiência do usuário quanto o desempenho nos motores de busca, contribuindo para uma navegação mais eficiente e uma melhor distribuição de tráfego e autoridade entre as páginas.

Links internos ajudam os usuários a encontrar conteúdo relevante de forma rápida e intuitiva. Ao vincular páginas importantes, você transmite autoridade para outras páginas, o que pode melhorar seu SEO.

A estrutura de links internos permite que os motores de busca rastreiem e indexem melhor o conteúdo do site.

Design focado em conversão

O design focado em conversão é uma abordagem que visa otimizar o layout e os elementos de um site para incentivar os visitantes a realizar ações específicas, como comprar um produto, preencher um formulário ou se inscrever em uma newsletter. Esse tipo de design se concentra em facilitar a jornada do usuário, tornando o processo de conversão o mais simples e direto possível.

Para criar um design focado em conversão, é essencial:

• Chamar a atenção para os CTAs (Call to Actions): Botões de ação claros e visíveis, como “Comprar agora” ou “Inscreva-se”, devem ser destacados.
• Garantir uma navegação intuitiva: A estrutura do site deve ser simples e lógica, facilitando o acesso às informações importantes.
• Usar provas sociais e confiança: Incluir depoimentos, avaliações e selos de segurança pode aumentar a confiança do usuário e incentivá-lo a converter.

Um design focado em conversão é crucial para maximizar os resultados de um site, transformando visitantes em clientes ou leads de maneira eficiente.

Como medir o sucesso de SEO e UX?

Para gerenciar é preciso medir. Se você não sabe como medir, precisa aprender. Se o seu site está com eventos mapeados, usa ferramentas de análise de comportamento, gravações de telas, você pode facilmente perceber melhorias (ou não) em mudanças em componentes do site.

Seja rato em:

1. Google Analytics: acompanhe métricas como taxa de rejeição, tempo na página e conversões.
2. Google Search Console: verifique desempenho em palavras-chave e possíveis problemas técnicos.
3. Hotjar ou Crazy Egg: Analise mapas de calor e gravações para entender o comportamento dos usuários.
4. Core Web Vitals Report: acompanhe as métricas de experiência do usuário no Google Search Console.
5. Looker Studio: crie dashboards personalizados integrando dados do Google Analytics, Search Console, centralizando todas as métricas essenciais em um único painel para fácil monitoramento e otimização contínua.

Exemplo de dashboard simples no Looker Studio para mensurar quantidade de pageviews no site e coleta de leads qualificados pelo formulário de passo a passo para simulação de crédito consignado com garantia de imóvel. Acesse o site, clique em simular para ver o fluxo que criamos para coleta de leads.

Erros comuns ao integrar SEO e UX

1. Foco exclusivo em SEO técnico: ignorar a experiência do usuário pode gerar tráfego, mas não conversões.
2. Uso excessivo de palavras-chave: isso pode comprometer a legibilidade do conteúdo.
3. Negligência no design mobile: sites não otimizados para dispositivos móveis perdem ranqueamento e visitantes.

O casamento entre SEO e UX, na verdade SEO e desenvolvimento de produto, cria um elo perfeito entre “aparecer”, “engajar” e “reter”, onde os usuários satisfeitos elevam as métricas de engajamento, que conseqquentemente melhora os rankings e atrai mais visitantes qualificados. Para criar um site que ranqueie e converta, priorize sempre o usuário em suas estratégias mas não deixe de lado o usuário “robô”, no caso o Google ou outro mecanismo de pesquisas, e mantenha-se atualizado com as melhores práticas.

Aqui na Pink and Brain, somos ratos em criar sites que não só chamam a atenção, mas também convertem. Venha tomar um café digital e falar de negócios conosco.

O post SEO e UX: como criar sites que ranqueiam, engajam e convertem? apareceu primeiro em Pink and Brain.

Quando o maior elemento do layout é textual, o caminho até a renderização completa depende de etapas críticas: carregamento de fontes, aplicação de estilos CSS e disponibilidade dos recursos no servidor. Um atraso pequeno já compromete o indicador, o que pode impactar diretamente SEO e experiência do usuário.

Estratégias superficiais como simplesmente trocar a fonte ou instalar um plugin de cache não resolvem a raiz do problema do LCP no H1. É necessário pensar em pipeline de fontes, configuração de font-display, Critical CSS e decisões arquitetônicas sobre onde hospedar os arquivos.

O papel das fontes no LCP

O carregamento de fontes é, geralmente, o principal gargalo quando o LCP está em um título. Usar Google Fonts de forma padrão adiciona requisições externas que aumentam a latência, enquanto hospedar localmente (self-host) elimina essa dependência e permite compressão mais eficiente.

Estratégias de otimização de fontes

Critical CSS e renderização antecipada

Muitos problemas de LCP no H1 ou em textos não estão nas fontes em si, mas no bloqueio causado por folhas de estilo pesadas. A aplicação de Critical CSS resolve isso, colocando inline apenas os estilos necessários para renderizar o H1 e outros elementos-chave, enquanto o restante do CSS é carregado de forma assíncrona.

Boas práticas incluem:

• Incluir o CSS crítico no <head>.
• Carregar o CSS secundário com media="print" e liberar após onload.
• Usar ferramentas como Penthouse ou Critical para gerar automaticamente os blocos de CSS essenciais.

Exemplo de preload de fontes (self-host ou Google Fonts com ajuste)

<!-- Preconnect para reduzir latência -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload da fonte crítica usada no H1 -->
<link rel="preload" href="/fonts/Mulish-Bold.woff2" as="font" type="font/woff2" crossorigin>

<!-- Importação otimizada do Google Fonts com display=swap -->
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@700&display=swap" rel="stylesheet">

<!-- Preconnect para reduzir latência -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload da fonte crítica usada no H1 -->
<link rel="preload" href="/fonts/Mulish-Bold.woff2" as="font" type="font/woff2" crossorigin>

<!-- Importação otimizada do Google Fonts com display=swap -->
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@700&display=swap" rel="stylesheet">

O que acontece aqui:

• O navegador se conecta antes ao servidor de fontes (preconnect).
• A fonte do H1 é baixada com prioridade (preload).
• display=swap garante que o título apareça rápido com uma fonte fallback, enquanto a fonte personalizada termina de carregar.

Exemplo de Critical CSS inline + CSS assíncrono

<head>
  <!-- Critical CSS inline (apenas o necessário para renderizar o H1 rápido) -->
  <style>
    h1 {
      font-family: 'Mulish', sans-serif;
      font-weight: 700;
      font-size: 2.5rem;
      color: #111;
      margin: 0;
    }
  </style>

  <!-- CSS completo carregado de forma assíncrona -->
  <link rel="stylesheet" href="/css/styles.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="/css/styles.css"></noscript>
</head>

<head>
  <!-- Critical CSS inline (apenas o necessário para renderizar o H1 rápido) -->
  <style>
    h1 {
      font-family: 'Mulish', sans-serif;
      font-weight: 700;
      font-size: 2.5rem;
      color: #111;
      margin: 0;
    }
  </style>

  <!-- CSS completo carregado de forma assíncrona -->
  <link rel="stylesheet" href="/css/styles.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="/css/styles.css"></noscript>
</head>

O que acontece aqui:

• O navegador já consegue renderizar o H1 imediatamente com os estilos críticos.
• O CSS completo é baixado em paralelo, mas só é aplicado depois (media=print hack).
• Se o usuário tiver o JavaScript desativado, o noscript garante o carregamento normal.

Dica avançada: fallback de fontes inteligentes

Sempre configure uma cadeia de fontes fallback para o H1, por exemplo:

h1 {
  font-family: 'Mulish', 'Segoe UI', Roboto, Arial, sans-serif;
}

h1 {
  font-family: 'Mulish', 'Segoe UI', Roboto, Arial, sans-serif;
}

Assim, se a fonte customizada atrasar, o navegador usa uma fonte do sistema que mantém a consistência visual.

Checklist prático para evitar LCP no H1

1. Hospedar fontes localmente sempre que possível.
2. Usar compressão WOFF2 + Brotli para reduzir o peso das fontes.
3. Configurar font-display=swap ou optional.
4. Fazer preload das fontes usadas no H1 ou nos textos da primeira dobra da página.
5. Embutir Critical CSS inline.
6. Carregar CSS não essencial de forma assíncrona.
7. Validar resultados no Lighthouse e CrUX.

Perguntas frequentes sobre LCP em textos

O post Como resolver problemas de LCP no H1 ou em elementos textuais? apareceu primeiro em Pink and Brain.

Para ser bem sincero, eu César, já ví muitos casos de mudanças de layout que impactaram diretamente aquisição orgânica, fazendo sites “enormes” se tornarem “pintchers” em termos de visibildiade orgânica.

Uma mudança no design pode alterar a estrutura HTML da página, o que, por sua vez, impacta a forma como os bots de busca interpretam o site. Se o HTML for reorganizado ou otimizado de forma inadequada, o conteúdo que antes era destacado para os mecanismos de busca pode acabar se tornando menos relevante, prejudicando sua classificação. Além disso, elementos como a hierarquia de títulos, tags semânticas, e a velocidade de carregamento são diretamente influenciados pelo design, e todos esses fatores são cruciais para SEO.

Outro aspecto importante é a experiência do usuário (UX), que é diretamente afetada pelo design. A Google valoriza cada vez mais fatores de UX, como a responsividade para dispositivos móveis, o tempo de permanência no site e a taxa de rejeição. Se um redesign torna a navegação mais difícil ou o tempo de carregamento mais longo, isso pode gerar uma queda no tráfego orgânico e nas classificações de pesquisa.

Lembre-se que, ao considerar uma re-prototipação completa de um site, ou mesmo um template (como uma página de matéria ou de produto), ou até mesmo a inclusão de novos componentes em templates já existentes como uma simples sidebar, etc… leve em consideração analisar friamente os impacos para SEO e peça orientações de um analista experiente, que possa recomendar, pré-validar, acompanhar as mudanças e pós-validar.

É de fato vital entender que isso vai muito além da estética.

Mudanças em design de componentes e templates que modificam o HTML e alguns assuntos chave para serem considerados

Quando um novo design é implementado, a estrutura HTML da página pode mudar consideravelmente. Além disso, pode impactar inclusive perfomance, aumentar tempo de carregamento, incluir tags “desnecessárias”, etc…

Impacto por simples mudança na hierarquia dos elementos

• Mudanças na disposição dos elementos podem alterar a ordem em que o conteúdo é carregado no HTML. Os motores de busca leem o conteúdo em ordem, dando mais peso ao que aparece primeiro no código.
• A posição e “ordem” que as tags são colocadas no HTML influenciam sim muitas premissas para SEO.

Uso de tags semânticas

• Um design bem estruturado usa tags HTML semânticas (como <article>, <section>, <nav>, <aside>, <main>, etc…) que ajudam os motores de busca a entender o propósito de cada parte da página, inclusive identificar o que é “mais importante”, o que se relaciona com o “mais importante”, dentre outras abordagens.
• Se o novo design substituir essas tags semânticas por <div> genéricas ou elementos visualmente atrativos mas semanticamente fracos, como <span>, isso pode dificultar a compreensão do conteúdo pelos crawlers.
  • Fato até interessante mas esses builders de sites famosos (que jamais recomendamos) como Wix e Elementor (pluign de WordPress), acompanharam essa tendência semântica do HTML e, em suas plataformas, já colocam a critério do editor criar a semãntica que ele deseja para cada elemento em tela.

Dica: Se for mudar um template, cuidado com esses pontos e aproveite esse momento inclusive para “potencializar” a semântica do site atual.

Velocidade de carregamento da página

• Alterações no design, como o uso de gráficos de alta resolução, vídeos em autoplay ou scripts complexos, podem aumentar o tempo de carregamento da página. A velocidade de carregamento é um fator essencial para o SEO, uma vez que páginas lentas tendem a ter uma classificação mais baixa.

Dica: Use ferramentas como o Google PageSpeed Insights para avaliar a performance e reduzir o tamanho de arquivos de mídia grandes.

Impactos indiretos de um redesign

Além das mudanças diretas no HTML, outras variáveis afetadas por um redesign também podem ter impacto em SEO. Estes são fatores que não estão necessariamente relacionados ao código, mas que influenciam a experiência do usuário (UX) e a forma como o Google classifica uma página:

Responsividade e Mobile-First Indexing

• Um novo design pode melhorar (ou piorar) a responsividade da página, ou seja, a capacidade do site de se adaptar a diferentes dispositivos e tamanhos de tela. Com o Mobile-First Indexing, o Google utiliza a versão móvel de um site para classificação.
• Se o redesign não for otimizado para dispositivos móveis, isso pode prejudicar o ranqueamento.

Dica: Teste o novo design em diversos dispositivos e use layouts responsivos (como Flexbox ou Grid) para garantir que a página seja otimizada para telas menores. Como dito: aproveite esse momento de mudança de layout para potencializar a semãntica HTML e outras premissas benéficas para SEO.

Experiência do Usuário (UX)

• O tempo que os usuários permanecem no site, a facilidade de navegação e a taxa de rejeição são fatores que afetam SEO. Um design mais truncado, confuso ou difícil de “rolar” pode aumentar a taxa de rejeição, e consequentemente posicionamento na SERP.

Dica: Invista em uma navegação clara e em um design intuitivo para manter os usuários engajados. Menos é MUITO mais em design e desenvolvimento web. Aqui na Pink and Brain costumamos criar aplicações simples porém com ótima acessibilidade.

Core Web Vitals

• As Core Web Vitals são métricas de usabilidade que medem a interação e o desempenho de uma página. Eles incluem Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Mudanças no design podem influenciar diretamente essas métricas.
• Por exemplo, um layout que se move durante o carregamento ou que não responde rapidamente pode prejudicar o CLS e o FID.

Dica: Teste o design em relação aos Core Web Vitals e faça ajustes para garantir uma boa pontuação.

De uns 5 anos para cá que de fato falamos que o tempo de carregamento influencia diretamente o posicionamento na SERP. Esse tema é fundamental para qualquer site, independente do mercado e nicho de atuação, você irá se destacar se tiver uma aplicação veloz.

Em 2024 não existe mais espaço para site oneroso nos resultados de pesquisas.

Digo isso a 10 anos aka. Césinha

Redirecionamentos e URLs

Mesmo que não relacionado diretamente, pois na maioria dos casos não há qualquer mudança de URL na mudança de templates, devemos levar em consideração esse aspecto por alguns motivos:

• Um novo design pode exigir mudanças na estrutura da URL, o que pode resultar em links quebrados ou redirecionamentos inadequados. Isso afeta o SEO, pois páginas com links quebrados ou redirecionamentos mal configurados podem ser penalizadas.
• Se houver uma migração de uma plataforma para outra, um CMS para outro, uma loja de e-commerce para outra, já é motivo suficiente para você criar uma frente clara para URLs, padrões, apontamentos.
• Uma simples BARRA “/” diferente de uma URL ppara outra pode comprometer o SEO como um soco do Tyson em 98. Note que as URLs abaixo são diferentes:
  • https://www.pinkandbrain.com/servicos/seo-search-engine-optimization/
  • https://www.pinkandbrain.com/servicos/seo-search-engine-optimization

Dito isso, e mais diversos outras frentes que uma migração de URLs possa gerar, entenda se haverá mudanças nesse sentido.

Dica: Caso exista mudanças inevitáveis nas URLs, mapeie todas as URLs antigas, crie padrões e sinalize possíveis redirecionamentos para serem configurados na mudança.

Benefícios de ter um especialista de SEO na concepção dos protótipos de web design

Especialistas em SEO são profissionais versáteis e autodidatas que acumulam uma vasta experiência ao longo de suas carreiras. Eles não apenas dominam as melhores práticas para otimização de mecanismos de busca, mas também entendem profundamente como a estrutura e o design de um site impactam seu desempenho. Esses profissionais já criaram diversos projetos pessoais, ajudaram empresas de diferentes tamanhos a crescer digitalmente e enfrentaram desafios complexos, como atualizações de algoritmos que muitas vezes mudam radicalmente o cenário do SEO.

Além disso, por acompanharem a evolução do mercado, os especialistas em SEO têm um conhecimento aguçado sobre a anatomia ideal de sites e templates, o que inclui o arranjo estratégico de elementos que favorecem tanto o usuário quanto os mecanismos de busca. Eles sabem como otimizar a formatação do HTML, sugerindo melhorias que podem parecer simples, mas fazem toda a diferença, como a correta hierarquização de títulos, uso de tags semânticas e recursos leves, como sliders e galerias otimizados.

Por essa expertise abrangente, esses profissionais são peças essenciais no desenvolvimento de qualquer produto digital que dependa de tráfego web. Eles atuam como consultores 360º, pensando em marketing, disposição de conteúdo, comercial, aquisição orgânica, performance de renderização, dentro outros “n” assuntos, garantindo que o site não apenas esteja otimizado tecnicamente, mas também ofereça uma excelente experiência de navegação para os usuários.

Além de evitar erros que podem prejudicar a visibilidade do site, um design bem planejado e assessorado por especialistas em SEO oferece benefícios duradouros (ou pelo menos longínquos).

Melhorias na navegação interna

• Um design bem feito pode e deve melhorar e incentivar a navegação interna, facilitando o acesso dos usuários a várias partes do site e uma maior exploração do conteúdo. Essa rede criada, beneficia SEO, mas antes de tudo, cria laços mais sólidos com os produtos e a marca.

Conteúdo mais acessível

• Um design que facilita a leitura e o acesso ao conteúdo aumenta o tempo de permanência dos usuários no site, reduz a taxa de rejeição e aumenta o engajamento dos usuários, fatores que são valorizados pelos motores de busca.

Case rápido para pensar: como a CNN cresceu tanto de 2020 para 2024 no mercado super concorrido de publishers?

A CNN teve a oportunidade de criar um CMS praticamente do zero, com inputs supoer claros de SEO e produto.

Lembro que quando eu e o Mago chegamos praticamente no day 0 da CNN no Brasil, junto com uma equipe super enxuta de produto, já identificamos de cara que a plataforma que eles tinham contratado como publicador era “péssima”, pois não era algo open source, e sim algo que uma empresa terceira tinha feito sob encomenda, cobrado uma fortuna e sem conhecimento NENHUM com SEO: isso em 2020, já com o tema super conhecido e “antigo”.

Pink and Brain

O CMS que tínham não cropavam imagens, não existia semântica, dados estruturados, feeds, para ser bem sincero: o Google nem enxergava as páginas, por ter sido feito e, JS com React sem nenhum tipo de geração de páginas estáticas para leitura dos crawlers. Era um verdadeiro horror.

Mas foi aí que fomentamos a cultura de ter time interno fazendo tudo, criamos um objetivo de prototipar todos os nossos templates com todos os melhores inputs, e usar uma plataforma open source, como o WordPress, parar criar nosso próprio tema, limpo, parrudo, interressante para crawlers, performático, simples, enfim..

Foram 6 meses desenhando componentes, design system, esboçando templates, diferentes editorias, até sempre ter um consenso dos especialistas sobre o status da arte. As recomendações de SEO foram fundamentais para gerir essa orquestra: aquisição orgânica não se discute em um publisher.

Nós já tínhamos larga experiência com Publishers na verdade. Tínhamos trabalho na Exame, fazendo a migração completa do grupo Abril para o BTG, mudando domínio, design, criando novas verticais, plataformas de cursos, enfim, tínhamos voz bem ativa para as propostas, mesmo que sempre bem fundamentada.

Saimos de lá 2 anos depois para iniciar nossa jornada enquanto Pink and Brain, mas até hoje vejo o quanto esse alicerce foi fundamental para o contínuo crescimento da visibilidade da empresa na internet. Inclusive esse crescimento vertiginoso de audiência assustou os outrosa players e um dos diretores do G1 que mudou para a CNN dizia que eles nem “viram a gente chegar”, de tão rápido e expressivo que foi.

Repare no gráfico retirado do SEMRUSH o período de incubadora, onde desenhamos e desenvolvemos, e uma enorme ascenção ao longo de 16 meses. Saímos na crista alta, mas por um desafio maior. Desde então, mesmo com todas as mudanças que ocorrem no Google, chegada de AI, eles se mantiveram grandes, criaram novas editorias como Esportes que é por si só muito maior que outras existentes, e quando pesquisamos sobre fuitebol por exemplo, eles sempre estão bem, brigando com os maiores do segmento.

Além disso, absurdos 91 de autoridade de domínio, maior que o G1 que possui 90, e ainda distante dos 97 da UOL.

Esse tema tem muito para falar. E esse psot nem seria suficiente para tratar tudo que enxergamos de fundamentais numa estratégia de mudança de aplicação, seja em design, tecnologias, e seus impactos para aquisição orgânica.

Mas lembre-se:

Uma simples mudança no design pode ter grandes implicações para SEO, afetando desde a estrutura HTML até a experiência do usuário. Ao planejar um redesign, é essencial garantir que todos os aspectos da página — tanto visuais quanto técnicos — estejam otimizados para SEO. O equilíbrio entre um design atraente e uma estrutura de código eficiente é a chave para garantir que seu site não apenas tenha uma boa aparência, mas também tenha um bom desempenho nos motores de busca.

Se você precisa de ajuda para criar uma estratégia fundamentada em desenvolvimento web, design UX, UI, SEO e Web Analytics, conte com a Pink and Brain. Somos ratos quando o assunto é SEO.

O post Vou mudar o layout do meu site: como não prejudicar o SEO? apareceu primeiro em Pink and Brain.

Vamos entender melhor o que isso significa e como você pode otimizar seu site para ter uma boa nota nessa métrica.

O que é INP (Interaction to Next Paint)?

A INP é uma métrica crucial do Google para medir a experiência do usuário em relação ao tempo de interação. Diferente da FID, que apenas registrava o tempo de resposta da primeira interação do usuário, a INP considera todas as interações realizadas em uma página, identificando a mais lenta delas e calculando o atraso até a próxima pintura da tela.

A principal diferença é que a INP é uma métrica mais abrangente e precisa, pois leva em consideração o ciclo completo de interações, em vez de focar apenas na primeira. Isso faz com que a avaliação da experiência do usuário seja mais fiel ao comportamento real de navegação em uma página.

Como funciona a INP?

A INP mede o atraso total de todas as interações de um usuário durante o ciclo de vida da página até o próximo quadro de renderização. O Google já forneceu uma escala para avaliar a pontuação da INP:

• Abaixo de 200 milissegundos: Bom
• Entre 200 e 500 milissegundos: Precisa de melhorias
• Acima de 500 milissegundos: Ruim

Em comparação com o FID, a INP oferece uma visão mais detalhada, capturando o comportamento de interação do usuário de forma mais ampla.

A transição do FID para a INP

A transição para a INP não é uma novidade repentina. Desde 2021, o Google já vinha publicando algumas limitações do FID e começou a explorar formas de melhorar a precisão das métricas de interação. A mudança para a INP foi uma resposta direta a essas limitações, visando oferecer uma métrica mais eficaz que refletisse melhor a experiência do usuário nas páginas da web.

A jornada da INP: como tudo começou?

A história da INP começou em junho de 2021, quando os desenvolvedores do Google Chrome começaram a investigar uma forma de melhorar a medição da interação do usuário com uma página. Eles identificaram que o FID não era suficiente para capturar todas as nuances da interação de um usuário com a página. Foi nesse contexto que começou o desenvolvimento da INP.

No início de 2022, o nome da nova métrica foi revelado oficialmente, e o Google compartilhou alguns dados sobre o comportamento dos usuários. A empresa observou que 90% do tempo que um usuário passa em uma página ocorre depois que ela é carregada, ou seja, muito depois que a primeira interação acontece. Isso fez com que fosse necessário considerar todas as interações, e não apenas a primeira, para oferecer uma medição precisa da experiência do usuário.

Como a INP pode impactar sites?

Com a implementação da INP, os desenvolvedores e administradores de sites tem um método mais eficaz para medir e melhorar a capacidade de resposta das páginas. Para garantir que seu site seja bem classificado em termos de Core Web Vitals, você precisará se concentrar na otimização de todas as interações, especialmente as que afetam o tempo até a próxima pintura.

Essa mudança também implica que, ao otimizar o tempo de resposta de uma página, você deve focar em oferecer feedback visual imediato para o usuário durante as interações, como um indicador de que algo está acontecendo. O atraso na resposta pode dar a impressão de que a página não está funcionando corretamente, o que impacta negativamente a experiência do usuário.

A INP e suas implicações para SEO

O INP é mais uma tentativa do Google de oferecer uma medição mais precisa da experiência do usuário, o que está diretamente ligado ao SEO. A experiência do usuário sempre foi um fator importante para o Google, e a INP ajudará a garantir que os sites ofereçam uma navegação mais fluida e interativa.

Se a INP for bem otimizada, ela poderá ajudar o seu site a ter uma classificação mais alta nos resultados de pesquisa. Portanto, é fundamental que os desenvolvedores e administradores de sites comecem a focar na melhoria da capacidade de resposta de suas páginas, especialmente com relação ao tempo de interação.

O que fazer para melhorar a métrica?

Agora é o momento perfeito para começar a otimizar seu site em relação à INP. Aqui estão algumas dicas para você começar:

1. Melhore a capacidade de resposta: Certifique-se de que seu site seja rápido e responsivo a todas as interações dos usuários.
2. Reduza o tempo de bloqueio de entrada: Minimize o tempo que a página leva para responder a uma interação do usuário.
3. Forneça feedback visual imediato: Ofereça ao usuário uma indicação clara de que sua interação foi registrada, como animações ou ícones que mostrem que algo está acontecendo.

Fique atento às mudanças e otimize seu site! Caso precise de mais informações sobre SEO e Core Web Vitals, entre em contato com os ratos do Google e venha tomar um café digital.

O post Conheça a INP (Interaction to Next Paint), métrica das Core Web Vitals apareceu primeiro em Pink and Brain.

No entanto, a boa notícia é que há estratégias para se recuperar de uma perda de tráfego orgânico e até melhorar seu desempenho a longo prazo.

Neste artigo, vamos explorar como identificar, analisar e agir para recuperar o tráfego após uma atualização do algoritmo do Google.

Entenda a atualização do algoritmo

Antes de agir, é crucial entender o que mudou com a atualização. O Google geralmente não revela detalhes exatos de cada atualização, mas muitas vezes há pistas sobre o que foi alterado e como isso pode afetar seu site. As atualizações podem ser focadas em diversos aspectos, como:

• Qualidade de conteúdo: O Google pode ter mudado a forma como avalia a relevância ou a qualidade do conteúdo, favorecendo conteúdo mais útil, original e bem estruturado.
• Backlinks e autoridade de domínio: Atualizações podem afetar o modo como o Google avalia backlinks e a autoridade do domínio, priorizando fontes confiáveis.
• Experiência do usuário (UX): O Google pode ter feito alterações nos critérios de usabilidade, como tempo de carregamento das páginas, design responsivo e a navegação do site.
• Pesquisas semânticas e intenções de busca: O Google pode ter dado mais ênfase em entender a intenção por trás das pesquisas, favorecendo páginas que respondem melhor às dúvidas dos usuários.

Uma vez que você identifica qual área pode ter sido afetada, pode começar a ajustar sua estratégia de SEO.

Faça uma análise completa do seu site

A análise de desempenho do seu site após a atualização é fundamental. Utilize ferramentas como o Google Search Console e Google Analytics para entender as mudanças no tráfego e nas palavras-chave. Pergunte-se:

• Quais páginas perderam tráfego? Identifique as páginas que foram mais impactadas pela atualização e se concentre nelas.
• Quais palavras-chave foram afetadas? Veja se houve uma perda de posições para palavras-chave específicas. Isso pode indicar que seu conteúdo precisa ser mais relevante ou atualizado.
• Mudanças no comportamento dos usuários: Se o tráfego diminuiu, mas as taxas de rejeição aumentaram, isso pode sugerir problemas com a experiência do usuário, que podem ter sido influenciados pela atualização do algoritmo.

Após identificar os problemas, você pode decidir onde concentrar seus esforços para a recuperação.

Revise a qualidade do conteúdo

O Google sempre priorizou conteúdo de alta qualidade, e as atualizações recentes, como as de Core Web Vitals ou atualizações de E-A-T (Expertise, Authoritativeness, Trustworthiness), ampliaram ainda mais essa abordagem. Se seu site perdeu tráfego devido à qualidade do conteúdo, considere as seguintes ações:

• Melhore a relevância e profundidade do conteúdo: Verifique se o conteúdo do seu site está completo, bem estruturado e relevante para o público-alvo. Responda completamente às perguntas dos usuários e garanta que seu conteúdo seja atualizado.
• Foque na intenção de busca: Alinhe seu conteúdo com a intenção por trás da consulta do usuário. Pode ser que seu conteúdo não esteja mais atendendo à necessidade de quem está pesquisando.
• Aposte em conteúdo visual e interativo: O Google tem dado mais ênfase ao conteúdo visual (imagens, vídeos, infográficos) que melhora a experiência do usuário. Incorporar mais elementos visuais pode aumentar o tempo de permanência no site e diminuir a taxa de rejeição.
• Use dados estruturados (Schema Markup): Se ainda não utilizou, adicione marcação de dados estruturados para ajudar o Google a entender melhor o seu conteúdo e como ele se relaciona com a pesquisa dos usuários.

Melhore a experiência do usuário (UX)

O Google tem dado grande importância à experiência do usuário, especialmente com o foco nas métricas de Core Web Vitals, que incluem:

• LCP (Largest Contentful Paint): Tempo de carregamento do maior elemento visível da página.
• FID (First Input Delay): Tempo que o site leva para responder à interação do usuário.
• CLS (Cumulative Layout Shift): A instabilidade visual ao carregar uma página.

Caso seu site tenha tido uma queda de tráfego, vale a pena verificar essas métricas com ferramentas como o PageSpeed Insights. Melhorar a velocidade de carregamento, otimizar o design e garantir que o site seja responsivo em dispositivos móveis são ações essenciais.

Além disso, a navegabilidade e estrutura do site devem ser fáceis e intuitivas. Uma boa experiência de navegação contribui diretamente para a retenção de usuários e o tempo de permanência no site.

Verifique os backlinks

Os backlinks continuam sendo um dos fatores mais importantes para o ranqueamento no Google. Se sua página perdeu posições devido a mudanças no algoritmo que afetam a avaliação dos backlinks, considere:

• Auditar seus backlinks: Use ferramentas como Ahrefs, SEMrush ou Moz para verificar a qualidade dos seus backlinks. Remova links de baixa qualidade que podem estar prejudicando seu site.
• Obter backlinks de qualidade: Concentre-se em adquirir backlinks de sites relevantes e de autoridade. Isso pode ajudar a restaurar a confiança do Google no seu site.
• Diversificação de backlinks: Tente obter backlinks de diversas fontes e tipos, incluindo blogs, sites de notícias, redes sociais e diretórios relevantes.

Revise a estrutura técnica do seu site

Problemas técnicos podem afetar o desempenho do seu site e sua capacidade de ranquear corretamente, especialmente após uma atualização do algoritmo. Algumas questões a serem verificadas incluem:

• Erros de rastreamento: Use o Google Search Console para verificar se há erros de rastreamento ou páginas não indexadas.
• Redirecionamentos e links quebrados: Verifique se todos os redirecionamentos estão configurados corretamente e se não há links quebrados que possam afetar a experiência do usuário.
• Sitemap XML: Certifique-se de que o sitemap XML está atualizado e enviado para o Google Search Console, para garantir que todas as páginas importantes sejam indexadas.

Mantenha-se atualizado com as diretrizes do Google

O Google está constantemente atualizando suas diretrizes e seu algoritmo. Para garantir que você continue seguindo as melhores práticas e as mudanças mais recentes, acompanhe as atualizações do Google e revise suas práticas de SEO periodicamente. O Google publica informações sobre atualizações de algoritmos no seu blog oficial e nas Webmaster Guidelines, o que pode ajudar a entender melhor o que foi alterado.

Monitore os resultados e seja paciente

Após implementar as melhorias, monitore cuidadosamente o desempenho do seu site nos meses seguintes. Pode levar algum tempo até que as mudanças façam efeito e seu tráfego orgânico comece a se recuperar. Utilize ferramentas de análise para acompanhar as posições das palavras-chave, o tráfego e as métricas de engajamento do usuário. Não desanime se os resultados não forem imediatos, a recuperação de tráfego pode ser um processo gradual.

Recuperar o tráfego orgânico após uma atualização do algoritmo do Google pode ser desafiador, mas com uma abordagem estruturada e focada em qualidade, você pode restaurar sua posição nos resultados de busca. Lembre-se de que o Google valoriza a experiência do usuário, o conteúdo relevante e de alta qualidade, além de boas práticas de SEO técnico. Se você revisar e ajustar continuamente seu site com base nessas diretrizes, seu tráfego orgânico tem grandes chances de se recuperar e até melhorar a longo prazo.

Se você precisar recuperar o tráfego do seu site e não sabe como, entre em contato com os ratos da Pink and Brain. Ficaremos felizes em ajudá-lo

O post Como recuperar o tráfego orgânico após uma atualização do algoritmo do Google apareceu primeiro em Pink and Brain.

Melhorar a performance de um site, no entanto, nem sempre é uma tarefa simples, pois envolve tanto conhecimento técnico de desenvolvimento quanto de SEO.

Martin Splitt, da equipe de desenvolvedores do Google, compartilhou algumas sugestões práticas que podem ajudar a melhorar o desempenho de um site. Vamos explorar três dessas dicas.

Otimização de JavaScript

O JavaScript é frequentemente citado como uma das principais causas de lentidão em sites. Muitas vezes, ele é mal estruturado, resultando em arquivos grandes e difíceis de processar, o que afeta negativamente o tempo de carregamento.

Uma solução recomendada por Martin é a utilização de code splitting, que carrega apenas os trechos de código necessários para cada parte da página. Outra dica é usar content hash para facilitar o cache dos arquivos, o que reduz a necessidade de reprocessar o conteúdo sempre que a página é acessada.

Essas estratégias podem exigir a ajuda de desenvolvedores, mas o impacto na performance vale o esforço, melhorando o tempo de resposta do site e as métricas de avaliação do Google.

Aqui no site da Pink and Brain usamos apenas o necessário de JavaScript, e por esse motivo, temos notas acima de 90 de performance:

Redirecionamentos: evite os desnecessários

Redirecionamentos podem introduzir atrasos no carregamento das páginas, já que o navegador precisa seguir uma sequência de URLs antes de entregar o conteúdo final ao usuário. Isso pode prejudicar a impressão de velocidade do site.

Martin sugere que os redirecionamentos sejam utilizados apenas em casos estritamente necessários, como mudanças de URL após uma migração ou alterações na estrutura do site. Ferramentas como o Google Search Console podem ajudar a identificar e corrigir redirecionamentos desnecessários, evitando cadeias longas ou loops que comprometem o desempenho.

Otimização de imagens

Imagens de alta resolução são um dos principais vilões no carregamento lento de páginas. Para contornar esse problema, existem algumas práticas simples, recomendadas por Martin, que podem melhorar drasticamente o tempo de carregamento.

Essas práticas incluem:

• Escolher o formato ideal para cada imagem (por exemplo, JPEG, AVIF ou WebP para fotos inclusive com transparência);
• Compatação e GZIP;
• SVG para vectores e ícones;
• Garantir que as imagens sejam responsivas, ou seja, que se ajustem automaticamente ao tamanho da tela do usuário.
• Utilizar o lazy loading, que carrega imagens conforme o usuário rola a página, evitando o carregamento desnecessário de todos os elementos de uma vez.

Por que a velocidade do site é importante para SEO?

Embora a performance de um site não seja o único fator de ranqueamento, ela afeta diretamente a experiência do usuário, e o Google prefere exibir sites que ofereçam uma navegação mais fluida. Sites lentos tendem a ter maior taxa de rejeição, o que impacta negativamente nos resultados orgânicos.

Como destacado por Martin Splitt, a performance do site não é um fator absoluto, mas faz parte de um conjunto de critérios que influenciam o ranqueamento. Assim, não adianta focar exclusivamente na performance sem considerar a relevância do conteúdo, que ainda é o principal fator.

O que são Core Web Vitals?

Os Core Web Vitals são essenciais para melhorar a performance do site, complementando as dicas compartilhadas por Martin Splitt sobre otimização de JavaScript, redirecionamentos e imagens. Eles avaliam aspectos cruciais da experiência do usuário, como o Largest Contentful Paint (LCP), que mede o tempo de carregamento, o First Input Delay (FID), que monitora a interatividade, e o Cumulative Layout Shift (CLS), que verifica a estabilidade visual.

Essas métricas reforçam a importância de otimizar cada elemento da página para garantir não só uma boa experiência ao usuário, mas também melhorar o ranqueamento nos motores de busca, como o Google.

A otimização da performance deve ser prioridade em qualquer projeto de SEO técnico. Se você está buscando orientações mais específicas sobre como melhorar a performance do seu site e alcançar melhores resultados no Google, nossa equipe está pronta para ajudar!

Somos ratos quando o assunto é criar sites velozes e performáticos.

O post 3 dicas super valiosas para tornar o seu site mais rápido apareceu primeiro em Pink and Brain.