Categoria Desenvolvimento web - Boost Digital | Pink and Brain

Como resolver problemas de LCP no H1 ou em elementos textuais?

Pink and Brain — Mon, 30 Mar 2026 16:25:24 +0000

O Largest Contentful Paint (LCP) é hoje um dos pilares mais relevantes do Core Web Vitals. Ele mede o tempo que o maior elemento visível na tela leva para ser renderizado. Muitas vezes pensamos em imagens ou banners como responsáveis por atrasar esse processo, mas em diversos sites o grande gargalo está justamente no H1 ou em blocos de texto destacados.

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

Estratégia	Vantagem	Risco/Observação
Google Fonts sem ajustes	Fácil de implementar	Latência extra em cada request
Google Fonts com `display=swap`	Texto aparece rápido com fallback	Pode gerar FOUT (flash de texto)
Self-host (no servidor)	Reduz latência e depende só do seu ambiente	Requer gestão de versões e compressão
Preload de fontes críticas	Garante prioridade na renderização	Se usado em excesso, pode atrapalhar o carregamento de outros recursos

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 .
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)

HTML

<!-- 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">


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>


<link rel="preload" href="/fonts/Mulish-Bold.woff2" as="font" type="font/woff2" crossorigin>


<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@700&display=swap" rel="stylesheet">

HTML

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

HTML

<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>
  
  <style>
    h1 {
      font-family: 'Mulish', sans-serif;
      font-weight: 700;
      font-size: 2.5rem;
      color: #111;
      margin: 0;
    }
  style>

  
  <link rel="stylesheet" href="/css/styles.css" media="print" onload="this.media='all'">
  <noscript><link rel="stylesheet" href="/css/styles.css">noscript>
head>

HTML

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:

HTML

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

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

HTML

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

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

Perguntas frequentes sobre LCP em textos

O que é o LCP e por que ele importa para SEO?

O LCP mede o tempo de renderização do maior elemento visível da tela. É um Core Web Vital e influencia diretamente a experiência do usuário e o ranqueamento no Google.

Vale a pena usar sempre display=swap no Google Fonts?

Sim, na maioria dos casos. Ele garante que o texto apareça imediatamente com fonte fallback, mesmo que a fonte personalizada demore a carregar.

É melhor hospedar as fontes no Google ou no meu servidor?

Hospedar no servidor geralmente traz melhores resultados porque elimina requisições externas. Mas é importante usar compressão e preload para realmente obter ganhos.

O Critical CSS é obrigatório?

Não é obrigatório, mas é altamente recomendado. Ele reduz o tempo até a renderização do conteúdo principal e pode ser decisivo em páginas pesadas.

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

Otimização de Crawl Budget: como filtrar parâmetros baseados em filtros? guia robots.txt

César Canteiro — Wed, 04 Mar 2026 11:10:21 +0000

A navegação por filtros é um recurso comum em sites, permitindo que os visitantes ajustem como itens (como produtos, artigos ou eventos) são exibidos em uma página. Embora seja uma funcionalidade útil, sua implementação mais comum — baseada em parâmetros de URL — pode gerar um número infinito de combinações de URLs e, inclusive, prejudicar estratégias de SEO de várias maneiras:

Rastreamento excessivo: os mecanismos de busca acessam uma grande quantidade de URLs geradas pelos filtros, sem saber se elas são úteis, desperdiçando recursos do servidor.
Rastreamento de descoberta mais lento: o tempo consumido em URLs de filtros inúteis reduz a capacidade do Googlebot de rastrear novas páginas importantes.
Canibalização excessiva: quando páginas concorrem entre si pois possuem termos e semântica HTML similares

Por exemplo, uma URL com filtros pode ser assim:

HTML

https://exemplo.com/produtos?categoria=peixe&cor=verde_radioativo&tamanho=pequeno

https://exemplo.com/produtos?categoria=peixe&cor=verde_radioativo&tamanho=pequeno

HTML

Cada filtro gera uma nova combinação de URLs, aumentando exponencialmente o volume de páginas para rastrear.

Exemplo de URL com parâmetros em site de pesquisa jurídica:

Por que gerenciar o rastreamento de URLs com filtros?

Se você não gerenciar adequadamente essas URLs, elas podem:

Prejudicar o orçamento de rastreamento do seu site (crawl budget).
Aumentar o consumo de recursos do servidor.
Gerar páginas duplicadas ou de baixo valor indexadas no Google.

Portanto, é importante definir se essas URLs devem ser indexadas ou bloqueadas, dependendo dos objetivos do seu site.

Como impedir o rastreamento de URLs com parâmetros de filtros

Se você não precisa que as URLs com filtros sejam indexadas, é recomendável bloquear o rastreamento dessas URLs usando o arquivo robots.txt.

Disallow pelo robots.txt

Suponha que os parâmetros categoria, cor e tamanho estejam gerando filtros desnecessários. Você pode adicionar as seguintes regras:

HTML

User-agent: Googlebot  
Disallow: /*?*categoria=  
Disallow: /*?*cor=  
Disallow: /*?*tamanho=  
Allow: /*?categoria=todos$

User-agent: Googlebot  
Disallow: /*?*categoria=  
Disallow: /*?*cor=  
Disallow: /*?*tamanho=  
Allow: /*?categoria=todos$

HTML

Explicação:

Disallow impede que o Googlebot rastreie URLs com os parâmetros especificados.
Allow permite URLs específicas importantes, como uma listagem geral.

Exemplo de aplicação no site do Jusbrasil:

Reparem que existem regras específicas para indexar a primeira página de um resultado de busca e as internas não, dentre outras estratégias.

Uso estratégico da tag rel=”canonical”

Para URLs de filtros, adicione a tag canonical apontando para a URL principal (sem filtros).

HTML

<link rel="canonical" href="https://exemplo.com/produtos" />

<link rel="canonical" href="https://exemplo.com/produtos" />

HTML

Uso estratégico de rel=”nofollow” em links

Adicione rel="nofollow" nos links que levam a páginas com filtros, impedindo que o Google siga esses links.

HTML

<a href="https://exemplo.com/produtos?cor=verde" rel="nofollow">Ver produtos verdes</a>

<a href="https://exemplo.com/produtos?cor=verde" rel="nofollow">Ver produtos verdesa>

HTML

Retorne o status 404 para filtros inválidos

Se um filtro não retornar nenhum resultado (por exemplo, produtos inexistentes), retorne um código HTTP 404. Isso evita que o Google indexe URLs sem valor.

Use fragmentos de URL (#)

Se possível, substitua parâmetros de URL por fragmentos, que não são rastreados pelo Google.

HTML

https://exemplo.com/produtos#categoria=peixe&cor=verde

https://exemplo.com/produtos#categoria=peixe&cor=verde

HTML

Insights finais

A navegação por filtros é uma funcionalidade poderosa, mas pode prejudicar o SEO do site se não for bem gerenciada. Avalie suas necessidades:

Se as URLs com filtros não forem importantes, bloqueie o rastreamento usando robots.txt.

Se forem necessárias para indexação, otimize-as com tags canonical ou nofollow e mantenha uma estrutura de URL limpa e eficiente. Avalie criar URLs atomizadas caso as de parâmetros sejam relevantes.

Se você precisa de mentes no seu negócio, saiba que a Pink and Brain pode te ajudar. Somos ratos quando o assunto é SEO e marketing digital. Venha tomar um café digital.

O post Otimização de Crawl Budget: como filtrar parâmetros baseados em filtros? guia robots.txt apareceu primeiro em Pink and Brain.

HTTP Headers o que são? O que o analista de SEO deve saber?

César Canteiro — Thu, 19 Feb 2026 22:38:57 +0000

Os HTTP headers são elementos fundamentais para o funcionamento da web moderna, sendo utilizados para enviar e receber informações essenciais entre cliente e servidor. Cada requisição HTTP contém um conjunto de headers que define desde a natureza da requisição até a forma como os dados devem ser tratados. Eles carregam informações importantes sobre a solicitação (request) e a resposta (response), como tipo de conteúdo, status da requisição, autenticação, entre outros. Esses cabeçalhos são essenciais para que servidores e navegadores possam entender como processar a informação de maneira correta, eficiente e segura.

Além disso, desempenham um papel crucial na otimização de performance, segurança e até mesmo na personalização de conteúdo. São elementos que todo analista de SEO deve dominar muito bem, pois ajudam a otimizar diversos aspectos técnicos de um site ou aplicação.

Ao longo dos anos, o uso dos HTTP headers evoluiu consideravelmente. Inicialmente, eles eram usados para especificar apenas informações básicas, como tipo de conteúdo e status da resposta. No entanto, à medida que a web cresceu em complexidade, surgiram headers mais avançados para tratar de caching, autenticação, compressão e controle de acesso.

Desde a invenção do protocolo HTTP nos anos 90, os headers têm evoluído junto com a web. Inicialmente, o HTTP/1.0 oferecia um número limitado de cabeçalhos. No entanto, com o surgimento do HTTP/1.1 e, mais recentemente, do HTTP/2 e HTTP/3, novos tipos de cabeçalhos foram introduzidos para otimizar a performance e melhorar a segurança. Cada versão do protocolo trouxe melhorias que afetaram diretamente a forma como os cabeçalhos são utilizados.

Atualmente, os headers estão no centro das preocupações de performance e segurança na web, com o surgimento de boas práticas como o uso de headers de segurança (Content-Security-Policy, Strict-Transport-Security) e de controle de cache para otimização de recursos estáticos.

Por fim, entender e manipular corretamente os HTTP headers é uma habilidade essencial para desenvolvedores web, especialistas em SEO e profissionais de segurança. Neste artigo, veremos os principais tipos de headers, como funcionam e alguns exemplos práticos de sua aplicação, inclusive do ponto de vista de um analista de SEO.

O que são HTTP headers?

Os HTTP headers são componentes fundamentais da comunicação entre um cliente (geralmente um navegador) e um servidor na web. Eles são responsáveis por transmitir informações adicionais sobre uma solicitação ou resposta HTTP. Esses headers contêm dados cruciais, como o tipo de conteúdo sendo enviado, permissões de cache, configurações de segurança e muito mais. Basicamente, eles ajudam a definir como a solicitação será processada e como o navegador deve tratar a resposta recebida do servidor.

Existem diferentes tipos de HTTP headers, como headers de solicitação (request headers), de resposta (response headers), de entidade (entity headers), entre outros. Cada tipo cumpre uma função específica. Por exemplo, o header User-Agent informa ao servidor qual é o navegador utilizado pelo usuário, enquanto o header Content-Type define o formato dos dados sendo transferidos (como HTML, JSON ou XML). Esses elementos são essenciais para garantir uma comunicação eficiente e segura na web, além de desempenharem um papel importante no SEO e na otimização do desempenho do site.

Principais categorias de HTTP Headers

Os HTTP headers podem ser divididos em quatro categorias principais, dependendo de sua função no processo de comunicação entre cliente e servidor:

General Headers: Aplicáveis tanto a requisições quanto a respostas, estes headers fornecem informações gerais sobre a mensagem HTTP.
Request Headers: Incluem detalhes sobre a requisição enviada pelo cliente, como o tipo de navegador, autenticação e preferências de idioma.
Response Headers: Fornecem informações sobre a resposta do servidor, como status da resposta, localização de redirecionamento e tipos de cache permitidos.
Entity Headers: Relacionam-se aos metadados do conteúdo, especificando, por exemplo, o tamanho e o tipo do recurso enviado.

Exemplo de HTTP request com headers:

HTTP

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept-Language: en-US,en;q=0.8

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
Accept-Language: en-US,en;q=0.8

HTTP

Nesse exemplo:

Host informa o domínio requisitado.
User-Agent identifica o navegador e o sistema operacional do cliente.
Accept-Language especifica a preferência de idioma.

Comparação entre os principais HTTP Headers

Os headers têm funcionalidades diversas, e cada um desempenha um papel crucial na comunicação entre o navegador e o servidor. A tabela a seguir compara alguns dos principais HTTP headers e suas respectivas funções:

Header	Categoria	Descrição	Exemplo de Uso
`Content-Type`	Entity Header	Define o tipo de mídia do recurso (ex: `text/html`, `application/json`).	`Content-Type: text/html`
`Cache-Control`	General Header	Controla o cache de uma resposta, com instruções de armazenamento.	`Cache-Control: no-cache`
`Authorization`	Request Header	Contém as credenciais para autenticação HTTP.	`Authorization: Basic Zm9vOmJhcg==`
`Set-Cookie`	Response Header	Envia cookies ao cliente para serem armazenados e enviados em requisições futuras.	`Set-Cookie: sessionId=abc123;`
`Accept-Encoding`	Request Header	Indica os tipos de codificação que o cliente pode processar.	`Accept-Encoding: gzip, deflate`
`X-Frame-Options`	Response Header	Previne ataques de clickjacking ao desabilitar o conteúdo dentro de frames.	`X-Frame-Options: DENY`

Exemplos de uso na prática

A seguir, veremos exemplos de headers importantes e como utilizá-los no dia a dia.

Content-Type

O header Content-Type é usado tanto em requisições quanto em respostas HTTP para indicar o tipo de mídia do recurso. Ele informa ao servidor ou ao cliente qual tipo de dado está sendo enviado ou esperado.

Exemplo de requisição:

HTTP

POST /api/upload HTTP/1.1
Host: www.exemplo.com
Content-Type: application/json
Content-Length: 123

{
  "nome": "João",
  "idade": 30
}

POST /api/upload HTTP/1.1
Host: www.exemplo.com
Content-Type: application/json
Content-Length: 123

{
  "nome": "João",
  "idade": 30
}

HTTP

Neste exemplo, o cliente está informando ao servidor que os dados enviados estão no formato application/json.

Authorization

Este header é utilizado para passar credenciais que autorizam o cliente a acessar um recurso protegido.

Exemplo de requisição com Bearer Token:

HTTP

GET /api/dados HTTP/1.1
Host: <a href="https://www.pinkandbrain.com/elementos/application-programming-interface-api/" title="api">api</a>.exemplo.com
Authorization: Bearer abc123token

GET /api/dados HTTP/1.1
Host: api.exemplo.com
Authorization: Bearer abc123token

HTTP

Aqui, o cliente está enviando um token de autenticação no header Authorization para acessar dados privados.

Cache-Control

Este header controla como as respostas são armazenadas em cache, tanto no lado do cliente quanto no lado do servidor, ajudando a otimizar o uso de recursos.

Exemplo de Resposta HTTP:

HTTP

HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600, must-revalidate

HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: max-age=3600, must-revalidate

HTTP

Neste exemplo, o servidor informa ao cliente que o conteúdo pode ser armazenado em cache por uma hora (max-age=3600), mas deve ser revalidado após esse período.

Content-Security-Policy

Este header é usado para melhorar a segurança de um site, restringindo as fontes de recursos que podem ser carregadas, como scripts, imagens e folhas de estilo.

Exemplo de Resposta HTTP:

HTTP

HTTP/1.1 200 OK
Content-Security-Policy: default-src 'self'; script-src 'none'; style-src 'self';

HTTP/1.1 200 OK
Content-Security-Policy: default-src 'self'; script-src 'none'; style-src 'self';

HTTP

Com este header, o servidor informa que apenas recursos provenientes do próprio domínio (self) são permitidos, bloqueando scripts externos (script-src 'none').

Segurança com HTTP Headers

O cabeçalho X-Content-Type-Options é usado para prevenir a interpretação incorreta do tipo de conteúdo, o que poderia permitir ataques de MIME sniffing:

HTTP

X-Content-Type-Options: nosniff

X-Content-Type-Options: nosniff

HTTP

O cabeçalho Content-Security-Policy (CSP) ajuda a prevenir ataques de XSS definindo uma política de segurança para o conteúdo:

HTTP

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com

HTTP

Otimização de Performance com HTTP Headers

O cabeçalho Cache-Control permite configurar o cache para melhorar a performance, armazenando recursos estáticos no lado do cliente:

HTTP

Cache-Control: public, max-age=3600

Cache-Control: public, max-age=3600

HTTP

Isso instrui o navegador a armazenar o recurso por 1 hora (3600 segundos).

Compressão de Conteúdo

O cabeçalho Accept-Encoding indica que o cliente aceita respostas comprimidas. Isso reduz o tamanho dos arquivos transferidos, melhorando o tempo de carregamento:

HTTP

Accept-Encoding: gzip, deflate

Accept-Encoding: gzip, deflate

HTTP

Redirecionamento de URLs

HTTP

HTTP/1.1 301 Moved Permanently
Location: https://www.new-site.com

HTTP/1.1 301 Moved Permanently
Location: https://www.new-site.com

HTTP

Evolução dos HTTP Headers com HTTP/2 e HTTP/3

Com a introdução dos protocolos HTTP/2 e HTTP/3, o uso de headers se tornou ainda mais eficiente. O HTTP/2 introduziu a compressão dos headers com o uso de HPACK, o que reduziu significativamente o tamanho das requisições e respostas, melhorando a performance da rede. Além disso, HTTP/3 utiliza o protocolo QUIC, que é mais rápido e confiável, e mantém a mesma estrutura de headers.

Abaixo está uma tabela comparativa entre o HTTP/1.1 e o HTTP/2/3 no que diz respeito ao tratamento de headers:

Característica	HTTP/1.1	HTTP/2/HTTP/3
Compressão de Headers	Não disponível	Compressão via HPACK
Multiplexação	Não (uma requisição por vez)	Sim (várias requisições simultâneas)
Segurança	SSL/TLS opcional	TLS obrigatório em HTTP/2 e QUIC em HTTP/3
Latência	Alta	Menor, devido à multiplexação

HTPP Header e SEO: o que um analista precisa saber?

Os HTTP headers são ferramentas essenciais nas mãos dos analistas de SEO, pois oferecem controle sobre como os crawlers dos motores de busca acessam, interpretam e armazenam o conteúdo de um site. Eles impactam desde o desempenho da página até sua indexação e segurança, tornando-se um elemento-chave em estratégias mais avançadas de otimização. Um bom analista de SEO deve estar atento à configuração correta desses headers para garantir que o site seja rapidamente acessado e corretamente compreendido pelos mecanismos de busca.

Use e abuse do Screaming Frog

A ferramenta é uma mão na roda e traz uma séria de informações, inclusive de status de requisições de recursos da sua página. No print abaixo podemos ver onde estão situados e inclusive um exemplo de um link com status 403.

Super recomendamos o uso da ferramenta Screaming Frog

Conheça também o header Cache-Control, que influencia a forma como o conteúdo é armazenado em cache pelos navegadores e servidores. Isso pode acelerar o carregamento das páginas, melhorando a experiência do usuário e o tempo de permanência, ambos fatores importantes para o ranqueamento. Da mesma forma, headers como Content-Encoding permitem compactar dados, reduzindo o tempo de carregamento — outro ponto de atenção para a performance do site.

Além disso, o uso adequado de headers como HTTP Status Codes e X-Robots-Tag pode definir como os mecanismos de busca tratam as páginas. Um redirecionamento incorreto, por exemplo, pode fazer com que o valor de SEO de uma página se perca, enquanto o X-Robots-Tag permite controlar a indexação de páginas que não devem aparecer nos resultados de busca. Para analistas, monitorar esses parâmetros regularmente é crucial.

A canonicalização por meio dos headers também previne problemas com conteúdo duplicado, consolidando o valor de SEO em uma única URL canônica. Ignorar essa configuração pode resultar em perdas de autoridade e penalizações, especialmente em sites que geram múltiplas versões de uma mesma página.

Por fim, os headers relacionados à segurança, como Strict-Transport-Security, também afetam o SEO. Sites seguros, que utilizam HTTPS, têm preferência nos resultados de busca, e a implementação desses headers garante que a conexão dos usuários seja sempre protegida. Dessa forma, os analistas de SEO devem garantir que todos os aspectos, desde performance até segurança, estejam alinhados para maximizar os resultados.

Os HTTP headers são componentes fundamentais no funcionamento da web moderna. Compreendê-los a fundo é essencial para garantir a otimização de performance, segurança e a correta entrega de conteúdo entre cliente e servidor. À medida que a web continua a evoluir, o papel dos headers na eficiência e segurança das comunicações também se torna mais importante. Sejam desenvolvedores ou profissionais de segurança, entender e saber configurar corretamente os HTTP headers é uma habilidade indispensável no cenário digital atual.

Se você precisa de ajuda com suas estratégias de aquisição de tráfego digital, com ênfase em SEO e PPC, conte com a Pink and Brain. Somos ratos quando o assunto é SEO.

O post HTTP Headers o que são? O que o analista de SEO deve saber? apareceu primeiro em Pink and Brain.

SEO e UX: como criar sites que ranqueiam, engajam e convertem?

Marcelino Junior — Thu, 22 Jan 2026 00:26:44 +0000

No mundo digital altamente competitivo de hoje, ter um site que apenas atrai visitantes não é mais suficiente. O verdadeiro desafio é criar uma experiência que não só atraia, mas também envolva e converta esses visitantes em clientes ou leads. Para alcançar esse objetivo, é essencial integrar duas disciplinas fundamentais: SEO (Otimização para Motores de Busca) e Experiência do Usuário (UX).

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.

Paleta de cores com escalas ricas para aplicaçã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.

Definição de tipografia primária e secunrária

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 ricos, ilustrações, pack ideal para web designarantindo uma identidade visual coesa e uma navegação intuitiva.

Template de matéria com elementos essenciais de SEO

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.

Velocidade de carregamento é um dos principais fatores de SEO

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.

Prototipo do site feito tanto na versão mobile quanto na versão desktop

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.

Estrutura de footer da CNN pensada em navegação e linkagem interna.

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.

Componetes sendo criados focados em aquisição de leads qualificados

Elementos da página pensados em maximizar resultados e coleta de informações relevantes

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:

Google Analytics: acompanhe métricas como taxa de rejeição, tempo na página e conversões.
Google Search Console: verifique desempenho em palavras-chave e possíveis problemas técnicos.
Hotjar ou Crazy Egg: Analise mapas de calor e gravações para entender o comportamento dos usuários.
Core Web Vitals Report: acompanhe as métricas de experiência do usuário no Google Search Console.
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.

Dashboard de acompanhamento dos principais KPIs para entender otimizações e novos componentes colocados em produção

Erros comuns ao integrar SEO e UX

Foco exclusivo em SEO técnico: ignorar a experiência do usuário pode gerar tráfego, mas não conversões.
Uso excessivo de palavras-chave: isso pode comprometer a legibilidade do conteúdo.
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.

Vou mudar o layout do meu site: como não prejudicar o SEO?

César Canteiro — Fri, 09 Jan 2026 09:39:26 +0000

Quando falamos em SEO, muitas vezes pensamos apenas em palavras-chave, backlinks e conteúdo otimizado. No entanto, um aspecto frequentemente ignorado é o impacto que o design de um site na otimização para mecanismos de pesquisa. O design de uma página não está apenas relacionado à estética; ele pode influenciar diretamente o desempenho em termos de SEO, afetando como os mecanismos de busca rastreiam e indexam seu conteúdo.

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
,
,
,
,
, 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
genéricas ou elementos visualmente atrativos mas semanticamente fracos, como , 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.

Autoridade de domínio 91

Jogador suspenso ontem e notícia fresca no topo

Termo era dominado e eles chegaram

Coberturas

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.

Utilizando o Console do navegador: dicas para analistas de SEO

César Canteiro — Fri, 14 Nov 2025 23:02:13 +0000

Neste artigo, vamos trazer um exemplo prática de como usar IA e códigos JavaScript para coletar todos os heading tags de uma página e exibi-los em um formato de lista, uma das ações estratégicas dentre as inúmeras possibilidades. Isso pode ser útil para profissionais de SEO que desejam analisar a estrutura de headings de uma página web em poucos cliques.

O que é e como funciona o console do navegador?

O Console do Navegador é um recurso poderoso disponível nas ferramentas de desenvolvimento dos navegadores modernos, como Google Chrome, Mozilla Firefox e Microsoft Edge e permite que os desenvolvedores interajam diretamente com as páginas web, execute comandos JavaScript, depure código e visualize mensagens de erros em tempo real.

Quem trabalha com infra, back-end, front-end SEO ou mesmo com taguemento de páginas, data layers, precisa saber usar o Console dos navegadores.

Tela do Console acessado pelo navegador Google Chrome

Uso do console para coletar heading tags de uma página e montar uma lista

Basicamente, o Console é útil para diversos propósitos:

Depuração de código: identifique e corrija erros no código JavaScript.
Teste de scripts: experimente pequenos trechos de código para verificar seu comportamento.
Inspeção de elementos: examine e modifique o conteúdo e atributos dos elementos da página.
Interagir com elementos: aqui é o ponto chave de usa-lo ao seu favor, você pode manipular elementos para concretizar desejos diversos.

Essas técnicas são executadas dependendo do tipo de análise que você quer fazer. Com o avanço da Com inteligência artifical, as pessoas ganharam novas habilidades a nível de desenvolvimento, que antes estavam nas mãos dos programadores, e podem agora tirar insumo de infinitas possibilidades.

Vale lembrar que esse é apenas um conteúdo introdutório ao tema, de um exemplo básico para evidenciar o quão poderoso o recurso pode ser:

Abrindo o Console do navegador

Para usar o Console do Navegador, siga estes passos:

Google Chrome: Pressione Ctrl + Shift + I (Windows) ou Cmd + Option + I (Mac) e selecione a aba “Console”.
Mozilla Firefox: Pressione Ctrl + Shift + K (Windows) ou Cmd + Option + K (Mac).
Microsoft Edge: Pressione F12 e clique na aba “Console”.

Script para coletar as headings

Com o Console aberto, você pode usar o seguinte script para coletar todos os heading tags da página e exibi-los em formato de lista:

JavaScript

// Seleciona todos os headings na página
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// Cria uma lista para armazenar os resultados
const headingList = [];

// Itera sobre cada heading encontrado e adiciona à lista
headings.forEach(heading => {
    headingList.push(`${heading.tagName.toLowerCase()}: ${heading.textContent.trim()}`);
});

// Exibe a lista de headings no console
console.log(headingList.join('\n'));

// Seleciona todos os headings na página
const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');

// Cria uma lista para armazenar os resultados
const headingList = [];

// Itera sobre cada heading encontrado e adiciona à lista
headings.forEach(heading => {
    headingList.push(`${heading.tagName.toLowerCase()}: ${heading.textContent.trim()}`);
});

// Exibe a lista de headings no console
console.log(headingList.join('\n'));

JavaScript

Este script faz o seguinte:

Seleciona todos os elementos de heading (h1 a h6) da página.
Armazena os headings em uma lista formatada como tag: texto.
Exibe a lista formatada no Console.

Testando o script

Para testar o script:

Abra a página web que você deseja analisar.
Acesse o Console do Navegador conforme descrito anteriormente.
Cole o script no Console e pressione Enter.
Você verá uma lista de todos os heading tags da página exibida no Console.

Utilizando o Console dos navegadores: dicas para analistas de SEO

Utilizando o Console para coletar os heading tags da página

Como o ChatGPT pode te ajudar a ter ideias de usar o Console?

Se você precisa de ajuda para criar códigos personalizados ou deseja automatizar a coleta de informações específicas de páginas web, o ChatGPT pode e deve te ajudar, pois afinal, ele deve ser seu maior parceiro como analista de SEO.

Você pode instruir o ChatGPT sobre o que precisa, e ele pode gerar scripts JavaScript ou fornecer orientações para atender às suas necessidades. Por exemplo, você pode pedir ao ChatGPT para criar um script que extrai dados específicos, que identifica imagens sem alt, que pede insights do código HTML na questão semântica, ajuda com dados estruturados, enfim, é o seu assistente virtual mais TOP daqui para frente.

Pedi para o chatGPT me dar um script quie identifica imagens sem ALT

Voa-lá! arrumei tudo e ficou perfeito

Código para pegar as imagens sem ALT e fazer uma lista no console

JavaScript

// Seleciona todas as imagens na página
const images = document.querySelectorAll('img');

// Cria uma lista para armazenar os resultados
const missingAltImages = [];

// Itera sobre cada imagem encontrada
images.forEach(img => {
  // Verifica se a imagem não tem o atributo 'alt' ou se o valor está vazio
  if (!img.hasAttribute('alt') || img.getAttribute('alt').trim() === '') {
    // Adiciona a imagem e sua URL à lista
    missingAltImages.push({
      src: img.src,
      element: img
    });
  }
});

// Exibe a lista de imagens sem 'alt' no console
if (missingAltImages.length > 0) {
  console.log('Imagens sem atributo alt:');
  missingAltImages.forEach((img, index) => {
    console.log(`Imagem ${index + 1}: ${img.src}`);
    console.log('Elemento:', img.element);
  });
} else {
  console.log('Todas as imagens possuem o atributo alt.');
}

// Seleciona todas as imagens na página
const images = document.querySelectorAll('img');

// Cria uma lista para armazenar os resultados
const missingAltImages = [];

// Itera sobre cada imagem encontrada
images.forEach(img => {
  // Verifica se a imagem não tem o atributo 'alt' ou se o valor está vazio
  if (!img.hasAttribute('alt') || img.getAttribute('alt').trim() === '') {
    // Adiciona a imagem e sua URL à lista
    missingAltImages.push({
      src: img.src,
      element: img
    });
  }
});

// Exibe a lista de imagens sem 'alt' no console
if (missingAltImages.length > 0) {
  console.log('Imagens sem atributo alt:');
  missingAltImages.forEach((img, index) => {
    console.log(`Imagem ${index + 1}: ${img.src}`);
    console.log('Elemento:', img.element);
  });
} else {
  console.log('Todas as imagens possuem o atributo alt.');
}

JavaScript

Insights finais

O Console do Navegador pode coletar e exibir todos os heading tags de uma página web e fazer outras zilhões de ações que antes eram obscuras e só desenvolvedores podiam ajudar. Com a inteligência artifical, você pode aprimorar ainda mais suas habilidades e criar soluções personalizadas para suas necessidades de desenvolvimento e SEO.

Se você está em busca de um parceiro renomado no mundo do SEO, a Pink and Brain pode te ajudar. Somos ratos quando o assunto é SEO e desenvolvimento web.

O post Utilizando o Console do navegador: dicas para analistas de SEO apareceu primeiro em Pink and Brain.

Componente de cookies com consentimento para o GA4

César Canteiro — Fri, 07 Nov 2025 22:04:04 +0000

Este conteúdo é destinada aos desenvolvedores que usam tags do Google em um site e querem integrar o modo de consentimento a ele. Para uma introdução ao modo de consentimento, acesse Visão geral do modo de consentimento e veja aqui o guia completo do próprio Google de como implementar o consent mode no seu site.

A implementação de um componente de cookies para consentimento ajustado no Google Analytics 4 (GA4) é fundamental para quem deseja ter controle total sobre a coleta de dados de usuários sem depender de plataformas terceirizadas, como AdOpt, plugins do WordPress ou outras soluções similares.

Criei este artigo tutorial de como criar um componente do zero HTML, CSS, JS e incluir dataLayer para classificar as informações obtidas de consentimento dos usuários sincronizados para o GA4. Você aprenderá como configurar um componente de cookies de maneira correta, garantindo conformidade com a Lei Geral de Proteção de Dados (LGPD), melhores práticas de SEO e otimização de performance.

Importância do Consent Mode para SEO e LGPD

O Consent Mode é a maneira de equilibrar a coleta de dados e a privacidade do usuário. Ele permite que você ajuste o comportamento das tags do Google com base no status de consentimento dos usuários para cookies de publicidade e análise de dados comportamentais, além obviamente de atender as premissas da Lei Geral de Proteção de Dados, ou seja, é crucial para os sites estarem passíveis de serem bem classificados nos mecanismos de pesquisas, já que o Google também usa essa prática como um fator de autoridade/credibilidade de um domínio.

Conformidade com a LGPD: A LGPD exige que os sites obtenham consentimento explícito dos usuários antes de coletar dados pessoais. Ao implementar um componente de consentimento de cookies, você pode garantir que está em conformidade com essas exigências.
Impacto para SEO: O Consent Mode ajuda a coletar dados de comportamento dos usuários de forma agregada e anônima quando o consentimento não é dado, permitindo que você continue sua navegação, criar novas páginas, otimizar as que já tem, mostrar ou não elementos, enfim, ´sua imaginação que mandará. Outro ponto chave é que: configurar o consent mode irá dar crédito ao seu site, tornando mais autoridade.

Ganhos de performance e personalização

Além da conformidade e otimização para SEO, a criação de um componente de cookies personalizado pode trazer ganhos de performance. Embora soluções de terceiros geralmente sejam leves, construir seu próprio componente elimina dependências adicionais de bibliotecas e scripts, potencialmente acelerando o carregamento da página.

Personalização infinita (e o além)

Outro benefício importante é a personalização infinita: você tem total controle sobre o estilo, funcionalidade e comportamento do componente de cookies, podendo ajustá-lo para atender às necessidades específicas do seu site e público.

As plataformas de mercado e plugins oferecem algo mais “engessado” e você certamente não conseguirá deixar a cara do seu design system.

Exemplo de implementação de um componente de cookies

Abaixo, você encontrará um exemplo de como implementar um componente de cookies personalizado utilizando HTML, JavaScript e dataLayer para ajustar o consentimento no GA4.

HTML

<div class="cookies-container lazy__image">
    <div class="cookies-content">
        <div class="flex__cookies">
            <p>Esse site trabalha com cookies 🍪 para <strong>melhorar as informações e a navegação dos nossos usuários</strong>, mas não armazena nenhum tipo de informação pessoal. </p>
            <div class="cookies-pref">
                <label title="Marque para saber mais sobre o perfil dos nossos usuários potenciais clientes." class="control control-checkbox">
                    <input name="analytics" type="checkbox" checked="checked" data-function="analytics"/>Permitir Cookies
                    <div class="control_indicator"></div>
                </label>
                <label title="Marque se quiser receber recomendações, promoções e dicas sobre a saúde auditiva." class="control control-checkbox">
                    <input name="marketing" type="checkbox" data-function="marketing"/>Marketing e Newsletter
                    <div class="control_indicator"></div>
                </label>
            </div>
        </div>
        <button class="cookies-save">Salvar e Continuar</button>
    </div>
</div>

<div class="cookies-container lazy__image">
    <div class="cookies-content">
        <div class="flex__cookies">
            <p>Esse site trabalha com cookies 🍪 para <strong>melhorar as informações e a navegação dos nossos usuáriosstrong>, mas não armazena nenhum tipo de informação pessoal. p>
            <div class="cookies-pref">
                <label title="Marque para saber mais sobre o perfil dos nossos usuários potenciais clientes." class="control control-checkbox">
                    <input name="analytics" type="checkbox" checked="checked" data-function="analytics"/>Permitir Cookies
                    <div class="control_indicator">div>
                label>
                <label title="Marque se quiser receber recomendações, promoções e dicas sobre a saúde auditiva." class="control control-checkbox">
                    <input name="marketing" type="checkbox" data-function="marketing"/>Marketing e Newsletter
                    <div class="control_indicator">div>
                label>
            div>
        div>
        <button class="cookies-save">Salvar e Continuarbutton>
    div>
div>

HTML

Configuração do GA4 e dataLayer

Para garantir que as preferências de consentimento dos usuários sejam respeitadas e refletidas nas configurações do GA4, precisamos configurar o dataLayer e a inicialização do GA4 com o consentimento padrão negado.

JavaScript

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

// Configuração padrão do consentimento como "negado"
gtag('consent', 'default', {
     'ad_storage': 'denied',
     'analytics_storage': 'denied'
});

gtag('config', 'TAG_ID');

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

// Configuração padrão do consentimento como "negado"
gtag('consent', 'default', {
     'ad_storage': 'denied',
     'analytics_storage': 'denied'
});

gtag('config', 'TAG_ID');

JavaScript

JavaScript para gerenciamento de cookies

O script abaixo gerencia a coleta de consentimento dos cookies e atualiza o estado de consentimento no GA4 conforme as preferências do usuário.

JavaScript

function cookies(functions) {
    const container = document.querySelector('.cookies-container');
    const save = document.querySelector('.cookies-save');
    if (!container || !save) return null;

    const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
    if (localPref) activateFunctions(localPref);

    function getFormPref() {
        return [...document.querySelectorAll('[data-function]')]
            .filter((el) => el.checked)
            .map((el) => el.getAttribute('data-function'));
    }

    function activateFunctions(pref) {
        pref.forEach((f) => functions[f]());
        container.style.display = 'none';
        window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
        updateConsent(pref); // Atualiza o consentimento no GA
    }

    function handleSave() {
        const pref = getFormPref();
        activateFunctions(pref);
    }

    save.addEventListener('click', handleSave);
}

function marketing() {
    console.log('Marketing Function');
}

function analytics() {
    console.log('Analytics Function');
}

// Função para atualizar o consentimento no GA
function updateConsent(pref) {
    const consentObject = {
        'ad_storage': 'denied',
        'analytics_storage': 'denied'
    };

    if (pref.includes('analytics')) {
        consentObject['analytics_storage'] = 'granted';
    }

    if (pref.includes('marketing')) {
        consentObject['ad_storage'] = 'granted';
    }

    gtag('consent', 'update', consentObject);
}

cookies({
    marketing,
    analytics,
});

function cookies(functions) {
    const container = document.querySelector('.cookies-container');
    const save = document.querySelector('.cookies-save');
    if (!container || !save) return null;

    const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
    if (localPref) activateFunctions(localPref);

    function getFormPref() {
        return [...document.querySelectorAll('[data-function]')]
            .filter((el) => el.checked)
            .map((el) => el.getAttribute('data-function'));
    }

    function activateFunctions(pref) {
        pref.forEach((f) => functions[f]());
        container.style.display = 'none';
        window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
        updateConsent(pref); // Atualiza o consentimento no GA
    }

    function handleSave() {
        const pref = getFormPref();
        activateFunctions(pref);
    }

    save.addEventListener('click', handleSave);
}

function marketing() {
    console.log('Marketing Function');
}

function analytics() {
    console.log('Analytics Function');
}

// Função para atualizar o consentimento no GA
function updateConsent(pref) {
    const consentObject = {
        'ad_storage': 'denied',
        'analytics_storage': 'denied'
    };

    if (pref.includes('analytics')) {
        consentObject['analytics_storage'] = 'granted';
    }

    if (pref.includes('marketing')) {
        consentObject['ad_storage'] = 'granted';
    }

    gtag('consent', 'update', consentObject);
}

cookies({
    marketing,
    analytics,
});

JavaScript

Aí está! finalizado..

Ah.. uma dica extra de como saber se está certinho ou não:

Acesse seu DEV tools (crtl + shift + i no Windows)
Acesse o console
Digite dataLayer, clique e “enter”
Ele deverá aparecer como abaixo, inclusive antes da resposta do usuário e depois, em forma de linha do tempo

Checando os valores de consentimento envioados ao GA4

Implementar um componente de cookies para consentimento ajustado no GA4 permite que você tenha controle total sobre como o consentimento é gerenciado em seu site, atendendo às exigências da LGPD e melhorando-o para SEO e a performance do site. Com as orientações e exemplos fornecidos, você pode criar uma solução altamente personalizada e eficiente, sem a necessidade de dependências de terceiros.

Se precisar de mentes brilhantes do marketing digital e web analytics, venha bater um papo conosco. Somos ratos quando o assunto é Web Analytics.

O post Componente de cookies com consentimento para o GA4 apareceu primeiro em Pink and Brain.

Tag details no HTML: crie blocos expansíveis sem JavaScript

Pink and Brain — Sun, 21 Sep 2025 14:22:02 +0000

O HTML5 trouxe alguns elementos nativos que simplificam muito o desenvolvimento de interfaces sem depender de bibliotecas externas. Entre eles, a tag

que é um canivete suiço para criar blocos de conteúdo recolhíveis (accordion) de forma simples, acessível e amigável para SEO, sem precisar de JavaScript.

Essa tag, em conjunto com

, é muito utilizada em módulos de FAQ (Frequently Asked Questions) em páginas web, pois permite ao usuário expandir ou recolher dúvidas de forma intuitiva. Além disso, do ponto de vista de SEO, os FAQs são extremamente estratégicos: ajudam a capturar tráfego de cauda longa, aumentam a relevância semântica de uma página e podem gerar rich snippets no Google quando implementados com schema markup.

O que é e como funciona a tag
?

cria um container que pode ser aberto ou fechado pelo usuário. Dentro dele, o

funciona como o título clicável.

Exemplo básico:

HTML

<details>
	<summary>O que é a tag details?</summary>
	<p>É um elemento do HTML5 que permite esconder e mostrar conteúdo sem usar <a href="https://www.pinkandbrain.com/elementos/javascript/" title="JavaScript">JavaScript</a>.</p></details>

<details>
	<summary>O que é a tag details?summary>
	<p>É um elemento do HTML5 que permite esconder e mostrar conteúdo sem usar JavaScript.p>details>

HTML

om apenas esse código, você já tem um acordeão funcional, acessível via teclado e rastreável pelos mecanismos de busca. Observe abaixo ele renderizado (claro, sem estilos CSS):O que é a tag details?

Por que usar
para formatar seu HTML?

HTML5 é vida, e essa dádiva ajuda a:

Reduz necessidade de JavaScript: menos dependências, melhor performance.
Acessibilidade nativa: suporte a teclado e leitores de tela.
SEO-friendly: o conteúdo está no HTML, pode ser indexado normalmente.
Experiência do usuário: páginas mais limpas e organizadas.

Exemplo de FAQ com
(semântica rica com schema também)

Abaixo um exemplo de como você pode estruturar um FAQ com HTML semântico e schema markup inline (JSON-LD) para SEO:

HTML

<section class="faq" itemscope itemtype="https://schema.org/FAQPage">
  <h2>Perguntas frequentes (FAQ)</h2>
  <ul>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O que é um FAQ em SEO?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            FAQ significa Frequently Asked Questions (Perguntas Frequentes). 
            Em SEO, os FAQs ajudam a responder dúvidas comuns, aumentando relevância 
            semântica e a chance de aparecer em rich snippets no <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a>.
          </p>
        </div>
      </details>
    </li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">Por que usar a tag <details> em um FAQ?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Porque ela cria um acordeão nativo sem precisar de JavaScript, 
            mantendo o conteúdo acessível e indexável para buscadores.
          </p>
        </div>
      </details>
    </li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O Google lê o conteúdo dentro do <details>?</summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Sim. O Google já confirmou que considera o conteúdo dentro de 
            <details> para <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a> e ranqueamento, desde que seja relevante.
          </p>
        </div>
      </details>
    </li>
  </ul>
</section>

<section class="faq" itemscope itemtype="https://schema.org/FAQPage">
  <h2>Perguntas frequentes (FAQ)h2>
  <ul>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O que é um FAQ em SEO?summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            FAQ significa Frequently Asked Questions (Perguntas Frequentes). 
            Em SEO, os FAQs ajudam a responder dúvidas comuns, aumentando relevância 
            semântica e a chance de aparecer em rich snippets no Google.
          p>
        div>
      details>
    li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">Por que usar a tag <details> em um FAQ?summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Porque ela cria um acordeão nativo sem precisar de JavaScript, 
            mantendo o conteúdo acessível e indexável para buscadores.
          p>
        div>
      details>
    li>
    <li itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <details>
        <summary itemprop="name">O Google lê o conteúdo dentro do <details>?summary>
        <div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
          <p itemprop="text">
            Sim. O Google já confirmou que considera o conteúdo dentro de 
            <details> para indexação e ranqueamento, desde que seja relevante.
          p>
        div>
      details>
    li>
  ul>
section>

HTML

Como ficou:

Perguntas frequentes (FAQ)

O que é um FAQ em SEO?FAQ significa Frequently Asked Questions (Perguntas Frequentes). Em SEO, os FAQs ajudam a responder dúvidas comuns, aumentando relevância semântica e a chance de aparecer em rich snippets no Google.
Por que usar a tag
em um FAQ?Porque ela cria um acordeão nativo sem precisar de JavaScript, mantendo o conteúdo acessível e indexável para buscadores.
O Google lê o conteúdo dentro do
?Sim. O Google já confirmou que considera o conteúdo dentro de
para indexação e ranqueamento, desde que seja relevante.

SEO: o que considerar?

É o famoso mamão com açucar da formatação HTML:

O conteúdo dentro de
está no HTML e tende a ser rastreável normalmente.
Use
claros e descritivos; eles funcionam como títulos locais.
Evite esconder informações essenciais à intenção de busca; use para conteúdo complementar.
Estruture com headings e outras tags semânticas dentro do conteúdo expandido quando houver seções longas e potencializar a semântica para SEO

Exemplo de card de produto com formatação rica inserida na tag tag

Estrutura de FAQ no Codepen:

Acessibilidade e UX

Além de tudo que já trouxemos, a experiência dos usuários é sempre favorecida:

O controle é focável e operável via teclado.
Forneça textos de
específicos, não genéricos (“Clique para abrir”).
Evite aninhar muitos
dentro de
para não criar labirintos de navegação.
Para páginas com muitos blocos, considere abrir o primeiro por padrão com open e deixar o restante recolhido.

Compatibilidade

O suporte é amplo nos navegadores modernos. Em ambientes muito legados, o conteúdo ainda aparece visível, o que é aceitável do ponto de vista de progressive enhancement.

Você conheceu um acordeão nativo, acessível e amigável para fins de SEO, eliminando a necessidade de JavaScript para o caso mais comum de conteúdo colapsável. Use-o sem moderação e potencialize sua estrutura semântica.

O post Tag details no HTML: crie blocos expansíveis sem JavaScript apareceu primeiro em Pink and Brain.

Redirects em SEO: guia para preservar autoridade, tráfego e ranqueamento

Pink and Brain — Mon, 08 Sep 2025 22:32:00 +0000

No mundo complexo do SEO, pequenos detalhes técnicos podem significar a diferença entre crescer em tráfego orgânico ou perder meses de trabalho. Um desses pontos críticos é sem dúvidas a gestão de redirects.

Muitos profissionais ainda encaram o redirecionamento apenas como uma medida emergencial para páginas apagadas ou URLs quebradas. Mas, na prática, trata-se de uma das ferramentas mais poderosas para preservar autoridade, manter a relevância de conteúdos já indexados e garantir que usuários e mecanismos de busca encontrem corretamente conteúdos migrados em novas estruturas de URL.

Resolvi escrever este post porque esse tema me acompanha há mais de 15 anos. Ao longo da minha carreira, participei de grandes projetos de migração que exigiram estratégias sofisticadas de redirects — como quando a Revista Exame deixou a Abril para se tornar parte do BTG Pactual, ou em mudanças de arquitetura que marcaram o mercado brasileiro, como o abandono dos antigos sites “m.” no mobile por grandes e-commerces, incluindo Magazine Luiza e Ponto Frio, que passaram a adotar versões responsivas sem precisar manter subdomínios separados.

Aqui, vou explicar em detalhe o que são redirects, quando usá-los, os tipos mais comuns, como implementá-los com segurança e as boas práticas que podem salvar — ou comprometer de vez — um projeto de SEO.

O que são redirects?

Um redirect (ou redirecionamento) é uma instrução enviada pelo servidor ou navegador indicando que uma página mudou de endereço. Em vez de exibir erro 404, a requisição é levada automaticamente para a nova URL. Podemos considera-lo uma “ponte digital” que conecta o passado de uma URL ao seu futuro, preservando usuários, tráfego e parte da autoridade acumulada.

Em poucas palavras: quem tenta acessar o link “velho” é automaticamente direcionado para o link “novo”.

Quando usar redirects?

Em termos de SEO, os redirects entram em cena sempre que algo muda na sua arquitetura digital. Se uma página troca de URL, se um subdomínio deixa de existir, se uma editoria inteira é reorganizada ou se um produto sai de linha, o redirecionamento é o que garante que usuários e Google não fiquem perdidos no caminho.

Em outras palavras: os redirects são a ponte entre o passado de uma URL e o futuro do seu conteúdo.

Migração de domínio

Exemplo clássico: quando www.loja.com passa a ser www.lojanova.com.

Nessas situações, cada URL do domínio antigo precisa apontar para sua versão correspondente no novo domínio — e não apenas para a home. É isso que garante que usuários, mecanismos de pesquisas e backlinks continuem funcionando sem perda de tráfego.

Um case emblemático que vivi ao longo da minha carreira foi a transição da revista Exame, quando seu site, um dos maiores veículos de comunicação do Brasil, deixou de ser parte da Abril (abril.exame.com.br) e passou a operar como exame.com dentro do BTG Pactual. Esse movimento envolveu milhares de páginas com histórico de ranqueamento e backlinks de altíssimo valor.

Aproveitamos essa transição para refatorar o portal de notícias e conceber novos produtos (exame Academy e Exame Invest). Todos os templates utilizados receberam um verdadeiro banho de loja estratégico para SEO e performance de renderização.

Claro que: sem um plano de redirects minucioso, a Exame teria perdido anos de construção orgânica.
Com a estratégia correta, o tráfego foi preservado e a marca ainda ganhou em clareza de domínio e posicionamento digital. Nos meses após a migração, o domínio apresentou grande aumento de visibilidade.

Ajustes de slug e arquitetura

E-commerces passam muito por isso: exemplo /calcados/masculino/casual para /calcados-masculinos/casual

Uma mudança que melhora a semântica da URL, mas que precisa de redirects para evitar erros 404 e preservar o ranqueamento já conquistado.

Atualização de páginas diversas, guias e conteúdos recorrentes

Outro exemplo: “Imposto de renda 2024” vira “Imposto de renda 2025”

Já passamos por esse tema dezenas de vezes, para dezenas de clientes e projetos. Sem o redirect, o novo guia teria que começar do zero em termos de relevância. Com ele, toda a autoridade do conteúdo antigo é herdada pela versão mais atual.

PS: recomendamos deixar a URL mais genérica para conteúdos recorrentes, a fim de evitar o redirect e ter a melhor performance sob o ponto de vista de SEO.

Consolidação de conteúdos duplicados

Dois posts semelhantes — “melhores tênis de corrida” e “tênis para correr em 2025” — se fundem em um só artigo completo. Outro exmeplo clássico que serve em qualquer site, seja ele editorial, e-commerce, blog, etc…

Os redirects das URLs antigas concentram a autoridade na versão nova, evitando canibalização de palavras-chave.

Exclusão de páginas de produto ou serviço

Um celular que saiu de linha pode redirecionar para o modelo mais recente ou para a categoria geral.
Assim, o usuário encontra uma opção relevante e o site não perde a chance de conversão.

Mudanças tecnológicas ou de padrão de navegação

Lembra dos subdomínios mobile? m.magazineluiza.com.br e m.pontofrio.com.br deixaram de existir quando os sites migraram para versões responsivas.

Essas transições só funcionaram bem porque milhares de URLs foram corretamente redirecionadas para equivalentes no domínio principal.

Por que redirects são importantes para estratégias de SEO?

Um redirect não é apenas um detalhe técnico: ele é um sinal estratégico para o Google sobre como o conteúdo do seu site deve ser interpretado e consolidado. Quando bem implementados, os redirecionamentos evitam perdas de tráfego, preservam posições nas SERPs e asseguram que todo o valor construído em backlinks e histórico de ranqueamento não se perca no processo de mudança.

Benefício	Impacto direto
Experiência do usuário	Evita erros 404 e mantém a navegação fluida
Preservação de grande parte da relevância	A nova URL aproveita o ranqueamento já conquistado
Transmissão de autoridade	Backlinks e sinais de SEO são transferidos para a página correta

Um redirect bem feito garante que a autoridade da URL antiga seja herdada pela nova, sem prejuízos de ranqueamento.
John Mueller (Google)

Tipos de Redirects

Principais códigos HTTP

301 (permanente): transfere autoridade, usado para mudanças definitivas.
302 (temporário): não transfere autoridade, usado em ajustes provisórios.

Menos comuns

307 / 308: versões técnicas de 302/301, pouco usadas em SEO.
303: evita reenvio de formulários, sem relevância para SEO.

Client-side (menos recomendados mas ainda sim podem ser utilizados)

Meta Refresh: executado no navegador, mais lento e prejudicial à UX.
JavaScript: pode falhar em renderização, usado só em último caso.

Como implementar redirects?

Saber quando usar um redirect é só metade do caminho. A outra metade é executar a implementação de forma correta, levando em conta o ambiente onde seu site está hospedado. Existem diferentes formas de configurar redirecionamentos — algumas mais técnicas, outras mais acessíveis via CMS ou ferramentas externas. O importante é escolher a opção que oferece maior controle, performance e rastreabilidade para o seu projeto.

No servidor

Os redirects feitos diretamente no servidor são os mais recomendados, porque:

São processados antes do carregamento da página;
São interpretados corretamente por todos os mecanismos de busca;
Têm menor impacto em performance e UX.
Apache: a forma mais comum é editar o arquivo .htaccess. Nele você pode definir regras de redirecionamento simples (uma URL → outra) ou complexas (redirecionar diretórios inteiros, aplicar regex, etc.).
Nginx: a configuração é feita no arquivo nginx.conf, usando blocos de server e location. É mais performático que o Apache, mas exige acesso ao servidor e conhecimento técnico.

A grande maioria dos sites, principalmente WordPress, são servidores Apache, e por tanto aqui estão algumas dicas de redirects:

Redirect único (301 direto para uma nova URL)

Apache

# Redireciona uma URL antiga para uma nova
Redirect 301 /servicos https://www.pinkandbrain.com/servicos-digitais

# Redireciona uma URL antiga para uma nova
Redirect 301 /servicos https://www.pinkandbrain.com/servicos-digitais

Apache

Exemplo:
Quem acessar https://www.pinkandbrain.com/servicos será levado direto para https://www.pinkandbrain.com/servicos-digitais.

Redirect com Regex (reescrevendo vários slugs)

Apache

# Ativa o mecanismo de rewrite
RewriteEngine On

# Redireciona qualquer URL dentro de /blog/antigo/ para /blog/novo/, mantendo o restante do caminho
RewriteRule ^blog/antigo/(.*)$ https://www.pinkandbrain.com/blog/novo/$1 [R=301,L]

# Ativa o mecanismo de rewrite
RewriteEngine On

# Redireciona qualquer URL dentro de /blog/antigo/ para /blog/novo/, mantendo o restante do caminho
RewriteRule ^blog/antigo/(.*)$ https://www.pinkandbrain.com/blog/novo/$1 [R=301,L]

Apache

Exemplos práticos:

https://www.pinkandbrain.com/blog/antigo/seo-redirecionamentos → https://www.pinkandbrain.com/blog/novo/seo-redirecionamentos
https://www.pinkandbrain.com/blog/antigo/google-discover → https://www.pinkandbrain.com/blog/novo/google-discover

Redirect de domínio inteiro (extra, para migrações)

Apache

# Redireciona todas as URLs de pinkandbrain.com.br para pinkandbrain.com
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(www\.)?pinkandbrain\.com\.br$ [NC]
RewriteRule ^(.*)$ https://www.pinkandbrain.com/$1 [R=301,L]

# Redireciona todas as URLs de pinkandbrain.com.br para pinkandbrain.com
RewriteEngine On
RewriteCond %{HTTP_HOST} ^(www\.)?pinkandbrain\.com\.br$ [NC]
RewriteRule ^(.*)$ https://www.pinkandbrain.com/$1 [R=301,L]

Apache

Exemplo:

https://www.pinkandbrain.com.br/servicos → https://www.pinkandbrain.com/servicos

Em CMS

Se você utiliza um gerenciador de conteúdo, muitas vezes não precisa mexer no servidor.

WordPress: plugins como Redirection permitem criar e gerenciar centenas de redirects com interface amigável. Plugins de SEO como Yoast e RankMath também oferecem recursos nativos de redirecionamento.
Shopify/Wix: possuem áreas específicas para gerenciar URLs antigas e novas, úteis em mudanças de produtos ou categorias.

Via CDN

CDNs como Cloudflare, Akamai e Fastly oferecem regras globais de redirecionamento. Essa abordagem é muito útil quando você precisa aplicar mudanças rápidas, sem mexer diretamente no servidor ou CMS. Além disso, o redirect ocorre na borda da rede, acelerando a resposta para o usuário.

Em DNS

O DNS pode ser usado para redirecionar domínios inteiros (ex.: www.siteantigo.com → www.sitenovo.com). Essa abordagem é comum em migrações de marca, quando o domínio antigo deve sempre apontar para o novo. Porém, o DNS só trabalha em nível de domínio — ele não lida com URLs individuais, então não substitui redirects mais granulares.+

Boas práticas para redirects

Evite cadeias de redirecionamento

Nada de A → B → C → D. Quanto mais etapas no caminho, maior o risco de perda de autoridade e lentidão no carregamento. Vá direto ao ponto: A → D.

Corrija loops imediatamente

Loops como A → B → A tornam a página inalcançável e prejudicam tanto usuários quanto crawlers. Revise suas regras para eliminar esses ciclos.

Mantenha relevância no destino

Se o usuário procurava panelas, ele não pode ser jogado para uma página de micro-ondas. A lógica é simples: o redirect precisa levar a um conteúdo realmente equivalente.

Deixe o redirect ativo por tempo suficiente

A recomendação é mantê-lo por pelo menos 12 meses, tempo médio necessário para o Google consolidar os sinais de autoridade da URL antiga na nova.

Atualize links internos

Depois de criar os redirects, não deixe o site inteiro depender deles. Atualize os links internos para apontarem direto à nova URL — isso reduz saltos desnecessários (latência), evita cadeias e consolida sinais de SEO na página certa.

Já que na maioria das vezes não conseguimos atualizar links de outros sites apontando para o site, podemos e devemos atualizar a linkagem interna. Usar o banco de dados e batchs são sempre a melhor saída.

Monitore no Search Console

Use os relatórios do Search Console de “páginas com redirecionamento” e “erros de redirecionamento” para identificar problemas de indexação e validar se o Google entendeu suas regras.

Reaproveite oportunidades em páginas 404

Nem todo 404 precisa ser um beco sem saída. Analise se existem conteúdos relevantes para redirecionar tráfego antigo e recuperar backlinks valiosos.

Erros comuns a evitar

Redirecionar tudo para a home

Uma prática muito comum em migrações mal planejadas é jogar todas as URLs antigas para a página inicial.

Resultado: o Google interpreta como soft 404, já que o conteúdo esperado não tem relação com o destino. Isso gera perda de relevância e frustração para o usuário.

Usar Meta Refresh com atraso

O famoso meta refresh com 5 segundos de espera ainda aparece em alguns sites.

Além de piorar a experiência do usuário, esse tipo de redirect é mais lento e pouco confiável para SEO. Sempre prefira redirecionamentos via servidor (301/302).

Criar redirecionamentos irrelevantes

Redirecionar uma página de panelas para micro-ondas ou um artigo de SEO para um produto qualquer confunde tanto o usuário quanto os mecanismos de busca.

Redirects só fazem sentido quando há relação direta entre a intenção da URL antiga e a página de destino.

Como testar os redirects?

Testar se os redirects estão funcionando corretamente evita surpresas com cadeias longas, loops ou páginas que continuam acessíveis sem redirecionamento.

Testes rápidos no navegador

DevTools (Chrome/Edge/Firefox):
1. Abra a URL antiga.
2. Pressione F12 para abrir o DevTools.
3. Vá em Network e atualize a página.
4. Verifique o status code (301, 302 etc.) e a URL de destino.
  → É a forma mais simples de confirmar se o redirect foi aplicado e qual código foi usado.

Exemplo de acesso no .com.br e redirect para o .com

Extensões úteis para o navegador:
- Redirect Path: mostra imediatamente se há redirects, status code e destino final.
- Ayima Redirect Path e Link Redirect Trace são boas alternativas.

Extensão de navegador Redirect Path

Ferramentas online

HTTPStatus.io e Redirect Checker: permitem verificar rapidamente se o redirecionamento é 301, 302 ou outro.
- Úteis para casos pontuais ou quando não há acesso a DevTools.

Auditorias em massa

Indispensáveis em migrações grandes ou reestruturações de site.

Screaming Frog SEO Spider: rastreia todas as URLs antigas e mostra status codes, cadeias de redirect e loops.
Sitebulb e JetOctopus: ótimas opções para análise em larga escala e relatórios visuais.

Software Screaming Frog, o verdadeiro e único canivete suiço do profissional de SEO

Eu seria injusto se não exaltasse o Screaming Frog, ferramenta old school dos analistas e profissionais de SEO, com mais de 15 anos de existência sendo uma ferramenta super poderosa para análises para técnicas.
Césinha

Monitoramento contínuo

Google Search Console (GSC):
- Relatórios de cobertura destacam erros de redirecionamento e cadeias muito longas.
- Ferramenta de inspeção de URL permite validar como o Googlebot enxerga a nova página.

Não brinque com fogo

Redirects são muito mais do que ajustes técnicos: são a base que garante que mudanças estratégicas no seu site não destruam anos de autoridade orgânica.

Na Pink and Brain, já vimos empresas perderem mais de 80% do tráfego em migrações por descuido com redirecionamentos. Mas também já vimos cases de crescimento após grandes reorganizações — quando os redirects foram planejados com estratégia, respeitando anatomia HTML, semântica, linkagem interna e experiência do usuário.

Em SEO, cada redirect mal feito é um risco; cada redirect bem feito é uma oportunidade de escalar.

O post Redirects em SEO: guia para preservar autoridade, tráfego e ranqueamento apareceu primeiro em Pink and Brain.

Por que seu site WordPress com Elementor pode estar morrendo?

Pink and Brain — Tue, 19 Aug 2025 21:38:51 +0000

Quando clientes chegam até a Pink and Brain vemos um padrão se repetir: muitos têm sites WordPress construídos com Elementor que funcionaram bem no começo, mas hoje enfrentam sérios problemas de SEO, desempenho e estabilidade. No início, tudo parecia perfeito — o site era bonito, rápido o suficiente e atendia à necessidade imediata. Mas com o tempo, essas qualidades desaparecem, e o que sobra é um site lento, moroso, vulnerável e cada vez mais distante dos resultados excepcionais que os clientes desejam, ainda mais com o Google fecvhando todas as portas para sites com baixo desempenho principalmente de performance.

O Elementor é, sim, uma ferramenta prática — e pode ser extremamente útil para a construção de MVPs (produtos mínimos viáveis) ou projetos que precisam sair do papel rapidamente. Porém, quando falamos de performance real, escalabilidade, SEO técnico avançado e segurança a longo prazo, o Elementor deixa a desejar. Em nossa experiência, nunca vimos um site construído com Elementor superar projetos desenvolvidos com tecnologias mais refinadas e customizadas, tanto em performance quanto em resultados orgânicos. E somos até mais enfáticos: nunca vimos um blog ou portal de notícias em Elementor estar nas primeiras posições orgânicas no Google.

Esses sites usam recursos demasiadamente, mesmo sem precisa, e ficam pesados, geram muito código desnecessário, além de constantemente sofrer com vulnerabilidades, e acabam exigindo constantes “remendos” para manter o mínimo de funcionamento. No final das contas, muitos empresários acabam gastando muito mais para refazer todo o projeto — agora do jeito certo, com um site leve, otimizado para SEO e pensado para crescer de forma sustentável. A praticidade inicial do Elementor, portanto, cobra um preço alto no médio e longo prazo.

Muitos sites construídos com Elementor, apesar da popularidade inicial, começam a perder performance, tráfego e relevância. Neste post, vamos explicar por que isso acontece, quais sinais indicam que seu site pode estar “morrendo”, e como corrigir os problemas antes que eles prejudiquem definitivamente sua presença digital.

Por que sites feitos em Elementor “morrem” com o tempo?

1. Excesso de código desnecessário e baixo desempenho

O Elementor gera uma quantidade absurda de código HTML, CSS e JavaScript para construir cada página. Isso resulta em:

Sites pesados e lentos.
Altos tempos de carregamento.
Páginas que sofrem penalizações de SEO devido à baixa performance (especialmente no Core Web Vitals).

Sites lentos perdem visitantes e posicionamento no Google. E corrigir a lentidão em um projeto feito em Elementor é extremamente difícil sem reconstruí-lo.

2. Dificuldades sérias em termos de SEO e baixa aquisição orgânica

Apesar do que muitos acreditam, o SEO vai muito além de instalar um plugin como o Yoast ou RankMath. Um site precisa ter:

Estrutura semântica correta e bem formatada (headings, tags semânticas, ).
Código limpo e organizado.
Velocidade de carregamento ideal.
Responsividade real (não apenas aparência no desktop).

O Elementor dificulta todos esses pontos, gerando páginas inchadas, com tags confusas e layouts que, muitas vezes, não respeitam as melhores práticas de SEO técnico. Quando o SEO do site não vai bem, a aquisição orgânica vai pior ainda.

3. Falta de escalabilidade

Projetos que começam pequenos mas pretendem crescer (adicionar novas páginas, integrações, novos módulos) rapidamente se veem limitados pelo Elementor. A cada atualização de plugin ou do próprio WordPress, existe risco de:

Quebra de layout.
Conflitos com outros plugins.
Degradação de performance.
Necessidade de criar “apêndices” desnecessários.
Etc…

Escalar um site feito com Elementor é como construir um prédio alto sobre fundações frágeis — cedo ou tarde, problemas sérios surgem.

4. Segurança

Por ser um plugin popular e robusto, o Elementor é também um alvo constante de ataques cibernéticos. Sites mal atualizados ou mal configurados tornam-se vulneráveis, expondo:

Dados de usuários.
Credenciais de acesso.
Possibilidade de invasões.

Além disso, sites com Elementor frequentemente dependem de outros complementos e extensões, aumentando a superfície de ataque.

Comparativo: Elementor vs. Desenvolvimento de tema próprio customizado

Aspecto	Elementor	Desenvolvimento Customizado
Velocidade	Média a baixa	Alta
SEO Técnico	Limitado	Alto controle e otimização
Estabilidade	Instável a longo prazo	Sólido
Custo Inicial	Baixo	Médio
Custo Futuro	Alto (manutenção, refação)	Baixo (longevidade)
Escalabilidade	Limitada	Ampla
Segurança	Vulnerável	Fortemente protegido

Quando o Elementor é indicado (e quando não é)

Quando usar Elementor:

MVPs (produtos mínimos viáveis) que precisam de velocidade de lançamento.
Sites pessoais ou institucionais simples e sem grandes ambições de SEO.
Projetos de curto prazo.

Quando evitar Elementor:

Sites empresariais com foco em SEO e crescimento orgânico.
Lojas virtuais (e-commerce) que dependem de alta performance.
Portais de conteúdo com centenas de páginas.
Projetos que planejam escalar, integrar sistemas ou personalizar a experiência do usuário.

Solução eficaz e duradoura: refazer seu site da forma certa!

Em muitos casos, infelizmente, o caminho mais inteligente é reconstruir o site do zero, utilizando:

Temas minimalistas ou desenvolvimento próprio.
HTML/CSS/JS otimizados, evisando plugins.
Arquitetura técnica SEO-friendly desde o início.
Headless CMS (para projetos mais robustos).
Infraestruturas como Next.js ou Astro integrados ao WordPress apenas como backend (para máxima performance).

A reconstrução traz benefícios como:

Velocidade real (aumento na pontuação nas métricas Core Web Vitals via PageSpeed Insights).
Maior autoridade em termos de SEO.
Menos gastos futuros com manutenção.
Base sólida para escalar o seu negócio online.
Design de produto mais refinado.
Etc…

Case de sucesso de migração de site de Elementor para tema customizado

No exemplo abaixo, de um dos nossos parceiros presente no mercado de crédito (que é super concorrido aliás…) teve um movimento “lindo de se ver” em termos de aquiisição orgânica e consequentemente em aquisição de leads qualificados.

Site no mercado de crédito

A virada do site Elementor para tema autoral de seu em julho/2024 e poucos meses depois a curva de crescimento se tornou uma montanha íngreme

Site no mercado de saúde auditiva

Parceiro que vende aparelhos auditivos, usava um soite de 5 páginas em Elementor, não aparecia nem para a pesquisa da própria marca, e hoje é referência nacional no tema Saúde Auditiva

Site no mercado de produção de eventos em São Paulo

E nem preciso falar que essa mudança nos rumos digitais da empresa, trocando seu site Elementor por outro com tema próprio, fez a empresa se tornar uma das maiores produtoras que oferecem DJ para eventos em São Paulo.

Você decide: chegou a hora de migrar seu site em Elementor ou patinar mais um pouco?

Você se sente patinando com seu site feito em Elementor? Pois saiba que não é o único…

É óbvio que o Elementor revolucionou a maneira como muita gente criou sites WordPress nos últimos anos — e há seu mérito nisso. Mas para quem busca resultados de verdade, crescimento sustentável e performance, o Elementor se torna uma armadilha.

Aqui na Pink and Brain, já vimos dezenas de casos onde o barato saiu caro — e tivemos que intervir, reconstruindo projetos de forma profissional para garantir resultados de longo prazo.

Se você sente que seu site está lento, perdendo tráfego ou enfrentando dificuldades para crescer, não adie o inevitável: um site bem planejado, leve e escalável é o que vai garantir a sua presença digital no futuro.

Entre em contato conosco para uma consultoria estratégica digital para seu produto ou negócio. Venha tomar um café digital conosco para uma análise gratuita e descubra como podemos transformar seu site em uma máquina de resultados.

O post Por que seu site WordPress com Elementor pode estar morrendo? apareceu primeiro em Pink and Brain.

Meu site não aparece no Google: e agora o que fazer?

César Canteiro — Thu, 07 Aug 2025 16:27:23 +0000

Você contratou alguém ou alguma agência para desenvolver seu site, investiu tempo e dinheiro, escolheu com carinho as imagens, escreveu os textos com atenção e colocou tudo no ar. Esperava que, aos poucos, os acessos aumentassem. Mas os dias passam, semanas também… e ninguém chega.

Você até pesquisa pelo nome da sua empresa no Google e… nada. Nem na segunda página. Só aparecem concorrentes, perfis de rede social, ou portais genéricos. E a dúvida surge: por que meu site não aparece no Google?

Isso é mais comum do que se parece e você não está sozinho. Muitos donos de negócios, empreendedores locais, e até empresas maiores enfrentam essa frustração quando não têm uma assessoria e estratégia digital bem estruturada. Muitas agências que se dizem “360º” entregam sites pífios e sem nenhum tipo de arquitetura sólida, e muitas vezes, sem tagueamento e premissas que colocam os sites passíveis de leitura pelo Google e outras plataformas.

A boa notícia é que esse problema tem solução. Para resolver, é preciso entender as causas. E elas vão muito além de “publicar o site e esperar que o Google apareça”.

Neste artigo, vamos mostrar de forma acessível (e sem te afogar em jargões técnicos) os principais motivos que impedem seu site de aparecer no Google.

Os principais motivos para seu site não aparecer no Google

Antes de entrar em termos técnicos como SEO, vamos listar os principais motivos que podem fazer um site desaparecer dos resultados do Google, de forma simples e direta:

Motivo comum	O que acontece	Como resolver
O site não foi indexado	O Google ainda nem sabe que seu site existe	É preciso configurar o Search Console e enviar o sitemap
O site é lento ou mal construído	Páginas demoram para carregar ou têm erros técnicos	Corrigir o código, melhorar servidor e performance
Uso de construtores ruins	Sites feitos com plugins como Elementor ou Wix podem gerar códigos pesados	Trocar o construtor por um mais leve e otimizado
Falta de conteúdo	O site tem apenas 2 ou 3 páginas com pouco texto	Criar conteúdo relevante com frequência
SEO inexistente	Nenhuma otimização foi feita pensando em aparecer no Google	Implementar uma estratégia de SEO técnico e editorial
O site tem bloqueios	Pode estar com instruções para o Google ignorar o conteúdo (robots.txt ou noindex)	Verificar com desenvolvedores se há bloqueios ativos
Não há analista olhando os dados	Ninguém monitora se o site está indexando, ranqueando ou gerando tráfego	Contratar um analista ou agência especializada

O que é preciso para aparecer no Google?

O Google e qualquer outro search engine não são mágicos. Eles precisam encontrar, entender e confiar no seu site. Para isso, seu site precisa atender três requisitos básicos:

Ser encontrado: o Google precisa acessar suas páginas. Isso depende de uma estrutura correta, sitemaps atualizados e nenhuma barreira de bloqueio. Incluir seu site no Search Console, Bing Webmaster, são premissas básicas para informar os search engines que seu site “existe”.
Ser compreendido: o conteúdo precisa estar organizado, com títulos bem definidos, URLs limpas e estrutura de marcação (HTML) correta, em outras palavras, um desenvolvimento otimizado e coerente.
Ser confiável: o Google observa sinais de qualidade: velocidade, segurança (HTTPS), ausência de erros técnicos, bom conteúdo, autoridade no assunto e backlinks.

Se alguma dessas etapas falhar, seu site pode simplesmente ser ignorado.

O papel do SEO técnico no seu site

Agora sim, vamos falar um pouco de técnica, mas de forma acessível. SEO técnico é o conjunto de boas práticas que ajudam o Google a entender seu site.

Se o site foi feito por alguém que só pensou em design, ou usou plugins que “quebram” o código, o Google pode ter dificuldades para ler o que está lá.

Problemas técnicos comuns:

Sites com código poluído, cheio de elementos desnecessários
Imagens pesadas sem compressão, que deixam o site lento
Páginas com o mesmo conteúdo (conteúdo duplicado)
Falta de tags importantes, como </code>, <code><h1></code> e meta description</li> <li>Plugins que geram erros, conflito de scripts, ou bloqueiam a <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a></li> </ul> <p>Tudo isso precisa ser auditado por um profissional que entenda tanto de desenvolvimento quanto de SEO.</p> <h2 class="wp-block-heading">O erro de pensar no visual antes da performance</h2> <p>Muitos sites são criados apenas com foco visual. São bonitos, cheios de efeitos, carregam lentamente, não funcionam direito no celular e foram construídos com ferramentas que não favorecem a indexação.</p> <p>Principais problemas ligados ao desenvolvimento pobre e sem estratégia:</p> <figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Problema</th><th>Impacto no SEO</th></tr></thead><tbody><tr><td>Layouts pesados com animações</td><td>Prejudicam o tempo de carregamento</td></tr><tr><td>Site não responsivo</td><td>Penalização no ranking mobile</td></tr><tr><td>Uso excessivo de imagens sem texto alternativo</td><td>Dificulta o entendimento do conteúdo</td></tr><tr><td><a href="https://www.pinkandbrain.com/elementos/javascript/" title="JavaScript">JavaScript</a> que bloqueia o conteúdo principal</td><td>Impede o <a href="https://www.pinkandbrain.com/elementos/googlebot/" title="Googlebot">Googlebot</a> de ler a página</td></tr><tr><td>Falta de estrutura semântica (como uso correto de <code><h1></code>, <code><p></code>, <code><section></code>)</td><td>Confunde os buscadores</td></tr></tbody></table></figure> <p><strong>Solução:</strong> o ideal é já desenvolver o site com foco em SEO desde o início. Isso ajuda não só a aparecer melhor no Google, mas <strong>baixa o <a href="https://www.pinkandbrain.com/elementos/cpc-cost-per-click/" title="custo por clique">custo por clique</a> em campanhas pagas</strong>, melhora a usabilidade e favorece o crescimento a longo prazo.</p> <h2 class="wp-block-heading">Falta de tagueamento e acompanhamento profissional</h2> <p>Ter um site é só o começo. Sem ferramentas de medição como <strong>Google Analytics 4</strong>, <strong><a href="https://www.pinkandbrain.com/elementos/google-search-console/" title="Google Search Console">Google Search Console</a></strong> e <strong>Google Tag Manager</strong>, você está às cegas.</p> <h3 class="wp-block-heading">O que essas ferramentas fazem:</h3> <ul class="wp-block-list"> <li><strong>GA4:</strong> mostra como os visitantes interagem com seu site</li> <li><strong>Search Console:</strong> revela como o Google vê suas páginas, se há erros e em quais buscas você aparece</li> <li><strong>Tag Manager:</strong> permite gerenciar scripts e tags sem precisar alterar o código diretamente</li> </ul> <p>Sem isso, <strong>é impossível tomar decisões baseadas em dados.</strong> Você não sabe o que está funcionando — e pior, não sabe o que está dando errado.</p> <h2 class="wp-block-heading">O desenvolvimento do site é a raiz do sucesso (ou do fracasso)</h2> <p>Construtores como <strong>Wix, Elementor ou até temas prontos</strong> do WordPress podem ser ótimos para começar. Mas, se mal configurados, n<strong>a maioria das vezes, se tornam armadilhas</strong>. Na Pink and Brain, atendemos centenas de negócios com esse mesmo sintoma. E sabe o que descobrimos? Em 90% dos casos, o problema começa na base: <strong>no desenvolvimento do site</strong>.</p> <figure class="wp-block-image size-full"><a href="https://www.pinkandbrain.com/por-que-seu-site-wordpress-com-elementor-pode-estar-morrendo/" target="_blank" rel=" noreferrer noopener"><figure><figcaption>Muitos donos de sites caem nessa armadilha do Elementor - Clique e entenda</figcaption></figure></a></figure> <h3 class="wp-block-heading">Por que plugins e temas prontos podem atrapalhar?</h3> <ul class="wp-block-list"> <li>Geram <strong>códigos desnecessários</strong> que deixam o site lento</li> <li>Criam <strong>URLs desorganizadas</strong></li> <li>Limitam o controle do SEO técnico</li> <li>Dependem de <strong>atualizações constantes</strong></li> <li>Muitos deles não otimizam corretamente o carregamento no mobile</li> </ul> <p><strong>Cuidado:</strong> não é o construtor em si que é o problema. É o uso dele sem conhecimento técnico ou sem um SEO acompanhando o processo.</p> <p><strong>Nosso time desenvolve temas autorais</strong>, otimizados para velocidade, performance, SEO técnico e agora também <strong><a href="https://www.pinkandbrain.com/elementos/generative-engine-optimization-geo/" title="GEO">GEO</a> (Generative Engine Optimization)</strong>, preparando seu site para aparecer <strong>em mecanismos baseados em IA como os AI Overviews do Google.</strong></p> <h2 class="wp-block-heading">A ausência de um(a) analista de SEO olhando para o seu site</h2> <p>Assim como sua empresa precisa de alguém cuidando do financeiro ou do estoque, você também precisa de alguém <strong>cuidando do seu <a href="https://www.pinkandbrain.com/elementos/trafego-organico/" title="tráfego orgânico">tráfego orgânico</a>.</strong> O SEO não é algo que se resolve com um plugin ou uma ação pontual. É uma <strong>estratégia contínua</strong>.</p> <p>Profissionais de SEO cuidam de:</p> <ul class="wp-block-list"> <li>Estrutura técnica do site</li> <li>Estratégia de conteúdo</li> <li>Monitoramento de tráfego</li> <li>Otimização das conversões</li> <li>Aparecimento no Google, nas plataformas de IA, AI Overviews, Google Discover, Google News</li> <li>Novidades e atualizações do Google vs. o possível impacto</li> <li>etc…</li> </ul> <h2 class="wp-block-heading">IA está mudando o jogo: e o seu site, está preparado?</h2> <p>Com o avanço dos <strong>AI Overviews</strong>, <strong>respostas instantâneas</strong> e <strong>LLMs</strong> como Gemini e ChatGPT dominando os resultados, o SEO ficou ainda mais estratégico. Sites que não têm <strong>estrutura, autoridade e clareza</strong> nos seus conteúdos tendem a ser ignorados por esses sistemas de inteligência.</p> <p>Hoje, não basta mais “aparecer no Google”.</p> <p>Você precisa:</p> <ul class="wp-block-list"> <li>Aparecer nos <strong>resumos de IA</strong></li> <li>Ter conteúdo <strong>semântico</strong></li> <li>Conectar sua marca a <strong>entidades reconhecíveis</strong></li> <li>Pensar em <strong>branding digital estruturado</strong></li> </ul> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-22 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> <figcaption class="blocks-gallery-caption wp-element-caption">Exemplo de estratégia qualificada de inbound, onde a empresa aparece tanto nos resultados clássicos quanto no bloco da AI Overview</figcaption></figure> <p>Aparecer no Google hoje é mais do que uma questão de vaidade. É <strong>sobre ser encontrado, gerar vendas, reduzir dependência de anúncios pagos</strong> e construir reputação digital.</p> <p>Se você negligencia isso, <strong>perde oportunidades todos os dias.</strong> Mas a boa notícia é que nunca é tarde para começar — e o primeiro passo é entender por que seu site não está aparecendo e agir com estratégia.</p> <h2 class="wp-block-heading">Passo a passo simplificado: o que você precisa fazer agora</h2> <ol start="1" class="wp-block-list"> <li><strong>Verifique se seu site está indexado</strong> – use a pesquisa do Google e o Google Search Console</li> <li><strong>Corrija a estrutura do site</strong> – elimine plugins desnecessários, melhore performance</li> <li><strong>Garanta que o conteúdo seja relevante</strong> – crie páginas úteis, com texto e estrutura</li> <li><strong>Implemente SEO técnico</strong> – títulos, headings, sitemaps, estruturação semântica</li> <li><strong>Monitore com ferramentas adequadas</strong> – GA4, Search Console, ferramentas de SEO</li> <li><strong>Conte com um time especializado</strong> – como a Pink and Brain, que une desenvolvimento, SEO, mídia e performance editorial</li> </ol> <p>Quer que seu site seja visto por quem realmente importa? Comece com o básico, corrija os erros, e busque ajuda especializada se precisar.</p> <p>A presença digital não se constrói com sorte — se constrói com inteligência.</p> <p>O post <a href="https://www.pinkandbrain.com/meu-site-nao-aparece-no-google-e-agora-o-que-fazer/">Meu site não aparece no Google: e agora o que fazer?</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p> </article> <article> <h1>Saiba como limpar e otimizar o banco de dados de sites WordPress</h1> <p>César Canteiro — Fri, 13 Jun 2025 18:37:56 +0000</p> <p>Manter o banco de dados do <strong>WordPress</strong> limpo e otimizado melhora a <strong>velocidade, desempenho e eficiência</strong> do site. O excesso de dados acumulados pode <strong>tornar as consultas lentas</strong>, aumentando o tempo de carregamento das páginas para o usuário que acessar e também para quem edita internamente as páginas, os editores e administradores.</p> <p>Aqui na Pink and Brain somos ratos quando o assunto é desenvolvimento de sites em WordPress. Confira nossas dicas essenciais com <strong>hacks</strong> para manter seu WordPress funcionando <strong>de forma enxuta e rápida</strong>.</p> <h2 class="wp-block-heading">Antes de tudo: faça um backup!</h2> <p><strong>Antes de realizar qualquer alteração no banco de dados, faça um backup completo</strong> usando plugins como:</p> <ul class="wp-block-list"> <li><strong>UpdraftPlus</strong> (fácil de restaurar)</li> <li><strong>WPvivid Backup</strong></li> <li><strong>Duplicator</strong> (ideal para migrações)</li> <li><strong>phpMyAdmin</strong> (backup manual via exportação)</li> </ul> <p>Se for fazer de forma manual, basta você entrar no phpMyAdmin e clicar aqui:</p> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-23 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> </figure> <p>Se algo der errado, <strong>você pode restaurar seu site rapidamente!</strong> 🛠️</p> <h2 class="wp-block-heading">Hacks para limpar o banco de dados</h2> <h3 class="wp-block-heading">Remova transientes expirados</h3> <p>Transientes são dados temporários salvos no banco de dados para acelerar carregamentos. Quando expiram, <strong>continuam ocupando espaço</strong>. Remova transientes antigos com:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>DELETE FROM wp_options WHERE option_name LIKE ‘_transient_%’ OR option_name LIKE ‘_site_transient_%’;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">DELETE</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">FROM</span><span style="color: #D4D4D4"> wp_options </span><span style="color: #569CD6">WHERE</span><span style="color: #D4D4D4"> option_name </span><span style="color: #569CD6">LIKE</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">'_transient_%'</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">OR</span><span style="color: #D4D4D4"> option_name </span><span style="color: #569CD6">LIKE</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">'_site_transient_%'</span><span style="color: #D4D4D4">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-24 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> </figure> <p>Você pode <strong>simular as queries antes de executar</strong>. Cuidado porque depois que executar não dá para voltar!</p> <h3 class="wp-block-heading">Limpe revisões antigas de postagens</h3> <p>Cada vez que você edita um post, <strong>o WordPress salva uma revisão</strong>. Com o tempo, isso <strong>acumula centenas de versões</strong>, tornando o banco de dados pesado.</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>DELETE FROM wp_posts WHERE post_type = ‘revision’;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">DELETE</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">FROM</span><span style="color: #D4D4D4"> wp_posts </span><span style="color: #569CD6">WHERE</span><span style="color: #D4D4D4"> post_type = </span><span style="color: #CE9178">'revision'</span><span style="color: #D4D4D4">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <p><strong>Dica extra</strong>: Você pode limitar a quantidade de revisões que o WordPress guarda:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">PHP</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>define(‘WP_POST_REVISIONS’, 5);</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #DCDCAA">define</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">'WP_POST_REVISIONS'</span><span style="color: #D4D4D4">, </span><span style="color: #B5CEA8">5</span><span style="color: #D4D4D4">);</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">PHP</span></div> <p>Isso mantém <strong>apenas as últimas cinco revisões</strong>, reduzindo o excesso de dados.</p> <h3 class="wp-block-heading">Exclua rascunhos automáticos</h3> <p>O WordPress salva automaticamente rascunhos não publicados. Para remover todos os rascunhos não utilizados:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>DELETE FROM wp_posts WHERE post_status = ‘auto-draft’;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">DELETE</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">FROM</span><span style="color: #D4D4D4"> wp_posts </span><span style="color: #569CD6">WHERE</span><span style="color: #D4D4D4"> post_status = </span><span style="color: #CE9178">'auto-draft'</span><span style="color: #D4D4D4">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <h3 class="wp-block-heading">Limpe comentários de spam e lixo</h3> <p>Se seu site recebe muitos comentários, <strong>o banco de dados pode estar cheio de mensagens de spam</strong>. Remova comentários não aprovados e na lixeira:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>DELETE FROM wp_comments WHERE comment_approved = ‘spam’ OR comment_approved = ‘trash’;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">DELETE</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">FROM</span><span style="color: #D4D4D4"> wp_comments </span><span style="color: #569CD6">WHERE</span><span style="color: #D4D4D4"> comment_approved = </span><span style="color: #CE9178">'spam'</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">OR</span><span style="color: #D4D4D4"> comment_approved = </span><span style="color: #CE9178">'trash'</span><span style="color: #D4D4D4">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <p><strong>Dica extra</strong>: Instale o <strong>Akismet</strong> ou <strong>Antispam Bee</strong> para filtrar comentários antes que eles sejam salvos no banco de dados.</p> <h3 class="wp-block-heading">Remova metadados órfãos de posts</h3> <p>Cada post pode ter metadados extras salvos, como imagens destacadas, configurações de SEO, entre outros. Se um post for apagado, <strong>os metadados ficam sem referência</strong>, ocupando espaço no banco de dados.</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>DELETE pm FROM wp_postmeta pm LEFT JOIN wp_posts wp ON wp.ID = pm.post_id WHERE wp.ID IS NULL;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">DELETE</span><span style="color: #D4D4D4"> pm </span><span style="color: #569CD6">FROM</span><span style="color: #D4D4D4"> wp_postmeta pm</span></span> <span class="line"><span style="color: #569CD6">LEFT JOIN</span><span style="color: #D4D4D4"> wp_posts wp </span><span style="color: #569CD6">ON</span><span style="color: #D4D4D4"> wp.ID = pm.post_id</span></span> <span class="line"><span style="color: #569CD6">WHERE</span><span style="color: #D4D4D4"> wp.ID </span><span style="color: #569CD6">IS</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">NULL</span><span style="color: #D4D4D4">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <h3 class="wp-block-heading">Remova metadados órfãos de usuários</h3> <p>Usuários deletados <strong>deixam registros inúteis</strong> no banco de dados. Limpe dados que não têm mais referência:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>DELETE um FROM wp_usermeta um LEFT JOIN wp_users wu ON wu.ID = um.user_id WHERE wu.ID IS NULL;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">DELETE</span><span style="color: #D4D4D4"> um </span><span style="color: #569CD6">FROM</span><span style="color: #D4D4D4"> wp_usermeta um</span></span> <span class="line"><span style="color: #569CD6">LEFT JOIN</span><span style="color: #D4D4D4"> wp_users wu </span><span style="color: #569CD6">ON</span><span style="color: #D4D4D4"> wu.ID = um.user_id</span></span> <span class="line"><span style="color: #569CD6">WHERE</span><span style="color: #D4D4D4"> wu.ID </span><span style="color: #569CD6">IS</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">NULL</span><span style="color: #D4D4D4">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <h3 class="wp-block-heading">Limpe metadados órfãos de termos</h3> <p>Se categorias e tags foram excluídas, os metadados podem continuar ocupando espaço.</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>DELETE tm FROM wp_termmeta tm LEFT JOIN wp_terms wt ON wt.term_id = tm.term_id WHERE wt.term_id IS NULL;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #569CD6">DELETE</span><span style="color: #D4D4D4"> tm </span><span style="color: #569CD6">FROM</span><span style="color: #D4D4D4"> wp_termmeta tm</span></span> <span class="line"><span style="color: #569CD6">LEFT JOIN</span><span style="color: #D4D4D4"> wp_terms wt </span><span style="color: #569CD6">ON</span><span style="color: #D4D4D4"> wt.term_id = tm.term_id</span></span> <span class="line"><span style="color: #569CD6">WHERE</span><span style="color: #D4D4D4"> wt.term_id </span><span style="color: #569CD6">IS</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">NULL</span><span style="color: #D4D4D4">;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <h3 class="wp-block-heading">Otimizar todas as tabelas do WordPress</h3> <p>Otimizar tabelas melhora <strong>a organização dos dados</strong> e <strong>reduz fragmentação</strong>, tornando o banco mais rápido. Execute este comando no <strong>phpMyAdmin</strong>:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">SQL</span><span role="button" tabindex="0" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><textarea class="code-block-pro-copy-button-textarea" aria-hidden="true" readonly>OPTIMIZE TABLE wp_posts, wp_postmeta, wp_options, wp_comments, wp_commentmeta, wp_terms, wp_termmeta, wp_users, wp_usermeta;</textarea><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D4D4D4">OPTIMIZE </span><span style="color: #569CD6">TABLE</span><span style="color: #D4D4D4"> wp_posts, wp_postmeta, wp_options, wp_comments, wp_commentmeta, wp_terms, wp_termmeta, wp_users, wp_usermeta;</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">SQL</span></div> <p><strong>Dica</strong>: Use o plugin <strong>WP-Optimize</strong> para fazer isso regularmente!</p> <h2 class="wp-block-heading">Extras para manter seu banco de dados sempre leve</h2> <ul class="wp-block-list"> <li><strong>Desative o uso excessivo de plugins</strong>: quanto menos plugins ativos, mais rápido será o carregamento. Use apenas <strong>o necessário</strong>!</li> <li><strong>Use um plugin de cache</strong>: plugins como <strong>WP Rocket</strong>, <strong>W3 Total Cache</strong> e <strong>LiteSpeed Cache</strong> reduzem <strong>requisições ao banco de dados</strong>.</li> <li><strong>Minimize consultas desnecessárias</strong>: algumas funções do WordPress fazem <strong>consultas muito pesadas</strong> (como <code>query_posts</code>). Verifique se o código usa <code>WP_Query</code> corretamente.</li> <li><strong>Exclua registros inúteis no wp_options</strong>: tabelas como <code>wp_options</code> podem ficar <strong>cheias de dados antigos e inúteis</strong>, prejudicando o desempenho.</li> <li><strong>Monitore com ferramentas de otimização</strong>: use plugins como <strong>Query Monitor</strong> ou <strong>Debug Bar</strong> para verificar <strong>consultas lentas</strong> e ajustar seu banco de dados.</li> </ul> <p><strong>Agora seu WordPress estará limpo e otimizado!</strong> Se precisar de ajuda com suas estratégias de desenvolvimento web e marketing digital, entre cem contato com a Pink and Brain, os ratos do digital.</p> <p>O post <a href="https://www.pinkandbrain.com/saiba-como-limpar-e-otimizar-o-banco-de-dados-de-sites-wordpress/">Saiba como limpar e otimizar o banco de dados de sites WordPress</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p> </article> <article> <h1>Dicas essenciais de otimizações para SEO em sites WordPress</h1> <p>Marcelino Junior — Wed, 12 Mar 2025 20:59:21 +0000</p> <p>O <a href="https://www.pinkandbrain.com/elementos/cms-content-management-system/" title="CMS (Content Management System)">CMS (Content Management System)</a><strong> WordPress</strong> é a plataforma mais utilizada no mundo para criação de sites, lojas virtuais, blogs e outras finalidades. Ela é a <strong>preferida pela versatilidade e flexibilidade de customizações possíveis</strong>, mesmo para quem não tem muita familiaridade com a programação e necessite fazer ajustes visuais em suas páginas.</p> <p>Mas saiba que é exatamente aí que mora o perigo: quanto mais recursos e plugins utilizados para fazer algo que via programação seria mais “eficiente”, pior para o desempenho da sua aplicação. Além disso, por ser uma <strong>tecnologia baseada em PHP, que roda do lado do servidor</strong> completamente, um <strong>site tende a sere mais oneroso para a experiência de navegação</strong> dos usuários.</p> <p>Ou seja, ter um site no WordPress não é suficiente para ter sucesso em aquisição de <a href="https://www.pinkandbrain.com/elementos/trafego-organico/" title="tráfego orgânico">tráfego orgânico</a>, aquele oriundo de pesquisas no <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a>. Para ser notado e bem ranqueado <strong>é preciso garantir que seu site esteja otimizado para os mecanismos de pesquisa</strong>. Isso significa que precisará <strong>atender a uma série de premissas técnicas</strong>, como formatação das páginas, servidor utilizado, recursos utilizados, peso desses recursos, técnicas de atraso de carreegamento, técnicas de antecipação de carregamento, cache, GZIP, deflate, <a href="https://www.pinkandbrain.com/elementos/content-delivery-networks-cdn/" title="CDN">CDN</a>, tamanho do <a href="https://www.pinkandbrain.com/elementos/html-hypertext-markup-language/" title="HTML">HTML</a>, enfim, uma série de boas práticas que podem te colocar no toipó dos resultados de pesquisas (óbvio sem contar o marketing de conteúdo que é outra avenida paralela para desbravar.</p> <p>Se você utiliza o <strong>WordPress</strong>, é bem provável que já tenha se perguntado: <strong>“porque meu site não atrai os usuários”</strong> ou <strong>“como posso aprimorar o SEO do meu site WordPress para que ele apareça melhor no Google?”</strong>. A resposta não é simples, pois existem várias maneiras de otimizar um site como mencionado. Trabalhar em <strong>melhorias de SEO</strong> é essencial para manter suas páginas responsivas, rápidas, estratégicas na formatação, atualizadas, garantindo que os algoritmos considerem seu domínio relevante por fornecer informações novas e valiosas constantemente.</p> <p>Para ajudá-lo a entender<strong> como melhorar o SEO do seu site WordPress</strong>, nós, da Pink and Brain, preparamos este material com práticas fundamentais e poderosas, baseadas em nossa experiência de vários anos nesse mundo.</p> <h2 class="wp-block-heading">Por que escolher o CMS WordPress para o seu site?</h2> <p>Escolher o WordPress para o seu site é uma decisão inteligente por diversas razões. Primeiramente, o <strong>WordPress é uma das plataformas mais populares e amplamente utilizadas no mundo</strong>, conhecida por sua flexibilidade e facilidade de uso. Mesmo que você não tenha experiência técnica, o WordPress oferece uma interface amigável que permite criar e gerenciar sites com facilidade.</p> <p>Além disso, a<strong> plataforma é altamente personalizável</strong>, com milhares de temas e plugins disponíveis, permitindo que você adapte seu site às suas necessidades específicas, seja ele um <a href="https://www.pinkandbrain.com/elementos/blog/" title="blog">blog</a>, um site corporativo, uma loja virtual ou um portfólio.</p> <p>Outro grande benefício é a<strong> capacidade do WordPress de otimizar o SEO do seu site</strong>, com diversas ferramentas e plugins que ajudam a melhorar a visibilidade nos motores de busca.</p> <p>A <strong>segurança</strong> é outro fator importante, pois o WordPress recebe <strong>atualizações constantes para proteger seu site contra vulnerabilidades</strong>. Ele possui uma <strong>comunidade ativa de desenvolvedores</strong> e usuários ao redor do mundo oferece suporte contínuo, garantindo que você nunca esteja sozinho ao enfrentar um problema ou desafio.</p> <p>Mesmo se baseando em tecnologia server side em detrimento das tecnologias atuais cliente side como o React (Next é bom para SEO), que tendem a ser mais rápidas eperformáticas, o WordPress ainda sim é escalável, o que significa que ele pode crescer junto com o seu negócio, suportando desde pequenos sites até grandes projetos com alto tráfego. </p> <p>Essas características tornam o WordPress uma escolha sólida e confiável para qualquer tipo de site.</p> <h2 class="wp-block-heading">Ter um site em WordPress melhora automaticamente a posição no Google?</h2> <p>Claro que não! Embora o WordPress traga vantagens pela sua flexibilidade e capacidade de customização, ideais para as equipes de marketing e produtores de conteúdo, <strong>a melhoria de posicionamento no Google depende de diversos fatores, como o tempo de carregamento das páginas, as premissas técnicas como um todo, a qualidade do conteúdo, a segurança do site, a responsividade em dispositivos móveis e a <a href="https://www.pinkandbrain.com/elementos/autoridade-do-dominio-da/" title="autoridade do domínio">autoridade do domínio</a></strong>, além de outras centenas de boas práticas.</p> <p>Porém, se você usa a plataforma de forma conciente dessas premissas, certamente o WordPress pode ser um canhão na sua mão. Sites como a CNN, Infomoney, Exame, B3, dentre outros, utilizam e possuem visibilidade orgânica poderosa, estando sempre nas primeiras posições para uma infinidade de termos valiosos que são procurados diariamente.</p> <h2 class="wp-block-heading">Dicas de ouro para otimizar seu site WordPress para fins de SEO</h2> <p>Aqui na Pink and Brain somos ratos especialistas em desenvolver sites otimizados em WordPress e iremos compartilhar com você dicas valiosas que usamos para nossos clientes. </p> <h3 class="wp-block-heading">Fuja do Elementor e crie um tema autoral para o seu negócio</h3> <p>Ao instalar o WordPress, você terá um tema padrão, como o “Twenty Twenty”. Embora básico, você pode substituí-lo por um dos milhares de temas disponíveis, gratuitos ou pagos. </p> <p>Contudo, temas prontos costumam não ser otimizados para SEO. <strong>O ideal é construir um tema do zero incluindo as melhores praticas de formatação semântica</strong>, as malicias do SEO como sempre falamos, para que o seu site tenha uma vantagem diante da concorrencia.</p> <p>Um <strong>erro comum é utilizar o plugin Elementor para criar sites</strong>, pois ele adiciona muito código ineficiente, que pode tornar as páginas mais lentas e impactar negativamente SEO. O Elementor é geralmente recomendado para projetos MVP ou landing pages de campanhas que não dependem diretamente de tráfego orgânico.</p> <p>Aqui na Pink and Brain, costumamos <strong>contruir temas autorais para os nossos clientes trazendo toda nossa carga cognitiva de experiência em SEO</strong> para conceber aplicações super podersosas no que tange aquisição orgânica.</p> <h3 class="wp-block-heading">Utilize JavaScript puro ao invés de recursos terceiros como o JQuery</h3> <p><strong>Deixar de utilizar o jQuery para utilizar <a href="https://www.pinkandbrain.com/elementos/javascript/" title="JavaScript">JavaScript</a> puro pode trazer diversos benefícios para o SEO do seu site</strong>. Primeiramente, o JavaScript puro ajuda a <strong>reduzir o tamanho do código e o overhead</strong>, resultando em páginas mais leves e rápidas. Essa melhoria na velocidade de carregamento não só proporciona uma experiência de usuário mais fluida, mas também é um fator importante para o SEO, já que o Google valoriza sites rápidos.</p> <p>Ao eliminar a dependência do jQuery, <strong>você reduz o código desnecessário</strong>, o que pode evitar problemas de carregamento e renderização que poderiam impactar negativamente a <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a> do seu site. O uso de JavaScript puro também garante melhor compatibilidade com APIs modernas nativas dos navegadores, o que ajuda a prevenir erros que poderiam afetar a acessibilidade e a performance do site.</p> <p>Outra vantagem é que <strong>menos dependências significam menos riscos de conflitos e uma manutenção mais fácil</strong>. Com um código mais limpo e direto, você garante que seu site funcione de maneira consistente em diferentes navegadores e dispositivos, proporcionando uma experiência de usuário positiva que contribui para melhores resultados de SEO.</p> <h3 class="wp-block-heading">Reponsividade ao invés de desenvolver interfaces separadas</h3> <p>Com o crescimento contínuo do uso de smartphones e tablets, a otimização para dispositivos móveis não é mais uma opção, mas uma necessidade. <strong>O Google utiliza a indexação <a href="https://www.pinkandbrain.com/elementos/mobile-first/" title="mobile-first">mobile-first</a>, o que significa que ele prioriza a versão móvel do seu site ao determinar o ranking nos resultados de busca</strong>. </p> <p>Ao tornar o seu site responsivo, se adaptando para dispositivos móveis, você não apenas melhora o SEO, mas também garante uma experiência de usuário positiva, o que pode resultar em mais visitas e um maior engajamento com seu conteúdo.</p> <p>Na década passada, pela falta de recursos como o CSS Grid, Flexbox, as media queries, o HTML5 semântico, <strong>era comum ver sites desenvolvendo suas aplciações apartadas para cada dispositivo</strong>, mas isso morreu rápido. Hoje quem faz isso está deixando dinheiro na mesa e perdendo tempo. Nosso caso mais recente, o <strong>portal Panrotas</strong>, tinha um<a href="https://www.pinkandbrain.com/usar-subdominio-exclusivo-para-versao-mobile-e-uma-boa/"> site no subdomínio “m.”</a> para sua versão mobile, e ao migrar tudo para o “www”, teve um crescimento enorme de visibilidade.</p> <p>Uma coisa posso afirmar: <strong>foi o melhor movimento da empresa dos últimos 10 anos</strong> da emprsa. Veja o gráfico do nosso dashboard no Looker. Monitoramos a audiência antes e depois da mudança, e realizamos um planejamento detalhado de redirecionamentos, além de melhorias técnicas de SEO, ajustes na formatação HTML e otimização da estrutura de dados. O resultado? <strong>Aumentamos em 25% a audiência diária média do portal</strong>.</p> <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Monitoramento da audiência diária do portal Panrotas antes e depois da migração m. para www.</figcaption></figure> <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Site da <a href="https://www.panrotas.com.br">Panrotas</a> em diferentes devices sob a mesma estrutura www.</figcaption></figure> <p>Somos <strong>ratos quando o assunto é migração de sites, m. para www</strong>.</p> <h3 class="wp-block-heading">Otimize o SEO On-page: tags essenciais, title, description, imagem de destaque, densidade das palavras-chave no contexto</h3> <p>Para facilitar o trabalho de otimização, é essencial ter um bom plugin de SEO instalado no WordPress. O <strong>Yoast SEO e o Rank Math</strong> são dois dos plugins mais populares. Eles ajudam a configurar meta descrições, tags de título, sitemaps e muito mais. Esses plugins também oferecem análise de conteúdo em tempo real, sugerindo melhorias para que suas páginas estejam sempre otimizadas.</p> <h3 class="wp-block-heading">Otimize suas imagens (a tal boa prática em imagens)</h3> <p>Imagens de alta qualidade são importantes, mas se não forem otimizadas, podem prejudicar o desempenho do seu site. Precisamos torna-las leves e responsivas para acelerar o tempo de carregamento de páginas web.</p> <p>Existem 5 premissas básicas quando lidamos com imagens em páginas web:</p> <ul class="wp-block-list"> <li>Nomenclatura;</li> <li>Formato;</li> <li>Peso;</li> <li>Atributos Alt e Title;</li> <li>Legenda.</li> </ul> <p>Tanto o formato quando o peso estão diretamente ligados ao tempo de carrergamento das páginas, essenciais para atender as métricas do Google Core Web Vitals (entenda aqui).</p> <p>Quando criamos um tema do zero, otimizamos cada espaço onde as imagens poderão aparecer e por isso realizamos <strong>crops estratégicos</strong> pensando no resultado final do carregamento da página. Dessa forma, ao incluir uma imagem, automaticamente ma aplicação irá otimiza-las para cada espaço. No entanto, recomendamos utilizar ferramentas como o <strong>Smush ou o ShortPixel para compactar suas imagens sem perder qualidade</strong>. </p> <p>Não menos importante, o nome que você dá aos arquivos, <strong>atributos alt e title que são cadastrados nas meta informações de cada imagem</strong>, além da <strong>legenda</strong>, também são importantes para uma estratégia sólida de SEO., São através dessas <strong>boas práticas em imagens</strong> que os bots (<a href="https://www.pinkandbrain.com/elementos/crawlers/" title="crawlers">crawlers</a> como o GopogleBot) podem entender e converter o conteúdo visual em textual, além de tornar seu site acessível para pessaoss com deficiência visual.</p> <p>Ah!! e sobre os formatos, utilize sempre imagens em <strong>Webp ao invés de Jpeg ou PNG</strong>. Por serem mais leves, elas ajudam o seu site a performa melhor. Vectores, logos, utilize o SVG. Vídeos e iframes, use o atributo <code>loading="lazy"</code> para que não atrapalhem a renderização do HTML.</p> <h3 class="wp-block-heading">Melhore a velocidade do seu site</h3> <p>A <strong>velocidade de carregamento do seu site é o principal ponto de atenção para SEO</strong>. Se o seu site demorar mais do que alguns segundos para carregar, os visitantes podem sair antes mesmo de ver o conteúdo, o que aumenta a taxa de rejeição. Para melhorar a velocidade, considere usar um serviço de hospedagem de qualidade, habilitar o cache (<strong>WP Rocket, WP Fastest Cache</strong> são ótimos plugins para isso). Minimize também o uso de recursos terceiros.</p> <p>Dessa necessidade de tornar a web rápida, eficiente e menos onerosa, foi que o Google lançõu o Core Web Vitals. Após aplicar vários critérios para a experiência do usuário, como a velocidade da página e a responsividade do site, o Google anunciou as Core Web Vitals (ou, em português, Principais Métricas da Web) em maio de 2020. O objetivo era oferecer uma orientação unificada para os indicadores de qualidade de um site.</p> <p>Não vamos entrar muito nesse mérito nessa postagem ,as aqui tem um guia completo sobre as métricas do Google Core Web Vitals para você enternder a fundo como funciona e como otimizar.</p> <figure class="wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-25 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-large"><a href="https://www.pinkandbrain.com/dicas-essenciais-para-otimizar-o-seo-do-seu-site-wordpress/google-core-web-vitals/"></a></figure> <figure class="wp-block-image size-full"><a href="https://www.pinkandbrain.com/dicas-essenciais-para-otimizar-o-seo-do-seu-site-wordpress/metricas-google-core-web-vitals/"></a><figcaption class="wp-element-caption">Principais métricas e tempo “limite” para otimizar o carregamento de sites</figcaption></figure> </figure> <h4 class="wp-block-heading">Sites WordPress podem ter boas notas de classificação no Core Web Vitals?</h4> <p>Boas não.. excelentes. Inclusive hoje enquanto escrevo esse artigo, lançamos o site da Express Remoções otimizado para SEO. Criamos um tema do absoluto zero para este cliente e reparem as notas obtidas pelo Google Lighthouise, ferramente do console do seu navegador que permite a visualização rápida das principáis métricas apontadas..</p> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-26 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"><a href="https://www.pinkandbrain.com/dicas-essenciais-para-otimizar-o-seo-do-seu-site-wordpress/site-wordpress-otimizado-para-seo/"></a><figcaption class="wp-element-caption">Site em WordPress otimizado para SEO</figcaption></figure> </figure> <h3 class="wp-block-heading">SEO técnico: a fundação da sua obra</h3> <p>A parte técnica do SEO não pode ser ignorada,: ela é de fato a fundação da sua construção. Escolha um servidor dedicado, use a CDN ao seu favor, mas também pense em toda a arquitetura para fins de rastreabilidade e indexação, como estrutura das URLs, <strong>sitemaps, feeds, etc</strong>… </p> <p>Uma vez lançando o site, utilize ferramentas de análise como o próprio <a href="https://www.pinkandbrain.com/elementos/google-search-console/" title="Google Search Console">Google Search Console</a> para verificar se as páginas importantes estão sendo indexadas e se não há erros que possam afetar seu ranking.</p> <h3 class="wp-block-heading">Certificado SSL e o HTTPS</h3> <p>A segurança é um fator crucial para garantir um bom tráfego orgânico. <strong>Sites com HTTPS oferecem uma camada extra de segurança e isso é considerado um fator de ranqueamento pelo Google</strong>. Para implementar o HTTPS, obtenha um certificado SSL junto ao seu provedor de hospedagem ou através de autoridades de certificação.</p> <h3 class="wp-block-heading">Foque na experiência do usuário</h3> <p>Embora as otimizações sejam importantes para os buscadores, o foco principal deve ser o usuário. O Google prioriza informações reais, relevantes e úteis. Portanto, tenha um site bem arquitetado, com <strong>conteúdo estruturado e que realmente atenda às necessidades dos usuários</strong>. Evite práticas de spam, que podem resultar em penalizações ou até no banimento do Google.</p> <h3 class="wp-block-heading">Atualize seu conteúdo regularmente</h3> <p>Conteúdos antigos podem perder relevância com o tempo. <strong>Atualize seus posts antigos com novas informações, dados recentes ou melhores práticas</strong>. Isso não só mantém seu conteúdo relevante, mas também mostra ao Google que seu site está sempre atualizado e fornecendo informações precisas.</p> <h3 class="wp-block-heading">Monitore seu desempenho</h3> <p>Como dito, monitore o desempenho do seu site com<strong> ferramentas como o Google Analytics e o Google <a href="https://www.pinkandbrain.com/elementos/google-search-console/" title="Search Console">Search Console</a> para acompanhar o tráfego, o comportamento dos usuários e o desempenho das suas páginas</strong>. Analisar esses dados permite que você faça ajustes contínuos e mantenha seu site otimizado para SEO.</p> <hr class="wp-block-separator has-alpha-channel-opacity"> <p><strong>Otimizar seu site WordPress para SEO</strong> é um processo contínuo, que exige atenção e ajustes regulares. Com as práticas e ferramentas certas, você pode aumentar significativamente sua visibilidade online e atrair mais visitantes qualificados. Lembre-se: um <strong>site otimizado não é apenas benéfico para os mecanismos de pesquisas, mas também proporciona uma experiência melhor para os seus usuários</strong>. </p> <p>Comece hoje mesmo e colha os frutos de um SEO bem feito!</p> <p>Se você precisar de ajuda com otimização ou deseja explorar mais sobre como melhorar o SEO do seu site, não hesite em <strong>entrar em contato com os ratos da <a href="https://www.pinkandbrain.com/">Pink and Brain</a></strong>. Somos ratos quando o assunto é <strong>criar sites otimizados em WordPress</strong>.</p> <p>O post <a href="https://www.pinkandbrain.com/dicas-essenciais-de-otimizacoes-para-seo-em-sites-wordpress/">Dicas essenciais de otimizações para SEO em sites WordPress</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p> </article> <article> <h1>Better Search Replace: atualização de linkagem em massa no WordPress</h1> <p>César Canteiro — Wed, 05 Mar 2025 18:50:06 +0000</p> <p>Certamente você já precisou fazer uma força tarefa para atualizar links internos que haviam sido colocados em centenas ou milhares de postagens. Imagino quanto tempo não levou para ajustar todo esse processo e administrar a falha humana também é um fator relevante.</p> <p>Se você já precisou <strong>atualizar URLs em massa em seu site WordPress</strong>, sabe o quão trabalhoso pode ser modificar cada link manualmente. Felizmente, o plugin <strong>Better Search Replace</strong> facilita esse processo, permitindo que você altere links diretamente no banco de dados sem precisar mexer em cada post.</p> <p>Neste artigo, vamos<strong> explorar um caso de uso “rotineiro” para quem trabalha com SEO</strong> e destacar pontos importantes de qualquer virada de estrutura de URLs para levar em consideração antes de sair alterando as coisas no site.</p> <h2 class="wp-block-heading">O que é o plugin Better Search Replace?</h2> <p>O <strong>Better Search Replace</strong> é um plugin gratuito do WordPress que permite buscar e substituir trechos de texto dentro do banco de dados do site. Ele é ideal para: </p> <ul class="wp-block-list"> <li>Atualizar URLs antigas para novas </li> <li>Corrigir erros em links internos </li> <li>Trocar palavras-chave ou referências obsoletas </li> <li>Ajustar caminhos de imagens e arquivos</li> </ul> <p>Uma das grandes vantagens do plugin é a opção de <strong>Dry Run</strong>, que permite testar a alteração antes de aplicá-la, evitando erros. Você roda a ferramente, enxerga quantas “menções” em alguma tabela do banco de dados escolhida existe, e pode “debugar” e anteceipar erros não programados.</p> <h2 class="wp-block-heading">Caso real: como utilizamos o Better Search Replace em clientes da Pink and Brain</h2> <p>Quase que de maneira natural, precisávamos atualizar links internos de publicadores de notícias do padr <code>/tag/</code> para <code>/tudo-sobre/</code> ou quaqluer outra variação esperada. Com centenas de posts e milhares de links, fazer isso manualmente seria inviável.</p> <figure class="wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-27 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> <figure class="wp-block-image size-full"></figure> </figure> <p>Com o Better Search Replace, conseguimos:</p> <ul class="wp-block-list"> <li>Identificar <strong>7.932 ocorrências</strong> que precisavam ser alteradas</li> <li>Testar a substituição com o <strong>Dry Run</strong></li> <li>Atualizar todos os links em poucos minutos sem erros</li> </ul> <p>Esse processo foi rápido, eficiente e ajudou a manter a estrutura do site consistente sem comprometer o SEO.</p> <h2 class="wp-block-heading">Como usar o Better Search Replace (Passo a Passo)</h2> <h3 class="wp-block-heading">1. Instalação e ativação</h3> <ol start="1" class="wp-block-list"> <li>No painel do WordPress, vá até <strong>Plugins > Adicionar novo</strong></li> <li>Busque por <strong>Better Search Replace</strong></li> <li>Instale e ative o plugin</li> </ol> <h3 class="wp-block-heading">2. Fazendo a busca e substituição</h3> <ol start="1" class="wp-block-list"> <li>Acesse <strong>Ferramentas > Better Search Replace</strong></li> <li>No campo <strong>Pesquisar por</strong>, insira a URL antiga (ex: <code>/tag/</code>)</li> <li>No campo <strong>Substituir por</strong>, insira a nova URL (ex: <code>/tudo-sobre/</code>)</li> <li>Selecione a tabela <strong>wp_posts</strong> (ou todas, se desejar mudar em todo o banco de dados)</li> <li>Marque a opção <strong>Dry Run</strong> e clique em <strong>Executar Pesquisa</strong></li> <li>Verifique os resultados e, se tudo estiver correto, desmarque <strong>Dry Run</strong> e clique em <strong>Executar Substituição</strong></li> </ol> <p>Pronto! Seus links serão atualizados instantaneamente. 🔥</p> <hr class="wp-block-separator has-alpha-channel-opacity"> <h2 class="wp-block-heading">Cuidados ao modificar estrutura de URLs (Estrategia Completa para SEO)</h2> <p>Mudar URLs é um processo delicado. Para evitar problemas de SEO, siga estas boas práticas:</p> <h3 class="wp-block-heading">1. Configurar redirecionamentos 301</h3> <p>Sempre que uma URL mudar, configure <strong>redirecionamento(s) 301</strong> para garantir que os usuários que encontrarem links antigos sejam levados ao novo destino.</p> <p>Uma maneira prática é através do <code>htaccess</code>, abaixo do <code>RewriteEngine On</code></p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">Hack</span><span role="button" tabindex="0" data-code="RewriteRule ^tag/(.*)$ /tudo-sobre/$1 [R=301,L]" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D4D4D4">RewriteRule ^tag/(</span><span style="color: #D4D4D4">.</span><span style="color: #D4D4D4">*)$ /tudo-sobre/$</span><span style="color: #B5CEA8">1</span><span style="color: #D4D4D4"> [R=</span><span style="color: #B5CEA8">301</span><span style="color: #D4D4D4">,L]</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">Hack</span></div> <h3 class="wp-block-heading">2. Atualizar linkagem interna</h3> <p>Com o Better Search Replace, você atualiza os links nos posts, mas também revise menus, widgets e links manuais para garantir consistência.</p> <h3 class="wp-block-heading">3. Monitorar requisições e indexação</h3> <p>Use o <strong><a href="https://www.pinkandbrain.com/elementos/google-search-console/" title="Google Search Console">Google Search Console</a></strong> para verificar se os redirecionamentos estão funcionando e se as novas URLs estão sendo indexadas corretamente.</p> <p>Ferramentas como <strong><a href="https://www.pinkandbrain.com/elementos/screaming-frog/" title="Screaming Frog">Screaming Frog</a></strong> também ajudam a analisar erros de <a href="https://www.pinkandbrain.com/redirects-em-seo-guia-para-preservar-autoridade-trafego-e-ranqueamento/" title="redirecionamento">redirecionamento</a> e links quebrados.</p> <h3 class="wp-block-heading">4. Acompanhar o impacto para SEO</h3> <p>Monitorar rankings e tráfego é essencial. Use o <strong><a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a> Analytics</strong> e o <strong><a href="https://www.pinkandbrain.com/elementos/google-search-console/" title="Search Console">Search Console</a></strong> para ver se houve quedas de desempenho e ajustar a estratégia, se necessário. Faça um gráfico de usuários e pageviews e filtre por página de destino que contém /tag/ e outro que contenha /tudo-sobre/. Com isso você estará enxergando a transição de “visibilidade” entre ambas as estruturadas ao longo do tempo.</p> <h2 class="wp-block-heading">Mais um caso de uso de alteração de palavras-chave e frases em massa no WordPress</h2> <figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> </div></figure> <h2 class="wp-block-heading">Insghts finais dos ratos</h2> <p>O <strong>Better Search Replace</strong> é uma ferramenta incrível e fantástica para gerenciar alterações massivas de links e conteúdo no WordPress, garantindo que seu site permaneça organizado e otimizado. Você não precisa da ajuda do DEV para isso (mas consulte-o antes por precaução).</p> <p>Se você está planejando uma mudança de estrutura de URLs, siga as melhores práticas para evitar impactos negativos e aproveite a automação do plugin para agilizar o processo.</p> <p>Conte com os <strong>ratos do digital</strong> para seu projeto de SEO e Inbound Marketing.</p> <p>O post <a href="https://www.pinkandbrain.com/better-search-replace-atualizacao-de-linkagem-em-massa-no-wordpress/">Better Search Replace: atualização de linkagem em massa no WordPress</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p> </article> <article> <h1>Manipulando a scrollbar com CSS: como esconder, estilizar e mais</h1> <p>César Canteiro — Thu, 27 Feb 2025 20:18:58 +0000</p> <p>A <strong>scrollbar (barra de rolagem)</strong> de um site é aquele elemento na lateral que mostra em que ponto do página o usuário está. Ela pode ser usada tanto no eixo X quanto no Y, e pode ser manipulada de diversas formas usando apenas CSS. </p> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-28 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> <figcaption class="blocks-gallery-caption wp-element-caption">História e evolução da scrollbar nos navegadores</figcaption></figure> <p>Neste post, você aprenderá a:</p> <ul class="wp-block-list"> <li>Esconder a scrollbar sem desativar a rolagem;</li> <li>Personalizar a aparência da scrollbar;</li> <li>Modificar o comportamento da rolagem;</li> <li>Tornar a rolagem mais suave.</li> </ul> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-29 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> <figcaption class="blocks-gallery-caption wp-element-caption">Anatomia de uma scrollbar. Todos os tipos de ajustes e estilizações via CSS</figcaption></figure> <h2 class="wp-block-heading">1. Como esconder a scrollbar sem desativar o scroll</h2> <p>Se deseja ocultar a scrollbar, mas ainda permitir a rolagem do conteúdo, use as seguintes regras CSS:</p> <h3 class="wp-block-heading">Para navegadores modernos (Chrome, Edge, Safari):</h3> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code=".elemento::-webkit-scrollbar { display: none; }" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D7BA7D">.elemento::-webkit-scrollbar</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">display</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">none</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div> <h3 class="wp-block-heading">Para Firefox:</h3> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code=".elemento { scrollbar-width: none; }" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D7BA7D">.elemento</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">scrollbar-width</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">none</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div> <h3 class="wp-block-heading">Para Internet Explorer e Edge antigo:</h3> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code=".elemento { -ms-overflow-style: none; }" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D7BA7D">.elemento</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">-ms-overflow-style</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">none</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div> <p>Com essas configurações, a barra de rolagem ficará invisível, mas o usuário ainda poderá rolar o conteúdo.</p> <h2 class="wp-block-heading">2. Como estilizar e personalizar a scrollbar</h2> <p>Se quiser estilizar a barra de rolagem em navegadores baseados em <strong>WebKit</strong> (Chrome, Safari, Edge), utilize os seguintes seletores:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code=".elemento::-webkit-scrollbar { width: 8px; height: 8px; } .elemento::-webkit-scrollbar-track { background: #f1f1f1; } .elemento::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } .elemento::-webkit-scrollbar-thumb:hover { background: #555; }" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D7BA7D">.elemento::-webkit-scrollbar</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">width</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">8px</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">height</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">8px</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span> <span class="line"></span> <span class="line"><span style="color: #D7BA7D">.elemento::-webkit-scrollbar-track</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">background</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">#f1f1f1</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span> <span class="line"></span> <span class="line"><span style="color: #D7BA7D">.elemento::-webkit-scrollbar-thumb</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">background</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">#888</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">border-radius</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">4px</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span> <span class="line"></span> <span class="line"><span style="color: #D7BA7D">.elemento::-webkit-scrollbar-thumb:hover</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">background</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">#555</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div> <p>Explicação:</p> <ul class="wp-block-list"> <li><code>::-webkit-scrollbar</code> → Define o tamanho da scrollbar.</li> <li><code>::-webkit-scrollbar-track</code> → Define a área de fundo da scrollbar.</li> <li><code>::-webkit-scrollbar-thumb</code> → Define o “botão” que o usuário arrasta.</li> <li><code>::-webkit-scrollbar-thumb:hover</code> → Estiliza a scrollbar ao passar o mouse.</li> </ul> <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> <p>📌 <strong>Observação</strong>: o Firefox permite personalizar apenas a largura usando <code>scrollbar-width</code>, mas não oferece suporte a cores ou outros estilos avançados.</p> </blockquote> <h2 class="wp-block-heading">3. Como fazer a rolagem suave</h2> <p>Caso queira que a rolagem seja mais fluida, adicione este CSS:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code="html { scroll-behavior: smooth; }" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D7BA7D"><a href="https://www.pinkandbrain.com/elementos/html-hypertext-markup-language/" title="html">html</a></span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">scroll-behavior</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">smooth</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div> <p>Isso faz com que os links internos da página rolem suavemente até o destino, ao invés de saltar diretamente.</p> <h2 class="wp-block-heading">4. Como criar uma scrollbar oculta que aparece ao passar o mouse</h2> <p>Se deseja esconder a scrollbar e mostrá-la apenas quando o usuário passar o mouse sobre o elemento, utilize:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code=".elemento::-webkit-scrollbar { width: 0px; } .elemento:hover::-webkit-scrollbar { width: 8px; }" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D7BA7D">.elemento::-webkit-scrollbar</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">width</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">0px</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span> <span class="line"></span> <span class="line"><span style="color: #D7BA7D">.elemento:hover::-webkit-scrollbar</span><span style="color: #D4D4D4"> {</span></span> <span class="line"><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">width</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">8px</span><span style="color: #D4D4D4">;</span></span> <span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div> <hr class="wp-block-separator has-alpha-channel-opacity"> <p>Manipular a scrollbar pode melhorar muito a experiência do usuário, deixando o design mais limpo e elegante. Com essas técnicas, você pode ocultar, personalizar e até tornar a rolagem mais fluida.</p> <p>Se quiser desennvolver um site de sucesso, com todas as prtemissas para SEO, <a href="https://www.pinkandbrain.com/elementos/ux-user-experience/" title="UX">UX</a> e conversão, entre em contatos com os <strong>ratos do desenvolvimento web</strong>! 🚀</p> <p>O post <a href="https://www.pinkandbrain.com/manipulando-a-scrollbar-com-css-como-esconder-estilizar-e-mais/">Manipulando a scrollbar com CSS: como esconder, estilizar e mais</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p> </article> <article> <h1>Tags HTML semânticas e sua importância para o SEO técnico</h1> <p>Marcelino Junior — Tue, 18 Feb 2025 21:02:16 +0000</p> <p>O <strong><a href="https://www.pinkandbrain.com/elementos/html-hypertext-markup-language/" title="HTML">HTML</a> (HyperText Markup Language)</strong> é a linguagem base para a construção de páginas na web. Ao longo dos anos, ele evoluiu para incluir <strong>elementos semânticos que melhoram a organização e acessibilidade do conteúdo</strong>. Essas <strong>tags semânticas</strong> não apenas tornam o código mais compreensível para desenvolvedores, mas também desempenham um papel fundamental no SEO técnico, ajudando os motores de busca a interpretar e classificar melhor uma página.</p> <h2 class="wp-block-heading">O que são tags HTML semânticas?</h2> <p><strong>Tags semânticas são elementos do HTML que possuem um significado específico</strong>, indicando o tipo de conteúdo que elas contêm. Diferente das <strong>tags genéricas como <code><div></code> e <code><span></code></strong>, que apenas agrupam elementos sem atribuir um significado, as tags semânticas descrevem explicitamente o propósito do conteúdo.</p> <h3 class="wp-block-heading">Exemplos de tags semânticas incluem</h3> <ul class="wp-block-list"> <li><code><header></code> – Define a seção de cabeçalho da página ou de um artigo.</li> <li><code><nav></code> – Representa um bloco de navegação, geralmente usado para menus.</li> <li><code><section></code> – Define uma seção temática dentro de um documento.</li> <li><code><article></code> – Indica um conteúdo independente, como um post de <a href="https://www.pinkandbrain.com/elementos/blog/" title="blog">blog</a> ou uma notícia.</li> <li><code><aside></code> – Utilizado para conteúdo complementar, como barras laterais e widgets.</li> <li><code><footer></code> – Marca o rodapé de uma página ou seção.</li> <li><code><main></code> – Define o conteúdo principal da página, evitando elementos repetitivos como menus e rodapés.</li> <li><code><figure></code> – Agrupa elementos gráficos como imagens, ilustrações e tabelas.</li> <li><code><figcaption></code> – Define a legenda de um elemento <code><figure></code>.</li> <li><code><mark></code> – Destaca um trecho de texto importante.</li> <li><code><time></code> – Representa datas e horários de forma compreensível para humanos e máquinas.</li> <li><code><details></code> – Cria uma seção de conteúdo expansível/colapsável.</li> <li><code><summary></code> – Define o rótulo visível de um elemento <code><details></code>.</li> <li><code><address></code> – Representa informações de contato, como endereço de e-mail, telefone e localização.</li> <li><code><dialog></code> – Define uma caixa de diálogo ou janela modal interativa.</li> <li><code><cite></code> – Indica a citação de uma fonte.</li> <li><code><blockquote></code> – Define uma citação em bloco, usada para trechos de textos externos.</li> <li><code><code></code> – Representa um trecho de código de programação.</li> <li><code><em></code> – Dá ênfase ao texto, geralmente exibindo-o em itálico.</li> <li><code><strong></code> – Indica um texto de alta importância, geralmente exibindo-o em negrito.</li> </ul> <h2 class="wp-block-heading">Como as tags semânticas melhoram o SEO técnico</h2> <h3 class="wp-block-heading">Melhor compreensão pelo Google</h3> <p>Os motores de busca utilizam <a href="https://www.pinkandbrain.com/elementos/crawlers/" title="crawlers">crawlers</a> (robôs de <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a>) para entender a estrutura de um site. Quando um site utiliza tags semânticas corretamente, o <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a> e outros mecanismos de pesquisa conseguem identificar com mais precisão qual parte do conteúdo é relevante para determinada busca.</p> <p>Por exemplo, se um artigo estiver envolto na tag <code><article></code>, o Google entende que aquele bloco de texto representa um conteúdo completo e independente, facilitando sua exibição nos resultados de pesquisa.</p> <h3 class="wp-block-heading">Melhora na acessibilidade</h3> <p><strong>As tags semânticas também são importantes para leitores de tela utilizados por pessoas com deficiência visual.</strong> Esses leitores utilizam as tags para fornecer uma experiência de navegação mais fluida e compreensível, o que melhora a acessibilidade do site e pode contribuir para um melhor ranqueamento no Google.</p> <h3 class="wp-block-heading">Facilidade na indexação</h3> <p>Quando os robôs de busca analisam um site com HTML bem estruturado, a indexação ocorre de maneira mais eficiente. Tags como <code><header></code>, <code><main></code>, <code><article></code>, <code><section></code> e <code><footer></code> ajudam os motores de busca a diferenciar seções importantes da página, melhorando a forma como o conteúdo é exibido nos resultados da pesquisa.</p> <h3 class="wp-block-heading">Destaque nos resultados de busca</h3> <p>O Google exibe rich snippets (fragmentos ricos) nos resultados de pesquisa com base em uma estrutura HTML bem definida. Isso pode incluir breadcrumbs, avaliações, receitas e outros <a href="https://www.pinkandbrain.com/elementos/dados-estruturados/" title="dados estruturados">dados estruturados</a>. O uso correto de tags semânticas facilita a interpretação desses dados pelos motores de busca, aumentando as chances de um site aparecer com informações mais atrativas nos resultados.</p> <h3 class="wp-block-heading">Melhoria na experiência do usuário (UX)</h3> <p>Um código HTML mais organizado e semântico melhora a experiência do usuário ao tornar o conteúdo mais claro e navegável. Isso reduz a taxa de rejeição e aumenta o tempo de permanência no site, fatores que influenciam positivamente o SEO.</p> <h2 class="wp-block-heading">Erros comuns e melhores práticas</h2> <h3 class="wp-block-heading">Uso excessivo de <code><div></code> em vez de tags apropriadas</h3> <p>Muitos desenvolvedores ainda utilizam <code><div></code> para estruturar toda a página. Isso prejudica a semântica e a acessibilidade. Sempre que possível, use tags apropriadas como <code><section></code>, <code><article></code>, <code><header></code> e <code><nav></code>.</p> <h3 class="wp-block-heading">Evitar aninhamento inadequado de tags semânticas</h3> <p>Evite estruturas incorretas, como um <code><footer></code> dentro de um <code><article></code>. Certifique-se de seguir a hierarquia lógica do conteúdo.</p> <h3 class="wp-block-heading">Certificar-se de que <code><main></code> aparece apenas uma vez por página</h3> <p>A tag <code><main></code> deve ser única e conter apenas o conteúdo principal da página, sem repetir menus ou rodapés.</p> <h2 class="wp-block-heading">Comparação entre HTML antigo e HTML semântico</h2> <figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><th>HTML antigo (Sem semântica)</th><th>HTML semântico</th></tr><tr><td><code><div id='header'></code></td><td><code><header></code></td></tr><tr><td><code><div class='nav'></code></td><td><code><nav></code></td></tr><tr><td><code><div id='main'></code></td><td><code><main></code></td></tr><tr><td><code><div class='section'></code></td><td><code><section></code></td></tr><tr><td><code><div class='article'></code></td><td><code><article></code></td></tr><tr><td><code><div id='footer'></code></td><td><code><footer></code></td></tr></tbody></table></figure> <p>Essa abordagem melhora a legibilidade do código, tornando-o mais organizado e compreensível tanto para desenvolvedores quanto para motores de busca.</p> <h2 class="wp-block-heading">Exemplo prático de uso de tags semânticas</h2> <p>Aqui está um exemplo de estrutura de código HTML utilizando tags semânticas para um blog:</p> <div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">HTML</span><span role="button" tabindex="0" data-code="<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blog de Tecnologia Início Artigos Contato O Futuro da Inteligência Artificial A inteligência artificial está revolucionando diversas indústrias... Artigos Relacionados Machine Learning e seu impacto Chatbots inteligentes © 2025 Blog de Tecnologia - Todos os direitos reservados. " style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blog de Tecnologiatitle> head> <body> <header> <nav> <ul> <li><a href="#">Inícioa>li> <li><a href="#">Artigosa>li> <li><a href="#">Contatoa>li> ul> nav> header> <main> <article> <h1>O Futuro da Inteligência Artificialh2> <p>A inteligência artificial está revolucionando diversas indústrias...p> article> <aside> <h2>Artigos Relacionadosh3> <ul> <li><a href="#">Machine Learning e seu impactoa>li> <li><a href="#">Chatbots inteligentesa>li> ul> aside> main> <footer> <p>© 2025 Blog de Tecnologia - Todos os direitos reservados.p> footer> body> html> HTML O uso de tags HTML semânticas é uma prática essencial para melhorar o SEO técnico e a experiência do usuário. Elas ajudam os motores de busca a entender melhor o conteúdo de uma página, facilitam a indexação e aumentam a acessibilidade do site. Para garantir um site bem otimizado, é fundamental adotar boas práticas de marcação semântica no desenvolvimento web. Se você deseja melhorar o SEO do seu site, começar pela estrutura do HTML é um ótimo primeiro passo! Entre em contato com os ratos digitais da Pink and Brain! Somos ratos quando o assunto é semântica HTML e estamos prontos para transformar seu código em algo imbatível! O post Tags HTML semânticas e sua importância para o SEO técnico apareceu primeiro em Pink and Brain.



SEO para publishers: dicas de ouro para portais de notícias
César Canteiro — Thu, 06 Feb 2025 22:32:55 +0000
A competição entre portais de notícias é uma batalha árdua pela audiência orgânica, onde se destacar vai muito além do conteúdo publicado. Envolve uma abordagem técnica de fato meticulosa, com estratégias de SEO tradicionais e outras mais sofisticadas, junto com práticas que são a base essencial para alcançar posições privilegiadas nas páginas de resultados dos mecanismos de busca, em especial o Google.



Falando em Google, ele oferece também recursos exclusivos voltados para publishers, como o componente de “Top Stories e Notícias em Destaque” posicionados no topo das SERPs, a vertical de otícias chamada Google News alimentada basicamente pela plataforma Google Publish Center e o Google Discover, outra plataforma que enfatiza novidades e postagens frescas, segmentando inclusive com base nos interesses dos usuários.



Em minha experiência como sócio fundador da Pink and Brain, com mais de 15 anos dedicados ao SEO e colaborações com renomados portais de notícias, afirmo que a competição neste meio exige contemplar atenciosamente desde a infraestrutura até a escolha de diferentes tecnologias que serão necessárias para escalar o funcionamento de um portal, em maior ou menor escala de produção.



Sempre falo que as construções e atividades necessárias para dar base a um canal de notícias flexível e performático, incluem todas as premissas de acessibilidade, usabilidade, plataforma escolhida de CMS, Infra, devops, UX/UI (inclusive das telas internas do CMS), back-end necessário e front-end semântico. Ter tudo isso refinado já é algo necessário para entrar no jogo. Isso tudo sem pensar que dali para frente nasce uma produção editorial intensa, coberturas, contepudos quentes, frios, trilhas, colunas, vídeos, todos os dias, todas as semanas, meses, anos, eternamente enquanto existir.



Neste artigo vou explorar algumas das melhores práticas de SEO trabalhadas e citadas por mim, que fazem toda a diferança na contemplação do seu projeto, inclusive dicas para jornalistas e editores para maximizar o alcance e a autoridade das suas postagens e, consequentemente, do seu portal.



Infraestrutura performática, IP super dedicado e máquinas fortes e recheadas



Um portal com muitos acessos precisa ter uma base de infra escalável e parruda. Saliento alguns pontos:




Servidores de alto desempenho: investir em servidores robustos é crucial para lidar com o tráfego intenso e garantir métricas de performance e renderização mais rápidos. Servidores dedicados ou VPS (Servidores Privados Virtuais) são recomendados para maior controle e performance. Cito aqui a AWS da Amazon para controle mais esclusivo das aplicações e algumas hospedagens como a Hostinger que oferecem serviços premium escaláveis com ótimo NPS de chamados.



IP Dedicado: um IP dedicado proporciona mais segurança e credibilidade ao seu portal. Isso é importante para evitar vulnerabilidade de colocar seu portal em um IP compartilhado que possa te prejudicar na autoridade do seu dompinio, além de melhorar a sua credibilidade, reputação e velocidade.



Capacidade de escalabilidade: escolher uma infraestrutura que permita escalabilidade é essencial. Isso significa o portal deve ser capaz de lidar com picos de tráfego sem comprometer a velocidade ou a disponibilidade.



Armazenamento e backup: garantir um sistema de armazenamento seguro e backups regulares é fundamental para proteger o conteúdo valioso do seu portal contra perdas de dados.



Camadas de cache, otimização e compactação de arquivos: fundamental para acelerar a entrega de recursos chamados no front end para visitantes recorrentes.



CDN: a peça fundamental do baralho, já que simplificam a entrega das suas páginas para os usuários, uma vez que criam conexões mais próximas do seu inventário de páginas para os usuários da web.




Investir em uma infraestrutura performática é a base de tudo e não apenas melhora a experiência do usuário, mas também fortalece a posição do seu portal nos resultados de pesquisas, aumentando a autoridade de um domínio



Escolha da plataforma de gestão de conteúdos, o tal CMS



Não vou me aprofundar muito nesse tema, pois sou desenvolvedor de sistemas e acompanho a evolução das linguagens desde 2005, especialmente para aplicações web. Existem abordagens promissoras em termos de velocidade, com a abordagem do tema renderização client-side e server-side, usando tecnologias como React, Next.js, no entanto, para mim, enquanto também graduado em administração de empresas, o WordPress continua sendo a escolha ideal para 95% dos sites na internet, especialmente no nicho de publishers, para o qual foi originalmente concebido.



Mesmo sendo baseado em PHP, uma linguagem mais antiga e server-side, o WordPress é uma escolha vencedora. Tive a honra de contribuir como Head de Produto na criação do portal da CNN Brasil do zero usando WordPress, com gestão da infraestrutura pela Automattic, a empresa por trás que oferece serviço de gestão da infra e do DEVOPs (pesquise sobre o serviço VIP do WordPress no Google). Para se ter uma ideia, essa foi a curva de crescimento de um domínio novo contra gigantes com mais de 20 anos de autoridade):




Escalada em 14 meses de projeto. Praticamente do zero ao 3 milhões de cliques em anúncios orgânicos diáriamente




Grandes nomes como Exame, InfoMoney, Folha, Forbes e muitos outros portais também trabalham com o WordPress devido à sua natureza open-source e à sua capacidade de integrar uma ampla variedade de funcionalidades de forma flexível e eficiente. A filosofia de “menos é mais” se aplica aqui, pois por se tratar de uma aplicação em PHP server side, tende a ser mais onerosa do que as tecnologias em Javascript, porém, priorizando a simplicidade na entrega de conteúdo, é uma máquina.



Escolher o WordPress não é apenas uma decisão técnica, mas também estratégica. Ele oferece uma base sólida para enfrentar as exigências dinâmicas do mercado de notícias online, fortalecendo a escolha justamente pelas tecnologias baseadas em Javascript ainda não oferecem uma experiência tão parruda em especial para administradores das páginas, suportando produção editorial contínua e multimídia.



Tempo de carregamento e Google Core Web Vitals



O tempo de carregamento não é apenas uma questão de conveniência; é um fator crítico para o sucesso em SEO. O Google enfatiza a importância de uma experiência de usuário rápida e responsiva, refletida nas métricas de perfomance necessárias para atingir os resultados chave do tal Core Web Vitals (clique no termo para aprender mais sobre o que é o termo). Estas são métricas essenciais que avaliam a performance de carregamento, interatividade e estabilidade visual de uma página.



Renderização de uma página web



Um site lento afeta negativamente seus resultados para SEO. Estudos mostram que cada segundo adicional de carregamento pode aumentar significativamente a taxa de rejeição e diminuir radicalmente a conversão. 



Métricas do Google Core Web Vitals



As métricas incluem o Largest Contentful Paint (LCP), que mede o tempo que leva para o conteúdo principal da página ficar visível; o First Contentful Paint (FCP), que avalia a interatividade inicial da página; e o Cumulative Layout Shift (CLS), que quantifica a estabilidade visual da página. Cumprir com esses padrões não apenas melhora a experiência do usuário, mas também fortalece o desempenho para SEO.



Estratégias extras de otimização



Para reduzir o tempo de carregamento das páginas podemos e devemos implementar técnicas como compressão de imagens, minificação de arquivos CSS e JavaScript, uso de camadas de cache eficiente, CDN e obviamente a contrução de um back-end e front-end semântico responsivo e leve que priorizem a renderização rápida do conteúdo.



Monitoramento contínuo



Não se trata apenas de otimizar e acabou; é um processo contínuo. Utilize ferramentas como o Google PageSpeed Insights e o Google Search Console para monitorar e melhorar consistentemente o desempenho do site em relação às métricas do Core Web Vitals. Esteja sempre atento às atualizações e ajustes necessários para manter seu portal competitivo e bem classificado.




Análise das métricas do site do Bora Investir da B3 com o Lighthouse do Google, acessado no DEV tools (CTRL + SHIFT + I ou CMD + SHIFT + I)




Semântica HTML dos templates



Basicamente os templates chave que temos que refinar do ponto de vista semântico do HTML são:




Páginas da postagem



Categorias ou editorias



Tags ou tópicos



Páginas de Autores



Home(s)



Stories




Cada template tem a sua natureza e merece atenção do ponto de vista da formatação HTML e inclusão de dados estruturados. Chamamos essa arte de fatiar as telas para desenvolvimento.



Um template eficiente deve ser enxuto e bem estruturado. Utilize tags semânticas com o 
, , ,  (nunca use  no corpo do conteúdo pois ela já está presente no título principal da matéria), , etc… Em especial nas páginas de matérias, inclua um cabeçalho completo no topo com detalhes como autor (linkando sua página), data de postagem e data da última atualização. Tags também devem ser usadas estrategicamente para categorizar e etiquetar o conteúdo, melhorando a navegabilidade para SEO e caindo num tema que já vou falar.



Dica extra:



Entenda o Google EEAT e sua importância para os portais de notícias



O conceito de EEAT (Expertise, Authoritativeness, and Trustworthiness) foi introduzido pelo Google em suas Diretrizes de Avaliação de Qualidade de Pesquisa em 2018. Ele não é uma atualização de algoritmo específica, mas uma diretriz usada pelos avaliadores de qualidade do Google para avaliar a credibilidade e a qualidade do conteúdo na web. EEAT se tornou fundamental para SEO, pois ajuda a determinar a relevância e a confiabilidade de uma página, impactando diretamente sua classificação nos resultados de busca.



Google EEAT (Expertise, Authoritativeness, and Trustworthiness) são traços de autoridade e credibilidade oriundas de técnicas de arquitetura da informação. Adotar seus conceitos melhora a qualidade do conteúdo, aumenta a confiança dos usuários, impacta diretamente as classificações, reduz riscos de penalizações e apoia estratégias de link building. Para saber mais sobre como o EEAT pode beneficiar o seu site e aumentar sua visibilidade, confira nosso artigo completo sobre o assunto aqui.



Estruturação de Dados



A estruturação de dados é um dos pilares fundamentais para uma estratégia de SEO eficaz, especialmente para portais de notícias que desejam se destacar em posições nobres ofertadas pelo Google em suas SERPs, seja ela a clássica, Google News, Discover e Apis. A famosa biblioteca do schema.org oferece uma gama de vocabulários que permitem adicionar informações estruturadas às páginas da web, fornecendo aos motores de busca dados mais precisos e detalhados sobre o conteúdo.



Utilizar as marcações permite que as informações relevantes sejam destacadas diretamente no cabeçalho das páginas, prática que fornece aos bots ou robôs de busca, como os crawlers do Google, um resumo antecipado do conteúdo antes de eles processarem o corpo completo da página. Isso pode incluir detalhes sobre a atualização do conteúdo, a autoria, a data de publicação, as tags associadas e mais informações que a priore precisariam ser lidas no corpo da página, onde precisaria carregar todo o conteúdo pesado. Por isso, essa estruturação afeta diretamente o “crawl budget”, que se refere ao orçamento do número de páginas que o Googlebot rastreia e indexa em um determinado período para cada site.



Está pronto para ver o NewsArticle mais “parrudão” e forte para SEO já visto? Abaixo mostro um TOP, mas as ideias e afirmações sobre o assunto vou deixar para uma consultoria posterior beleza?



JSON 
JSON



Otimizar o uso desse orçamento é crucial, especialmente para sites grandes com muitas páginas. Quando as informações são bem estruturadas, os bots podem processar as páginas mais rapidamente e eficientemente, aumentando a chance de que mais conteúdo seja indexado de forma adequada.



Tipos comuns de estruturação de dados para portais de notícias



Aqui estão alguns tipos comuns de dados estruturados que podem ser aplicados a um portal de notícias:




Article: utilizado para artigos de notícias, blogs e reportagens. Inclui informações como título, autor, data de publicação, imagem, e seção do artigo.



NewsArticle: uma subcategoria de Article, específica para notícias. Adiciona atributos como data de modificação, editor, e seção.



VideoObject: para vídeos incorporados nas páginas, incluindo detalhes como nome, descrição, duração, e URL.



ImageObject: para imagens, com atributos como URL, legenda, e descrição.



BreadcrumbList: ajuda a criar breadcrumbs, que são caminhos de navegação que aparecem nos resultados de busca, melhorando a usabilidade e a navegação do site.



ItemList: em templates de listagem, mostrando a lista de matérias disponibilidadas naquela página;



Organization ou NewsMediaOrganization: mostrando a enteidade empresa que existe e assina os conteúdos das páginas.




Páginas de tags ou tópicos e seu valor inestimável



As páginas de tags são portas de entrada importantes para aquisição orgânica a longo prazo. Embora possam não competir diretamente com matérias quentes, são cruciais para fortalecer a presença de um portal em termos de topic clusters, conectando diversas áreas de interesse.



Reparem que grandes portais, para milhares de temas, aparecem com resultados dobrados nas pesquisas dos tópicos específicos onde há uma página quente e outra guarda-chuva do tema, no caso a matéria e a página de tag.



Dá uma olhada o valor para a marca que elas proporcionam para a marca (no caso o G1 com o famoso double shot):




Exemplo de páginas de tópicos ranqueando nas primeiras posições, dobrando a aparição da marca na primeira dobra da SERP




Boas práticas em imagens



A atenção às imagens é essencial e existem alguns tópicos chave:




Tamanho: se o container onde ela vai aparecer tem 1000 pixels, para que subir uma imagem com 2000? suba imagens com tamanhos pertinentes com o espaço maior que serão exibidas. O restante, os crops, a plataforma precisa fazer automaticamente.



Formato: usem 99,9% das vezes Webp



Nomenclatura: amigável e condizente com a matéria postada. Ex: aviao-de-guerra-russia.webp



Peso: o formato Webp é muito mais leve que qualquer outro formato principalmente para fotos, mas ferraemntas como o Photopea permite adequar o peso com base na % de otimização. Usem sempre entre 75% e 85% que vai ficar excelente e com peso otimizado.



Atributos “Alt” e “Title”: meta informações cadastradas para alimentar os atributos da tag  responsável por exibir a imagem no front-end. Crie textos condizente com a informação que a imagem transmite einclua termos chave, semelhantes ao seu  e .</li>



<li><strong>Legenda:</strong> é muito comum e necessário usar legendas em portas de notícias, referênciando a origem e incluindo informações extras que são valiosas para SEO, principalmente das imagens destacadas, aquelas que ficam ao topo da matéria.</li>
</ul>



<p>Além de tudo isso,<strong> uma dica de ouro é evitar usar mídias herdadas de postagens anteriores</strong>, mesmo que for usar a mesma imagem, baixe e salve novamente com nomenclatura amigável para aquela pauta que você está criando. Opte também por imagens exclusivas quando possível.</p>



<h2 class="wp-block-heading">Linkagem interna estratégica</h2>



<p>Finalmente, o tema essencial ao publicar um conteúdo: <strong>fomentar a linkagem interna</strong>. Crie uma rede de links internos que conecte matérias relacionadas, tags (páginas de tópicos), categorias, landing pages, a própria home, enfim, aumentando a autoridade de páginas específicas e melhorando a navegabilidade do usuário.</p>



<p>Uma dica de ouro extra nesse quesito é <strong>utilizar plugins de linkagem automática como o <a href="https://br.wordpress.org/plugins/internal-links/">Internal Link Juicer</a></strong>, que fornece uma área de cadastro os termos condizentes com aquela pauta, e toda vez que esse termo é citado em alguma outra pauta, o link é feito automaticamente.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-33 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><figcaption class="wp-element-caption">Demonstração do uso do plugin, incluindo termos relevantes que serão usados para linkagem posterior automaticamente</figcaption></figure>
</figure>



<hr class="wp-block-separator has-alpha-channel-opacity">



<p>Implementando essas estratégias, qualquer portal de notícias terá um pouco da “malícia” que retratei nesse post. <strong>Invista tempo e recursos para criar um ambiente performático, flexível e obviamente um conteúdo valioso</strong> que será evidenciado e gerará engajamento.</p>



<p>Claro que existem muitas outras centenas de nuances e técnicas avançadas que podem ser exploradas para otimizar ainda mais um portal e isso é papo para uma consultoria da minha pessoa e do meu time com o seu produto. Esta é apenas uma base sólida de conhecimento para você começar a entender a importância de desenvolver produtos sustentados pelas premissas para SEO. </p>



<p>Fique atento ao <strong>laboratório de marketing digital dos ratos da Pink and Brain</strong>, especialmente às minhas postagens, pois <strong>estarei sempre compartilhando dicas de ouro para publishers e SEO como um todo</strong>.</p>



<p>Aqui, você pode encontrar parceiros ideais para o <strong>desenvolvimento do seu portal ou blog com foco em aquisição orgânica</strong>. Não é à toa que todos que já se relacionaram conosco nos dão toda a credibilidade em especial nesse mercado que atuamos por tantos anos. </p>



<p>Com as orientações certas, você estará no caminho para <strong>alcançar resultados surpreendentes de aquisição</strong> e terá sucesso online.</p>
<p>O post <a href="https://www.pinkandbrain.com/seo-para-publishers-dicas-de-ouro-para-portais-de-noticias/">SEO para publishers: dicas de ouro para portais de notícias</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p>

</article>
<article>
<h1>Subdomínio ou diretório: qual a melhor estratégia para SEO?</h1>
<p>Marcelino Junior — Mon, 20 Jan 2025 20:34:51 +0000</p>

<p>Quando se trata de estruturar um site, a escolha entre <strong>subdomínios</strong> e <strong>subdiretórios</strong> pode ter impacto direto no <strong>SEO (Search Engine Optimization)</strong>. Ambas as opções têm seus prós e contras, e a escolha ideal depende dos objetivos do site e da estratégia de conteúdo. Vamos explorar as diferenças principais.</p>



<h2 class="wp-block-heading">O que é um subdomínio?</h2>



<p><strong>Um <a href="https://www.pinkandbrain.com/elementos/subdominio/" title="subdomínio">subdomínio</a> é uma extensão do domínio principal que funciona como uma entidade separada</strong>. Ele é configurado antes do domínio principal, como no exemplo:<br><strong>subdominio.exemplo.com</strong></p>



<p>É bastante comum empresas que desejam oferecer serviços ou produtos sob uma marca própria, sem associá-los diretamente ao seu domínio principal. Quando uma empresa opta por criar um <strong>subdomínio</strong>, ela está essencialmente criando uma identidade separada para o serviço ou produto, mas ainda dentro da estrutura do seu domínio principal.</p>



<p>Os subdomínios são frequentemente usados para segmentar áreas específicas de um site.</p>



<h3 class="wp-block-heading">Vantagens de subdomínios</h3>



<ul class="wp-block-list">
<li><strong>Separação de conteúdo:</strong> Ideal para projetos distintos, como um <a href="https://www.pinkandbrain.com/elementos/blog/" title="blog">blog</a>, fórum ou loja que não precisam estar diretamente conectados ao site principal.</li>



<li><strong>Flexibilidade:</strong> Permite configurações independentes, como diferentes sistemas de gerenciamento de conteúdo (<a href="https://www.pinkandbrain.com/elementos/cms-content-management-system/" title="CMS">CMS</a>).</li>



<li><strong>Relevância regional ou de idioma:</strong> Útil para sites que atendem a diferentes países ou idiomas (ex.: <strong>br.exemplo.com</strong> e <strong>us.exemplo.com</strong>).</li>
</ul>



<h3 class="wp-block-heading">Desvantagens de subdomínios</h3>



<ul class="wp-block-list">
<li><strong>Complexidade no SEO:</strong> Os motores de busca tratam subdomínios como entidades separadas, o que pode dificultar o ranqueamento, já que a <a href="https://www.pinkandbrain.com/elementos/autoridade-do-dominio-da/" title="autoridade do domínio">autoridade do domínio</a> principal não é transferida diretamente.</li>



<li><strong>Manutenção:</strong> Pode ser mais trabalhoso gerenciar vários subdomínios.</li>
</ul>



<h2 class="wp-block-heading">O que é um subdiretório?</h2>



<p>Um <a href="https://www.pinkandbrain.com/elementos/subdiretorio/" title="subdiretório">subdiretório</a> é uma subdivisão dentro do mesmo domínio principal, como no exemplo:<br><strong>exemplo.com/subdiretorio</strong></p>



<p>Subdiretórios são frequentemente usados para organizar o conteúdo dentro de um mesmo site, como blogs, categorias ou páginas específicas.</p>



<h3 class="wp-block-heading">Vantagens de subdiretórios</h3>



<ul class="wp-block-list">
<li><strong>Consolidação de autoridade:</strong> Todo o conteúdo dentro de um subdiretório contribui diretamente para a autoridade do domínio principal.</li>



<li><strong>Mais simples para SEO:</strong> Motores de busca tendem a considerar o conteúdo do subdiretório como parte do domínio principal, facilitando o ranqueamento.</li>



<li><strong>Gestão centralizada:</strong> Mais fácil de gerenciar, já que todo o conteúdo está em uma única estrutura de site.</li>
</ul>



<h3 class="wp-block-heading">Desvantagens de subdiretórios</h3>



<ul class="wp-block-list">
<li><strong>Menor separação:</strong> Não é ideal para projetos que precisam de identidade ou gestão separadas.</li>



<li><strong>Risco de confusão:</strong> Se mal organizado, o uso excessivo de subdiretórios pode prejudicar a navegação do usuário.</li>
</ul>



<h2 class="wp-block-heading">Impacto no SEO</h2>



<h3 class="wp-block-heading">Autoridade de domínio</h3>



<ul class="wp-block-list">
<li>Subdomínios não compartilham automaticamente a autoridade do domínio principal.</li>



<li>Subdiretórios herdam a autoridade do domínio principal, o que pode beneficiar o ranqueamento.</li>
</ul>



<h3 class="wp-block-heading">Indexação</h3>



<ul class="wp-block-list">
<li>Subdomínios podem exigir esforços adicionais para <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a> adequada, pois os motores de busca os tratam como sites separados.</li>



<li>Subdiretórios são indexados como parte do domínio principal, facilitando a gestão de SEO.</li>
</ul>



<h3 class="wp-block-heading">Estratégia de conteúdo</h3>



<ul class="wp-block-list">
<li>Subdomínios são melhores para conteúdo que exige uma abordagem completamente distinta (ex.: blog separado da loja).</li>



<li>Subdiretórios funcionam bem para expandir o conteúdo relacionado ao site principal.</li>
</ul>



<h3 class="wp-block-heading">Relatórios e análises</h3>



<ul class="wp-block-list">
<li>Subdomínios podem complicar a <a href="https://www.pinkandbrain.com/visualizacao-de-dados-e-analise-de-dados-existe-diferenca/" title="análise de dados">análise de dados</a> no <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a> Analytics, já que requerem configurações específicas para rastrear o tráfego.</li>



<li>Subdiretórios são mais fáceis de rastrear dentro de uma única propriedade do Google Analytics.</li>
</ul>



<h2 class="wp-block-heading">Comparação entre Subdomínios e Subdiretórios para SEO</h2>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th><strong>Critério</strong></th><th><strong>Subdomínio</strong></th><th><strong>Subdiretório</strong></th></tr></thead><tbody><tr><td><strong>Definição</strong></td><td>Uma extensão separada do domínio principal (ex.: blog.exemplo.com).</td><td>Uma pasta dentro do domínio principal (ex.: exemplo.com/blog).</td></tr><tr><td><strong>Tratamento pelo Google</strong></td><td>Considerado como uma entidade separada.</td><td>Parte integrante do domínio principal.</td></tr><tr><td><strong>Autoridade de domínio</strong></td><td>Autoridade não compartilhada diretamente com o domínio principal.</td><td>Compartilha a autoridade do domínio principal.</td></tr><tr><td><strong>Indexação</strong></td><td>Pode exigir mais esforço para indexação.</td><td>Geralmente indexado junto ao domínio principal.</td></tr><tr><td><strong>Facilidade de gerenciamento</strong></td><td>Permite configurações independentes, mas é mais complexo de gerenciar.</td><td>Mais fácil de gerenciar em uma estrutura unificada.</td></tr><tr><td><strong>Indicado para</strong></td><td>Projetos ou serviços distintos, como áreas para públicos diferentes.</td><td>Expansão de conteúdo relacionado ao tema principal do site.</td></tr><tr><td><strong>Impacto no SEO</strong></td><td>Pode dividir a autoridade e diluir os esforços de SEO.</td><td>Consolida a autoridade e potencializa o ranqueamento.</td></tr><tr><td><strong>Flexibilidade</strong></td><td>Maior flexibilidade para usar diferentes tecnologias ou CMS.</td><td>Limitado à estrutura do domínio principal.</td></tr><tr><td><strong>Análise de dados</strong></td><td>Requer configurações específicas para rastrear tráfego em ferramentas como Google Analytics.</td><td>Dados consolidados em uma única propriedade de análise.</td></tr><tr><td><strong>Exemplo prático</strong></td><td>Sites multilíngues (ex.: en.exemplo.com e br.exemplo.com).</td><td>Categorias de conteúdo, como blogs ou lojas online.</td></tr></tbody></table></figure>



<p>Essa tabela ajuda a identificar qual opção é mais adequada dependendo das necessidades do site e da estratégia de SEO.</p>



<h2 class="wp-block-heading">Quando usar subdomínios ou subdiretórios?</h2>



<ul class="wp-block-list">
<li><strong>Use subdomínios quando:</strong>
<ul class="wp-block-list">
<li>Você precisa separar completamente o conteúdo ou serviço (ex.: blog separado da loja).</li>



<li>O site atende diferentes públicos, idiomas ou regiões.</li>



<li>É necessário usar tecnologias ou CMS diferentes para cada seção.</li>
</ul>
</li>



<li><strong>Use subdiretórios quando:</strong>
<ul class="wp-block-list">
<li>Você quer consolidar a autoridade de domínio.</li>



<li>O conteúdo está diretamente relacionado ao tema principal do site.</li>



<li>A gestão centralizada do site é uma prioridade.</li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading">O que o Google fala sobre subdomínios e subdiretórios?</h2>



<p>Não dá para afirmar que subdiretórios são sempre melhores para SEO ou que subdomínios são prejudiciais. A questão é mais complexa. É importante compreender as razões por trás das recomendações e como elas se alinham às diretrizes do Google.</p>



<p>Embora o Google diga que tanto subdomínios quanto subdiretórios são opções válidas, isso não significa que ambos ofereçam os mesmos benefícios.</p>



<p>Por exemplo, hospedar o blog do seu site em um subdomínio não resultará em penalizações. No entanto, se o blog estiver diretamente no domínio principal, ele pode contribuir mais efetivamente para melhorar o ranqueamento e atrair mais tráfego para o site como um todo.</p>



<p>Quando o conteúdo e os links são distribuídos entre um subdomínio e o domínio principal, a autoridade de cada um deles tende a ser diluída. Já concentrar tudo no domínio principal, utilizando subdiretórios, pode fortalecer a autoridade geral do site.</p>



<p>Por isso, migrar subdomínios relevantes para subdiretórios do domínio principal muitas vezes resulta em um aumento na visibilidade orgânica e no tráfego, graças à consolidação de esforços em uma única estrutura.</p>



<p>Um exemplo interessante é o caso compartilhado por Andy Chadwick, que mostrou o aumento significativo de crescimento após migrar um blog, anteriormente hospedado em um subdomínio, para o domínio principal, configurando-o como um subdiretório.</p>


<blockquote class="twitter-tweet">
<p lang="en" dir="ltr">I shared this on Twitter about 4 weeks ago, just wanted to re-share as it's still going up… <a href="https://t.co/KVKbdmnLfN">pic.twitter.com/KVKbdmnLfN</a></p>
<p>— Andy Chadwick (@digitalquokka) <a href="https://twitter.com/digitalquokka/status/1321875238594949127?ref_src=twsrc%5Etfw">October 29, 2020</a></p></blockquote>
<p> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Compartilhei isso no Twitter há cerca de 4 semanas, só queria compartilhar novamente, pois ainda está crescendo…</p>
<cite>Andy Chadwick</cite></blockquote>



<p>Há várias histórias de sucesso impressionantes que mostram ganhos consideráveis após a migração de conteúdo de subdomínios para subdiretórios.</p>



<p><strong>A escolha entre subdomínios e subdiretórios depende da estratégia de SEO e das necessidades do seu site</strong>. Essa é uma questão que varia conforme o caso. É fundamental compreender os diferentes cenários e como cada um pode influenciar o desempenho orgânico do seu site.</p>



<p> Para projetos menores ou integrados, subdiretórios geralmente são a melhor opção. Já para projetos maiores ou que exigem independência, subdomínios podem ser mais apropriados. Avalie os objetivos do seu site e a experiência que deseja oferecer aos usuários antes de tomar uma decisão.</p>



<p>Assim como os astutos ratos Pinky e o Cérebro, que estão sempre planejando dominar o mundo, nós da <strong><a href="https://www.pinkandbrain.com/">Pink and Brain</a> </strong>somos especialistas em estratégias de SEO que vão levar seu site ao topo!</p>



<p>Se você está em dúvida entre usar subdomínios ou subdiretórios para otimizar seu site, estamos aqui para ajudá-lo a escolher a melhor estratégia! Sabemos como maximizar sua visibilidade online e garantir resultados duradouros. <strong>Entre em contato agora e descubra como podemos impulsionar seu SEO!</strong></p>
<p>O post <a href="https://www.pinkandbrain.com/subdominio-ou-diretorio-qual-a-melhor-estrategia-para-seo/">Subdomínio ou diretório: qual a melhor estratégia para SEO?</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p>

</article>
<article>
<h1>Efeito Drop Caps em CSS: primeira letra gigante em parágrafos</h1>
<p>César Canteiro — Fri, 17 Jan 2025 11:55:27 +0000</p>
<p class="has-drop-cap"><strong>Drop caps</strong> são elementos de design<strong> amplamente usados em mídia impressa</strong> para destacar a primeira letra de um parágrafo ou seção, tornando o texto mais atraente visualmente. Não é comum vermos nos artigos e conteúdos pela web, mas quem usa de forma minimalista, se diferencia gerando valor à composição do layout.</p>



<figure class="wp-block-gallery has-nested-images columns-2 wp-block-gallery-34 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"></figure>



<figure class="wp-block-image size-large"></figure>



<figure class="wp-block-image size-large"></figure>
<figcaption class="blocks-gallery-caption wp-element-caption">Efeito gera harmonia em textos densos</figcaption></figure>



<p>Com CSS, podemos replicar esse efeito de maneira simples e eficiente utilizando o pseudo-elemento <code>::first-letter</code> e a propriedade experimental <code>initial-letter</code>.</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code='article p:first-child::first-letter {
  color: hotpink;
  padding: 0 0.3rem;
  margin: 0 0.3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
}' style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D7BA7D">article</span><span style="color: #D4D4D4"> </span><span style="color: #D7BA7D">p:first-child::first-letter</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">color</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">hotpink</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">padding</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0.3rem</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">margin</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0.3rem</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">border</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">2px</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">solid</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">border-radius</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">8px</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">font-family</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">"IBM Plex Mono"</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">monospace</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div>



<p>Com isso, a primeira letra ganha destaque, sendo estilizada de forma independente do restante do texto.</p>



<h2 class="wp-block-heading">Como customizar o tamanho da primeira letra pegando várias linhas por CSS?</h2>



<p>Se você deseja criar um drop cap maior, precisa ajustar o tamanho da fonte e o espaçamento. No entanto, apenas aumentar o <code>font-size</code> pode causar problemas de alinhamento. Aqui está uma abordagem usando <code>float</code>:</p>



<p class="has-drop-cap">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code="drop__caps_p:first-child::first-letter {
  color: black;
  padding: 0 0.3rem;
  margin: 0 0.3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-size: 5rem;
  float: left;
  line-height: 1;
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D4D4D4">drop__caps_p</span><span style="color: #D7BA7D">:first-child::first-letter</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">color</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">black</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">padding</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0.3rem</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">margin</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0.3rem</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">0</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">border</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">2px</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">solid</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">border-radius</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">8px</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">font-size</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">5rem</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">float</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">left</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">line-height</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">1</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div>



<p>Essa solução garante que a letra fique alinhada corretamente com o parágrafo.</p>



<h2 class="wp-block-heading">Efeito Drop Caps: Como colocar a primeira letra maiúscula no WordPress?</h2>



<p>É bem fácil.</p>



<ol class="wp-block-list">
<li>Primeiro clique no parágrafo que você deseja aplicar o efeito</li>



<li>Clique nas 3 bolinhas ao lado de “Tipografia” no bloc de edição no menu a direita do painel;</li>



<li>Selecione drop caps em inglês ou letra capitular em português</li>



<li>Ative o efeito no “toogle”</li>
</ol>



<p>Voalá! está pronto e fica muito bacana.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-35 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><figure><figcaption>Primeira letra maiúscula no Wordpress</figcaption></figure><figcaption class="wp-element-caption">Primeira letra maiúscula no WordPress</figcaption></figure>
</figure>



<h2 class="wp-block-heading">Usando initial-letter</h2>



<p>Uma alternativa mais moderna é a propriedade <code>initial-letter</code>, que ajusta automaticamente o tamanho da letra e o número de linhas que ela ocupa, simplificando o processo:</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code="drop__caps_p_2:first-child::first-letter {
  color: hotpink;
  padding-right: 8px;
  -webkit-initial-letter: 3;
  initial-letter: 3;
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #D4D4D4">drop__caps_p_2</span><span style="color: #D7BA7D">:first-child::first-letter</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">color</span><span style="color: #D4D4D4">: </span><span style="color: #CE9178">hotpink</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">padding-right</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">8px</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">-webkit-initial-letter</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">3</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #9CDCFE">initial-letter</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">3</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div>



<h2 class="wp-block-heading">Compatibilidade com navegadores / browsers</h2>



<p>O suporte para <code>::first-letter</code> é universal entre os navegadores modernos.A propriedade <code>initial-letter</code> ainda está em fase experimental, sendo suportada apenas em navegadores específicos. Se optar por usá-la, recomendamos envolvê-la em um bloco <code>@supports</code> para evitar problemas em navegadores que não a suportam.</p>



<div class="wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers" data-code-block-pro-font-family="Code-Pro-Hack" style="font-size:.875rem;font-family:Code-Pro-Hack,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#D4D4D4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)"><span style="display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2b2b2b;color:#c7c7c7">CSS</span><span role="button" tabindex="0" data-code="@supports (initial-letter: 3) {
  article p:first-child::first-letter {
    initial-letter: 3;
  }
}" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path class="with-check" stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path><path class="without-check" stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></span><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #C586C0">@supports</span><span style="color: #D4D4D4"> (</span><span style="color: #9CDCFE">initial-letter</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">3</span><span style="color: #D4D4D4">) {</span></span>
<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #D7BA7D">article</span><span style="color: #D4D4D4"> </span><span style="color: #D7BA7D">p:first-child::first-letter</span><span style="color: #D4D4D4"> {</span></span>
<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #9CDCFE">initial-letter</span><span style="color: #D4D4D4">: </span><span style="color: #B5CEA8">3</span><span style="color: #D4D4D4">;</span></span>
<span class="line"><span style="color: #D4D4D4">  }</span></span>
<span class="line"><span style="color: #D4D4D4">}</span></span></code></pre><span style="display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#1E1E1E;color:#c7c7c7;font-size:12px;line-height:1;position:relative">CSS</span></div>



<h2 class="wp-block-heading">Quando usar Drop Caps?</h2>



<p>Drop caps são ideais para:</p>



<ul class="wp-block-list">
<li>Livros ou publicações digitais.</li>



<li>Postagens de <a href="https://www.pinkandbrain.com/elementos/blog/" title="blog">blog</a> com foco em design e narrativa.</li>



<li>Elementos visuais em páginas de destaque ou introduções de capítulos.</li>



<li>Diferenciar seu portal de notícias frente ao “padrão” web que acaba não utilizando.</li>
</ul>



<p>Com essas técnicas, você pode incorporar o charme clássico dos drop caps ao seu design moderno de maneira elegante e funcional!<br><br>Gostou da dica? <strong>Aqui na Pink and Brain criamos aplicações modernas</strong>, diferenciadas, consistentes e focadas em SEO. Venha tomar um café digital e conversar sobvre negócios.</p>
<p>O post <a href="https://www.pinkandbrain.com/efeito-drop-caps-em-css-primeira-letra-gigante-em-paragrafos/">Efeito Drop Caps em CSS: primeira letra gigante em parágrafos</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p>

</article>
<article>
<h1>URLs amigáveis não precisam ser lowercase para o Google</h1>
<p>César Canteiro — Fri, 10 Jan 2025 20:36:09 +0000</p>

<p>Nos últimos dias, John Mueller, representante do <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a>, esclareceu que <strong>as URLs podem ser escritas tanto em letras maiúsculas quanto minúsculas</strong>, e isso não afeta o ranqueamento nos mecanismos de busca. Porém, ele ressaltou que o mais importante é garantir consistência em toda a estrutura do site.</p>



<h2 class="wp-block-heading">O que diz a documentação do Google?</h2>



<p>De acordo com o Google Search Central, se o servidor trata letras maiúsculas e minúsculas como equivalentes, <strong>é recomendado unificar todas as URLs em um único formato</strong>. Essa uniformidade ajuda o Google a compreender as URLs e faz com que os sites evitem problemas de <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a> ou duplicidade.</p>



<h2 class="wp-block-heading">Consistência é a chave</h2>



<p>Em uma postagem no Bluesky, John reforçou:</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>URLs não precisam ser minúsculas, mas devem ser consistentes (usar minúsculas pode ser uma maneira fácil de fazer isso). Além disso, verifique referências internas, como links ou <a href="https://www.pinkandbrain.com/elementos/dados-estruturados/" title="dados estruturados">dados estruturados</a>, e mantenha a consistência.</p>
<cite>John Mueller,</cite></blockquote>



<p>Isso significa que, além das URLs, elementos como <strong>links internos, sitemaps e dados estruturados</strong> também devem refletir o mesmo padrão, seja em letras minúsculas ou maiúsculas.</p>



<h2 class="wp-block-heading">Por que isso importa para SEO?</h2>



<p>A consistência evita confusões para os motores de busca e melhora a experiência do usuário. Por exemplo:</p>



<ul class="wp-block-list">
<li>URLs inconsistentes podem causar problemas de rastreamento ou indexação.</li>



<li>Redirecionamentos desnecessários podem ser gerados, impactando a velocidade da página.</li>
</ul>



<p>Escolher um padrão único de formatação (preferencialmente em letras minúsculas, por ser mais comum) é uma prática recomendada para manter o site bem estruturado.</p>



<p>Somos ratos quando o assunto é SEO.</p>
<p>O post <a href="https://www.pinkandbrain.com/urls-amigaveis-nao-precisam-ser-lowercase-para-o-google/">URLs amigáveis não precisam ser lowercase para o Google</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>.</p>

</article>
</main></body></html>

Categoria Desenvolvimento web - Boost Digital | Pink and Brain

Como resolver problemas de LCP no H1 ou em elementos textuais?

O papel das fontes no LCP

Estratégias de otimização de fontes

Critical CSS e renderização antecipada

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

Exemplo de Critical CSS inline + CSS assíncrono

Dica avançada: fallback de fontes inteligentes

Checklist prático para evitar LCP no H1

Perguntas frequentes sobre LCP em textos

Otimização de Crawl Budget: como filtrar parâmetros baseados em filtros? guia robots.txt

Por que gerenciar o rastreamento de URLs com filtros?

Como impedir o rastreamento de URLs com parâmetros de filtros

Disallow pelo robots.txt

Uso estratégico da tag rel=”canonical”

Uso estratégico de rel=”nofollow” em links

Retorne o status 404 para filtros inválidos

Use fragmentos de URL (#)

Insights finais

HTTP Headers o que são? O que o analista de SEO deve saber?

O que são HTTP headers?

Principais categorias de HTTP Headers

Comparação entre os principais HTTP Headers

Exemplos de uso na prática

Content-Type

Authorization

Cache-Control

Content-Security-Policy

Segurança com HTTP Headers

Otimização de Performance com HTTP Headers

Compressão de Conteúdo

Redirecionamento de URLs

Evolução dos HTTP Headers com HTTP/2 e HTTP/3

HTPP Header e SEO: o que um analista precisa saber?

Use e abuse do Screaming Frog

SEO e UX: como criar sites que ranqueiam, engajam e convertem?

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

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

Elementos-chave para alinhar SEO e UX

Velocidade de carregamento

Mobile-first design

Estrutura de navegação simples e intuitiva

Core Web Vitals

Estrutura de links internos

Design focado em conversão

Como medir o sucesso de SEO e UX?

Erros comuns ao integrar SEO e UX

Vou mudar o layout do meu site: como não prejudicar o SEO?

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

Impacto por simples mudança na hierarquia dos elementos

Uso de tags semânticas

Velocidade de carregamento da página

Impactos indiretos de um redesign

Responsividade e Mobile-First Indexing

Experiência do Usuário (UX)

Core Web Vitals

Redirecionamentos e URLs

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

Melhorias na navegação interna

Conteúdo mais acessível

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

Utilizando o Console do navegador: dicas para analistas de SEO

O que é e como funciona o console do navegador?

Abrindo o Console do navegador

Script para coletar as headings

Testando o script

Como o ChatGPT pode te ajudar a ter ideias de usar o Console?

Código para pegar as imagens sem ALT e fazer uma lista no console

Insights finais

Componente de cookies com consentimento para o GA4

Importância do Consent Mode para SEO e LGPD

Ganhos de performance e personalização

Personalização infinita (e o além)

Exemplo de implementação de um componente de cookies

Configuração do GA4 e dataLayer

JavaScript para gerenciamento de cookies

Tag details no HTML: crie blocos expansíveis sem JavaScript

O que é e como funciona a tag ?

Por que usar para formatar seu HTML?

Exemplo de FAQ com (semântica rica com schema também)

O que é e como funciona a tag
?

Por que usar
para formatar seu HTML?

Exemplo de FAQ com
(semântica rica com schema também)