Conteúdos sobre Desenvolvimento Web | 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.

Como contratar SEO: time interno, agência ou consultoria?

Pink and Brain — Wed, 04 Feb 2026 13:35:58 +0000

Mesmo oferecendo com a Pink and Brain um serviço de consultoria fora da curva, com muito know how e experiência sobre todas as esferas que norteam as inicaitivas de SEO, sou sincero ao falar que não existe uma fórmula única para contratar SEO. Cada tipo de contratação — interna, consultoria ou agência — tem suas vantagens e desafios, e a melhor escolha depende das necessidades e do estágio da sua empresa.

De forma geral:

SEO interno é mais indicado para empresas grandes, pois demanda investimento em equipe e ferramentas.
Agências são ideais para pequenas e médias empresas, oferecendo suporte para escalar resultados sem precisar formar um time interno.
Consultorias são versáteis, servindo empresas de qualquer tamanho, fornecendo orientações estratégicas. Elas são especialmente úteis para demandas específicas ou apoio a equipes já existentes.

A escolha correta vai depender do seu orçamento, estrutura interna, e objetivos de longo prazo, mas também de algo super substancial: quem vai pensar o seu projeto ~ digo a pessoa. Se não tiver comprometimento para mergulhar nas profundezas dos detalhes do seu negócio, certamente será tempo perdido.

Nós aqui na Pink and Brain não nos consideramos “Agências”, pois elas possuem muitos clientes, poucos colaboradores, e não conseguem dedicar recursos sêniores para projetos menores ou mesmo os maiores. Isso implica em baixo valor agregado aos projetos e mais servem como “receita recorrente” e não como “custo de oportunidades de upsell”. Ou seja, para ambas as partes não há verdadeira evolução.

Eu e o Mago, aka Marcelino, meu sócio, somos as mentes por trás da Pink and Brain e cada projeto que nos envolvemos é o nosso tempo e nossos “cérebros” em todas as tratativas, plugando outras pessoas sempre que necessário e para atividades diversas. Tanto que não chamamos de “serviços” e sim de “fórmulas”.

Mas, falando um pouco mais sobre as diferenças de cada estilo de contratatação de serviços de SEO, podemos destacar:

Prós e contras entre SEO Interno, Agência e Consultoria

Critério	SEO Interno	Agência	Consultoria (estamos aqui)
Custo	Alto (salários, benefícios, ferramentas)	Médio (contrato fixo com a agência)	Médio (contrato fixo com consultoria)
Estilo de trabalho	Equipe interna gerencia todas as etapas	Agência gerencia tudo	Consultoria orienta, execução interna
Tempo dedicado	100% focado no SEO	Horas mensais definidas em contrato	Horas mensais com foco estratégico
Prós	Controle total, alinhamento com outras áreas	Escalabilidade, custo menor comparado ao time interno, time multidisciplinar (quando bem utilizado)	Conhecimento específico ou multidisciplinar, capacitação da equipe do cliente, mais proximidade com os colaboradores, custo extramemente menor
Contras	Alto custo, montagem de time multidisciplinar complexa, risco de contratatação errônea, tempo é dinheiro	Menor controle sobre quem executa, possuem “n” clientes simultâneos, empregam profissionais muito junior, tempode devolutiva de ações extremamente alto, falta de compromisso com prazos, execução de tarefas de SEO pode depender de equipe interna	Execução de tarefas de SEO pode depender de equipe interna, risco de outra empresa do mesmo setor querer contratar a consultoria

Como funciona gerir um time de SEO Interno?

O SEO interno é quando sua empresa monta uma equipe própria para cuidar das estratégias de otimização. Esse modelo é geralmente utilizado por empresas maiores, que possuem um volume de trabalho capaz de justificar os custos de contratar, treinar e manter uma equipe dedicada.

Lembrando que SEO envolve diferentes didáticas como:

Infraestrutura (sem hífen)
Backend
Frontend
Marketing de Conteúdo
Marketing de PR (ou Imprensa)
Business Intelligence
Web Analytics
CRO (Otimização de Conversão)
QA (Garantia de Qualidade)
Design UX/UI

Com essa mentalidade, imagine o custo de manter um time multi-disciplinar com essa bagagem culutural e intelectual.

Custos Envolvidos

Manter uma equipe de SEO interna é caro. Além dos salários e benefícios, há custos com ferramentas de SEO, que frequentemente são pagas em dólar, e com a formação contínua da equipe, já que o SEO muda rapidamente e requer atualização constante.

Estilo de Trabalho

A equipe interna cria e implementa a estratégia de SEO, mas frequentemente depende de outras áreas, como desenvolvimento e produção de conteúdo. Em empresas menores, pode ser que apenas um ou dois analistas sejam responsáveis por tudo, o que limita a abrangência da atuação.

Tempo Alocado

Os profissionais internos estão 100% focados no SEO, mas isso pode não ser necessário em todos os casos, especialmente em sites menores, onde a quantidade de trabalho não justifica uma dedicação exclusiva.

Vantagens

Controle total sobre a estratégia
Alinhamento fácil com outras áreas da empresa
Equipe conhece bem a jornada do cliente

Desvantagens

Custo elevado para manter a equipe
Necessidade de atualização constante
Dificuldade em encontrar profissionais com conhecimento em todas as áreas do SEO

Como funcionam as agências de SEO?

As agências oferecem um serviço completo, que inclui a criação de estratégias, implementação e monitoramento de resultados. Elas são indicadas para empresas que precisam de apoio especializado, mas não têm volume de trabalho suficiente para justificar uma equipe interna.

Custos

Os custos com uma agência são fixos e geralmente mais baixos do que os de montar uma equipe interna. A agência também assume a responsabilidade por ferramentas e treinamento de seus profissionais.

Estilo de Trabalho

A agência gerencia a estratégia de SEO de forma independente, com aprovação da sua equipe de marketing. No entanto, é importante manter uma boa comunicação para que o trabalho esteja alinhado com os objetivos da empresa.

Passei 10 anos da minha vida prestando serviços enquanto colaborador de agências de publicidade e markjeting digital e afirmo: é a maior furada principalmente para empresas que estão precisando crescer e se diferenciar nos detalhes de cada mercado.

Eu, César, além de ser um profissional multidisciplinar no universo do SEO, desempenhava um papel crucial na área comercial da agência. Minha didática clara e minha vasta experiência em projetos tecnológicos de diversos tipos acabavam atraindo muitos novos clientes. Lembro-me perfeitamente de um momento marcante: estávamos em uma reunião com uma gigante do setor de calçados, e o dono da empresa, batendo em minhas costas, disse: “Ele ficará dedicado exclusivamente a vocês…” Mal sabiam que eu já estava dedicado a mais dez clientes ao mesmo tempo!

Tempo Alocado

O contrato estipula um número de horas mensais de trabalho, que pode ser ajustado conforme as necessidades do projeto.

Vantagens

Custo mais baixo do que uma equipe interna
Facilidade de escalar o serviço conforme a demanda
Experiência com múltiplos setores e mercados

Desvantagens

Menor controle sobre quem realiza o trabalho
Pode faltar conhecimento específico sobre o seu nicho de mercado
Comunicação pode ser mais lenta do que com uma equipe interna

Como funciona uma Consultoria de SEO?

Consultorias oferecem um serviço mais estratégico, com foco na identificação de problemas e oportunidades, mas sem a execução das mudanças. Elas são ideais para empresas que já possuem uma equipe interna ou parceiros de execução, mas precisam de orientação especializada.

Custos

Assim como as agências, o custo com uma consultoria é mais acessível do que o de manter uma equipe interna. A consultoria pode não assumir a execução, o que requer que a empresa tenha recursos internos ou parceiros para implementar as sugestões.

Estilo de Trabalho

A consultoria faz um diagnóstico detalhado, sugere soluções e acompanha os resultados. A implementação das mudanças, no entanto, fica a cargo da equipe da empresa. Normalmente, como no nosso caso, são figuras muito próximas e que possuem olhar crítico par ao negócio e não apenas para o marketing digital.

Vantagens

Conhecimento especializado e estratégico
A equipe interna se capacita ao longo do processo
Foco em resultados de médio e longo prazo
Possui uma equipe de staff para diferentes técnicas

Desvantagens

O sucesso depende da capacidade da empresa de implementar as mudanças propostas
Risco sério de concorrentes quererem contratar também, uma vez que a proximidade crítica com as regras de negócio são excelentes

SEO Freelancer: uma alternativa?

Além das opções acima, é possível contratar um freelancer de SEO. Esta solução é geralmente mais barata, mas pode apresentar limitações em termos de tempo e profundidade do serviço oferecido. Freelancers costumam ser indicados para projetos pequenos ou para complementarem equipes internas com necessidades específicas.

Como escolher a melhor forma de contratar SEO?

A escolha do melhor modelo depende de diversos fatores, como o tamanho da empresa, o orçamento disponível e a complexidade do seu site. Empresas maiores podem se beneficiar de um time interno, enquanto negócios menores podem optar por agências ou consultorias. Avalie as necessidades da sua empresa e faça a escolha que mais se alinha aos seus objetivos de crescimento.

Antes de contratar QUALQUER uma das possibilidades, agende um café digital conosco e venha unir suas ideias com os ratos do SEO e do marketing digital. Não cobramos NADA para conversar com você, fazer uma análise prévia, entender seus objetivos e dar bons conselhos.

A Pink and Brain é um recurso 1080º (3 voltas nas agências 360º) e pode conectar os recursos certos para a sua necessidade. é Justamente isso que nos move.

Manifesto César e Marcelino da Pink and Brain

Começamos a pensar em algo diferente no mercado de desenvolvimento digital depois de vários anos trabalhando em agências de publicidade 360º, aquelas que fazem um pouco de tudo dentro do Marketing Digital. Os clientes acabavam se tornando apenas um pilar de receita da empresa e não eram vistos como oportunidades de alcançar resultados espetaculares e serem reconhecidos pelas empreitadas de sucesso.

O que nós fazemos é muito mais do que fornecer boas dicas e executar as melhores práticas para produtos digitais: nos aprofundamos nos detalhes de cada negócio, buscando alavancas sólidas de crescimento, principalmente em aquisição orgânica.

Comparando com a analogia do mundo dos ratos de laboratório, em especial ao personagens da Warner, estamos sempre estudando e testando oportunidades para aumentar os resultados e trazer mais leads qualificados. Nosso principal objetivo é orientar e disseminar uma cultura sólida de dados e aquisição, onde cada área da empresa se sinta conectada e conheça os gatilhos para transformar simples campanhas em números que superam as expectativas.

Não se iludam pensando que as agências de publicidade 360º serão seus verdadeiros aliados e irão dedicar especialistas sêniores em tempo integral para os seus projetos. Nosso principal objetivo é fornecer os recursos certos de acordo com a sua velocidade de transformação.

Sempre bom relembrar onde tudo começou… e não foi nessa sala. It’s inside our brains.

Ah.. e essa nossa abordagem dá resultado?

Poxa.. na verdade é a única forma de dar resultado: visão de negócio, parceria constante, abordagem 1080º, mentes mirabolantes do digital super sêniores, idealizadores, sonhadores, merecedores, enfim..

Abaixo um caso super recente de um player que se tornou referência em um mercado da saúde nichado mas altamente rentável.

Constância e comprometimento de quem conhece os caminhos de aquisição digital e branding

O post Como contratar SEO: time interno, agência ou consultoria? apareceu primeiro em Pink and Brain.

Falhas clássicas nas estratégias de SEO (e o que fazer)

César Canteiro — Tue, 03 Feb 2026 00:26:34 +0000

As auditorias de SEO automatizadas, realizadas por ferramentas como Ahrefs ou Semrush, parecem práticas, mas muitas vezes não trazem os resultados esperados pelas empresas. Embora as auditorias possam fornecer informações valiosas, elas frequentemente levam a estratégias equivocadas, impedindo o crescimento real dos negócios.

Acreditamos que uma estratégia eficaz de SEO deve ser holística, priorizar o negócio, envolver diversas pessoas e times da empresa e fomentar a democratização das demandas relacionadas.

Três principais falhas nas auditorias de SEO

Valor limitado para os tomadores de decisão

A maioria das auditorias é repleta de métricas técnicas que só fazem sentido para especialistas em SEO. Esse excesso de termos técnicos dificulta que os tomadores de decisão, especialmente aqueles sem experiência em SEO, consigam extrair insights práticos. Isso cria um distanciamento que impede uma tomada de decisão eficaz e alinhada com a estratégia da empresa.

Desconexão com a estratégia de marketing

Auditorias de SEO geralmente se concentram em métricas isoladas ou “pontuações de SEO”, que muitas vezes têm pouca relevância para as metas de marketing do negócio. Por exemplo, uma empresa de SaaS B2B pode gerar muito tráfego orgânico, mas se esses visitantes não estiverem convertendo, o impacto no negócio será mínimo. A simples geração de tráfego não garante o sucesso — é preciso uma abordagem estratégica que vá além dos números.

Estaticidade e pontualidade

As auditorias automatiazadas e mesmo as não profundas fornecem uma visão momentânea do desempenho do site, sem considerar as mudanças contínuas no cenário competitivo. Isso as torna inadequadas para um planejamento de longo prazo, já que o SEO é um campo em constante evolução, que exige soluções dinâmicas e adaptáveis.

Mas afinal, o que fazer nestes casos? Dicas de ouro

Para superar essas limitações, a Pink and Brain propõe um roteiro ou cronograma de SEO personalizado, que se alinha às metas das empresas e oferecem um direcionamento claro para pessoas que não são especialistas em SEO. Aqui está por que essa abordagem é mais eficaz:

Foco nas regras do negócio, não em métricas em si

Em vez de centralizar a estratégia em métricas abstratas como “Autoridade de Domínio”, um roteiro de SEO prioriza as necessidades reais da empresa, garantindo que os esforços de SEO estejam alinhados a objetivos como geração de leads ou expansão de mercado. Isso conecta diretamente o SEO aos resultados esperados pelo marketing.

Fácil compreensão para toda a equipe

Enquanto as auditorias são voltadas para especialistas, o roteiro de SEO deve ser claro e acessível, facilitando a execução por toda a equipe, desde redatores a designers e gestores de marketing. Isso evita a frustração e promove um entendimento comum entre todos os envolvidos no projeto.

Foco nas ações de maior impacto

A lista de tarefas de SEO pode se tornar infinita, mas nem todas as ações têm a mesma importância. Um roteiro bem elaborado classifica as atividades de acordo com o impacto que elas terão no negócio, ajudando a equipe a se concentrar no que realmente importa. Além disso, esse modelo é flexível, permitindo ajustes conforme as atualizações dos algoritmos do Google e as mudanças no cenário competitivo.

Abandone as auditorias automáticas e superficiais

É hora de abandonar as auditorias automatizadas e adotar um roteiro de SEO personalizado, simples e baseado em dados, que esteja alinhado com os objetivos da sua empresa.

Entre em contato com a Pink and Brain e tenha uma consultoria “fora da curva”. Somos ratos quando o assunto são estratégias de SEO para diferentes tipos de sites: publicadores de conteúdos, blogs, e-commerces, marketplaces, comparadores de produtos, etc…

O post Falhas clássicas nas estratégias de SEO (e o que fazer) 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.

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.

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> Tudo isso precisa ser auditado por um profissional que entenda tanto de desenvolvimento quanto de SEO. <h2 class="wp-block-heading">O erro de pensar no visual antes da performance</h2> 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. Principais problemas ligados ao desenvolvimento pobre e sem estratégia: <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></code>, <code><section></code>)</td><td>Confunde os buscadores</td></tr></tbody></table></figure> Solução: 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 baixa o <a href="https://www.pinkandbrain.com/elementos/cpc-cost-per-click/" title="custo por clique">custo por clique</a> em campanhas pagas, melhora a usabilidade e favorece o crescimento a longo prazo. <h2 class="wp-block-heading">Falta de tagueamento e acompanhamento profissional</h2> Ter um site é só o começo. Sem ferramentas de medição como Google Analytics 4, <a href="https://www.pinkandbrain.com/elementos/google-search-console/" title="Google Search Console">Google Search Console</a> e Google Tag Manager, você está às cegas. <h3 class="wp-block-heading">O que essas ferramentas fazem:</h3> <ul class="wp-block-list"> <li>GA4: mostra como os visitantes interagem com seu site</li> <li>Search Console: revela como o Google vê suas páginas, se há erros e em quais buscas você aparece</li> <li>Tag Manager: permite gerenciar scripts e tags sem precisar alterar o código diretamente</li> </ul> Sem isso, é impossível tomar decisões baseadas em dados. Você não sabe o que está funcionando — e pior, não sabe o que está dando errado. <h2 class="wp-block-heading">O desenvolvimento do site é a raiz do sucesso (ou do fracasso)</h2> Construtores como Wix, Elementor ou até temas prontos do WordPress podem ser ótimos para começar. Mas, se mal configurados, na maioria das vezes, se tornam armadilhas. 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: no desenvolvimento do site. <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 códigos desnecessários que deixam o site lento</li> <li>Criam URLs desorganizadas</li> <li>Limitam o controle do SEO técnico</li> <li>Dependem de atualizações constantes</li> <li>Muitos deles não otimizam corretamente o carregamento no mobile</li> </ul> Cuidado: não é o construtor em si que é o problema. É o uso dele sem conhecimento técnico ou sem um SEO acompanhando o processo. Nosso time desenvolve temas autorais, otimizados para velocidade, performance, SEO técnico e agora também <a href="https://www.pinkandbrain.com/elementos/generative-engine-optimization-geo/" title="GEO">GEO</a> (Generative Engine Optimization), preparando seu site para aparecer em mecanismos baseados em IA como os AI Overviews do Google. <h2 class="wp-block-heading">A ausência de um(a) analista de SEO olhando para o seu site</h2> Assim como sua empresa precisa de alguém cuidando do financeiro ou do estoque, você também precisa de alguém cuidando do seu <a href="https://www.pinkandbrain.com/elementos/trafego-organico/" title="tráfego orgânico">tráfego orgânico</a>. O SEO não é algo que se resolve com um plugin ou uma ação pontual. É uma estratégia contínua. Profissionais de SEO cuidam de: <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> Com o avanço dos AI Overviews, respostas instantâneas e LLMs como Gemini e ChatGPT dominando os resultados, o SEO ficou ainda mais estratégico. Sites que não têm estrutura, autoridade e clareza nos seus conteúdos tendem a ser ignorados por esses sistemas de inteligência. Hoje, não basta mais “aparecer no Google”. Você precisa: <ul class="wp-block-list"> <li>Aparecer nos resumos de IA</li> <li>Ter conteúdo semântico</li> <li>Conectar sua marca a entidades reconhecíveis</li> <li>Pensar em branding digital estruturado</li> </ul> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-16 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> Aparecer no Google hoje é mais do que uma questão de vaidade. É sobre ser encontrado, gerar vendas, reduzir dependência de anúncios pagos e construir reputação digital. Se você negligencia isso, perde oportunidades todos os dias. 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. <h2 class="wp-block-heading">Passo a passo simplificado: o que você precisa fazer agora</h2> <ol start="1" class="wp-block-list"> <li>Verifique se seu site está indexado – use a pesquisa do Google e o Google Search Console</li> <li>Corrija a estrutura do site – elimine plugins desnecessários, melhore performance</li> <li>Garanta que o conteúdo seja relevante – crie páginas úteis, com texto e estrutura</li> <li>Implemente SEO técnico – títulos, headings, sitemaps, estruturação semântica</li> <li>Monitore com ferramentas adequadas – GA4, Search Console, ferramentas de SEO</li> <li>Conte com um time especializado – como a Pink and Brain, que une desenvolvimento, SEO, mídia e performance editorial</li> </ol> Quer que seu site seja visto por quem realmente importa? Comece com o básico, corrija os erros, e busque ajuda especializada se precisar. A presença digital não se constrói com sorte — se constrói com inteligência. 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>. </article> <article> <h1>Saiba como limpar e otimizar o banco de dados de sites WordPress</h1> César Canteiro — Fri, 13 Jun 2025 18:37:56 +0000 Manter o banco de dados do WordPress limpo e otimizado melhora a velocidade, desempenho e eficiência do site. O excesso de dados acumulados pode tornar as consultas lentas, 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. Aqui na Pink and Brain somos ratos quando o assunto é desenvolvimento de sites em WordPress. Confira nossas dicas essenciais com hacks para manter seu WordPress funcionando de forma enxuta e rápida. <h2 class="wp-block-heading">Antes de tudo: faça um backup!</h2> Antes de realizar qualquer alteração no banco de dados, faça um backup completo usando plugins como: <ul class="wp-block-list"> <li>UpdraftPlus (fácil de restaurar)</li> <li>WPvivid Backup</li> <li>Duplicator (ideal para migrações)</li> <li>phpMyAdmin (backup manual via exportação)</li> </ul> Se for fazer de forma manual, basta você entrar no phpMyAdmin e clicar aqui: <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-17 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> </figure> Se algo der errado, você pode restaurar seu site rapidamente! 🛠️ <h2 class="wp-block-heading">Hacks para limpar o banco de dados</h2> <h3 class="wp-block-heading">Remova transientes expirados</h3> Transientes são dados temporários salvos no banco de dados para acelerar carregamentos. Quando expiram, continuam ocupando espaço. Remova transientes antigos com: <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>DELETE FROM wp_options WHERE option_name LIKE '_transient_%' OR option_name LIKE '_site_transient_%';</code></pre>SQL</div> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-18 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> </figure> Você pode simular as queries antes de executar. Cuidado porque depois que executar não dá para voltar! <h3 class="wp-block-heading">Limpe revisões antigas de postagens</h3> Cada vez que você edita um post, o WordPress salva uma revisão. Com o tempo, isso acumula centenas de versões, tornando o banco de dados pesado. <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>DELETE FROM wp_posts WHERE post_type = 'revision';</code></pre>SQL</div> Dica extra: Você pode limitar a quantidade de revisões que o WordPress guarda: <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)">PHP<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>define('WP_POST_REVISIONS', 5);</code></pre>PHP</div> Isso mantém apenas as últimas cinco revisões, reduzindo o excesso de dados. <h3 class="wp-block-heading">Exclua rascunhos automáticos</h3> O WordPress salva automaticamente rascunhos não publicados. Para remover todos os rascunhos não utilizados: <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>DELETE FROM wp_posts WHERE post_status = 'auto-draft';</code></pre>SQL</div> <h3 class="wp-block-heading">Limpe comentários de spam e lixo</h3> Se seu site recebe muitos comentários, o banco de dados pode estar cheio de mensagens de spam. Remova comentários não aprovados e na lixeira: <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>DELETE FROM wp_comments WHERE comment_approved = 'spam' OR comment_approved = 'trash';</code></pre>SQL</div> Dica extra: Instale o Akismet ou Antispam Bee para filtrar comentários antes que eles sejam salvos no banco de dados. <h3 class="wp-block-heading">Remova metadados órfãos de posts</h3> Cada post pode ter metadados extras salvos, como imagens destacadas, configurações de SEO, entre outros. Se um post for apagado, os metadados ficam sem referência, ocupando espaço no banco de dados. <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>DELETE pm FROM wp_postmeta pm LEFT JOIN wp_posts wp ON wp.ID = pm.post_id WHERE wp.ID IS NULL;</code></pre>SQL</div> <h3 class="wp-block-heading">Remova metadados órfãos de usuários</h3> Usuários deletados deixam registros inúteis no banco de dados. Limpe dados que não têm mais referência: <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>DELETE um FROM wp_usermeta um LEFT JOIN wp_users wu ON wu.ID = um.user_id WHERE wu.ID IS NULL;</code></pre>SQL</div> <h3 class="wp-block-heading">Limpe metadados órfãos de termos</h3> Se categorias e tags foram excluídas, os metadados podem continuar ocupando espaço. <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>DELETE tm FROM wp_termmeta tm LEFT JOIN wp_terms wt ON wt.term_id = tm.term_id WHERE wt.term_id IS NULL;</code></pre>SQL</div> <h3 class="wp-block-heading">Otimizar todas as tabelas do WordPress</h3> Otimizar tabelas melhora a organização dos dados e reduz fragmentação, tornando o banco mais rápido. Execute este comando no phpMyAdmin: <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)">SQL<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>OPTIMIZE TABLE wp_posts, wp_postmeta, wp_options, wp_comments, wp_commentmeta, wp_terms, wp_termmeta, wp_users, wp_usermeta;</code></pre>SQL</div> Dica: Use o plugin WP-Optimize para fazer isso regularmente! <h2 class="wp-block-heading">Extras para manter seu banco de dados sempre leve</h2> <ul class="wp-block-list"> <li>Desative o uso excessivo de plugins: quanto menos plugins ativos, mais rápido será o carregamento. Use apenas o necessário!</li> <li>Use um plugin de cache: plugins como WP Rocket, W3 Total Cache e LiteSpeed Cache reduzem requisições ao banco de dados.</li> <li>Minimize consultas desnecessárias: algumas funções do WordPress fazem consultas muito pesadas (como <code>query_posts</code>). Verifique se o código usa <code>WP_Query</code> corretamente.</li> <li>Exclua registros inúteis no wp_options: tabelas como <code>wp_options</code> podem ficar cheias de dados antigos e inúteis, prejudicando o desempenho.</li> <li>Monitore com ferramentas de otimização: use plugins como Query Monitor ou Debug Bar para verificar consultas lentas e ajustar seu banco de dados.</li> </ul> Agora seu WordPress estará limpo e otimizado! 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. 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>. </article> <article> <h1>Conheça a INP (Interaction to Next Paint), métrica das Core Web Vitals</h1> César Canteiro — Tue, 22 Apr 2025 19:02:18 +0000 O <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a> anunciou no ano passado uma alteração importante nas suas métricas de <a href="https://www.pinkandbrain.com/core-web-vitals-metricas-e-otimizacoes-para-seo/" title="Core Web Vitals">Core Web Vitals</a>, com a introdução da <a href="https://www.pinkandbrain.com/elementos/interaction-to-next-paint-inp/" title="Interaction to Next Paint (INP)">Interaction to Next Paint (INP)</a>, que substituiu a métrica atual de First Input Delay (FID). A mudança trás mais precisão na avaliação da experiência do usuário em páginas da web. Vamos entender melhor o que isso significa e como você pode otimizar seu site para ter uma boa nota nessa métrica. <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-19 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-large"><figcaption class="wp-element-caption">Métrica <a href="https://www.pinkandbrain.com/elementos/interaction-to-next-paint-inp/" title="INP">INP</a></figcaption></figure> </figure> <h2 class="wp-block-heading">O que é INP (Interaction to Next Paint)?</h2> A INP é uma métrica crucial do Google para medir a experiência do usuário em relação ao tempo de interação. Diferente da FID, que apenas registrava o tempo de resposta da primeira interação do usuário, a INP considera todas as interações realizadas em uma página, identificando a mais lenta delas e calculando o atraso até a próxima pintura da tela. A principal diferença é que a INP é uma métrica mais abrangente e precisa, pois leva em consideração o ciclo completo de interações, em vez de focar apenas na primeira. Isso faz com que a avaliação da experiência do usuário seja mais fiel ao comportamento real de navegação em uma página. <h2 class="wp-block-heading">Como funciona a INP?</h2> A INP mede o atraso total de todas as interações de um usuário durante o ciclo de vida da página até o próximo quadro de renderização. O Google já forneceu uma escala para avaliar a pontuação da INP: <ul class="wp-block-list"> <li>Abaixo de 200 milissegundos: Bom</li> <li>Entre 200 e 500 milissegundos: Precisa de melhorias</li> <li>Acima de 500 milissegundos: Ruim</li> </ul> <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-20 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-large"></figure> </figure> Em comparação com o FID, a INP oferece uma visão mais detalhada, capturando o comportamento de interação do usuário de forma mais ampla. <h2 class="wp-block-heading">A transição do FID para a INP</h2> A transição para a INP não é uma novidade repentina. Desde 2021, o Google já vinha publicando algumas limitações do FID e começou a explorar formas de melhorar a precisão das métricas de interação. A mudança para a INP foi uma resposta direta a essas limitações, visando oferecer uma métrica mais eficaz que refletisse melhor a experiência do usuário nas páginas da web. <h3 class="wp-block-heading">A jornada da INP: como tudo começou?</h3> A história da INP começou em junho de 2021, quando os desenvolvedores do Google Chrome começaram a investigar uma forma de melhorar a medição da interação do usuário com uma página. Eles identificaram que o FID não era suficiente para capturar todas as nuances da interação de um usuário com a página. Foi nesse contexto que começou o desenvolvimento da INP. No início de 2022, o nome da nova métrica foi revelado oficialmente, e o Google compartilhou alguns dados sobre o comportamento dos usuários. A empresa observou que 90% do tempo que um usuário passa em uma página ocorre depois que ela é carregada, ou seja, muito depois que a primeira interação acontece. Isso fez com que fosse necessário considerar todas as interações, e não apenas a primeira, para oferecer uma medição precisa da experiência do usuário. <h2 class="wp-block-heading">Como a INP pode impactar sites?</h2> Com a implementação da INP, os desenvolvedores e administradores de sites tem um método mais eficaz para medir e melhorar a capacidade de resposta das páginas. Para garantir que seu site seja bem classificado em termos de Core Web Vitals, você precisará se concentrar na otimização de todas as interações, especialmente as que afetam o tempo até a próxima pintura. Essa mudança também implica que, ao otimizar o tempo de resposta de uma página, você deve focar em oferecer feedback visual imediato para o usuário durante as interações, como um indicador de que algo está acontecendo. O atraso na resposta pode dar a impressão de que a página não está funcionando corretamente, o que impacta negativamente a experiência do usuário. <h2 class="wp-block-heading">A INP e suas implicações para SEO</h2> O INP é mais uma tentativa do Google de oferecer uma medição mais precisa da experiência do usuário, o que está diretamente ligado ao SEO. A experiência do usuário sempre foi um fator importante para o Google, e a INP ajudará a garantir que os sites ofereçam uma navegação mais fluida e interativa. Se a INP for bem otimizada, ela poderá ajudar o seu site a ter uma classificação mais alta nos resultados de pesquisa. Portanto, é fundamental que os desenvolvedores e administradores de sites comecem a focar na melhoria da capacidade de resposta de suas páginas, especialmente com relação ao tempo de interação. <h3 class="wp-block-heading">O que fazer para melhorar a métrica?</h3> Agora é o momento perfeito para começar a otimizar seu site em relação à INP. Aqui estão algumas dicas para você começar: <ol class="wp-block-list"> <li>Melhore a capacidade de resposta: Certifique-se de que seu site seja rápido e responsivo a todas as interações dos usuários.</li> <li>Reduza o tempo de bloqueio de entrada: Minimize o tempo que a página leva para responder a uma interação do usuário.</li> <li>Forneça feedback visual imediato: Ofereça ao usuário uma indicação clara de que sua interação foi registrada, como animações ou ícones que mostrem que algo está acontecendo.</li> </ol> <hr class="wp-block-separator has-alpha-channel-opacity"> Fique atento às mudanças e otimize seu site! Caso precise de mais informações sobre SEO e Core Web Vitals, entre em contato com os ratos do Google e venha tomar um café digital. O post <a href="https://www.pinkandbrain.com/conheca-a-inp-interaction-to-next-paint-metrica-das-core-web-vitals/">Conheça a INP (Interaction to Next Paint), métrica das Core Web Vitals</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>. </article> <article> <h1>Dicas essenciais de otimizações para SEO em sites WordPress</h1> Marcelino Junior — Wed, 12 Mar 2025 20:59:21 +0000 O <a href="https://www.pinkandbrain.com/elementos/cms-content-management-system/" title="CMS (Content Management System)">CMS (Content Management System)</a> WordPress é a plataforma mais utilizada no mundo para criação de sites, lojas virtuais, blogs e outras finalidades. Ela é a preferida pela versatilidade e flexibilidade de customizações possíveis, mesmo para quem não tem muita familiaridade com a programação e necessite fazer ajustes visuais em suas páginas. 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 tecnologia baseada em PHP, que roda do lado do servidor completamente, um site tende a sere mais oneroso para a experiência de navegação dos usuários. 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 é preciso garantir que seu site esteja otimizado para os mecanismos de pesquisa. Isso significa que precisará atender a uma série de premissas técnicas, 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. Se você utiliza o WordPress, é bem provável que já tenha se perguntado: “porque meu site não atrai os usuários” ou “como posso aprimorar o SEO do meu site WordPress para que ele apareça melhor no Google?”. A resposta não é simples, pois existem várias maneiras de otimizar um site como mencionado. Trabalhar em melhorias de SEO é 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. Para ajudá-lo a entender como melhorar o SEO do seu site WordPress, 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. <h2 class="wp-block-heading">Por que escolher o CMS WordPress para o seu site?</h2> Escolher o WordPress para o seu site é uma decisão inteligente por diversas razões. Primeiramente, o WordPress é uma das plataformas mais populares e amplamente utilizadas no mundo, 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. Além disso, a plataforma é altamente personalizável, 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. Outro grande benefício é a capacidade do WordPress de otimizar o SEO do seu site, com diversas ferramentas e plugins que ajudam a melhorar a visibilidade nos motores de busca. A segurança é outro fator importante, pois o WordPress recebe atualizações constantes para proteger seu site contra vulnerabilidades. Ele possui uma comunidade ativa de desenvolvedores e usuários ao redor do mundo oferece suporte contínuo, garantindo que você nunca esteja sozinho ao enfrentar um problema ou desafio. 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. Essas características tornam o WordPress uma escolha sólida e confiável para qualquer tipo de site. <h2 class="wp-block-heading">Ter um site em WordPress melhora automaticamente a posição no Google?</h2> 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, 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>, além de outras centenas de boas práticas. 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. <h2 class="wp-block-heading">Dicas de ouro para otimizar seu site WordPress para fins de SEO</h2> 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. <h3 class="wp-block-heading">Fuja do Elementor e crie um tema autoral para o seu negócio</h3> 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. Contudo, temas prontos costumam não ser otimizados para SEO. O ideal é construir um tema do zero incluindo as melhores praticas de formatação semântica, as malicias do SEO como sempre falamos, para que o seu site tenha uma vantagem diante da concorrencia. Um erro comum é utilizar o plugin Elementor para criar sites, 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. Aqui na Pink and Brain, costumamos contruir temas autorais para os nossos clientes trazendo toda nossa carga cognitiva de experiência em SEO para conceber aplicações super podersosas no que tange aquisição orgânica. <h3 class="wp-block-heading">Utilize JavaScript puro ao invés de recursos terceiros como o JQuery</h3> 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. Primeiramente, o JavaScript puro ajuda a reduzir o tamanho do código e o overhead, 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. Ao eliminar a dependência do jQuery, você reduz o código desnecessário, 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. Outra vantagem é que menos dependências significam menos riscos de conflitos e uma manutenção mais fácil. 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. <h3 class="wp-block-heading">Reponsividade ao invés de desenvolver interfaces separadas</h3> 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. 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. 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. Na década passada, pela falta de recursos como o CSS Grid, Flexbox, as media queries, o HTML5 semântico, era comum ver sites desenvolvendo suas aplciações apartadas para cada dispositivo, mas isso morreu rápido. Hoje quem faz isso está deixando dinheiro na mesa e perdendo tempo. Nosso caso mais recente, o portal Panrotas, 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. Uma coisa posso afirmar: foi o melhor movimento da empresa dos últimos 10 anos 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? Aumentamos em 25% a audiência diária média do portal. <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> Somos ratos quando o assunto é migração de sites, m. para www. <h3 class="wp-block-heading">Otimize o SEO On-page: tags essenciais, title, description, imagem de destaque, densidade das palavras-chave no contexto</h3> Para facilitar o trabalho de otimização, é essencial ter um bom plugin de SEO instalado no WordPress. O Yoast SEO e o Rank Math 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. <h3 class="wp-block-heading">Otimize suas imagens (a tal boa prática em imagens)</h3> 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. Existem 5 premissas básicas quando lidamos com imagens em páginas web: <ul class="wp-block-list"> <li>Nomenclatura;</li> <li>Formato;</li> <li>Peso;</li> <li>Atributos Alt e Title;</li> <li>Legenda.</li> </ul> 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). Quando criamos um tema do zero, otimizamos cada espaço onde as imagens poderão aparecer e por isso realizamos crops estratégicos 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 Smush ou o ShortPixel para compactar suas imagens sem perder qualidade. Não menos importante, o nome que você dá aos arquivos, atributos alt e title que são cadastrados nas meta informações de cada imagem, além da legenda, também são importantes para uma estratégia sólida de SEO., São através dessas boas práticas em imagens 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. Ah!! e sobre os formatos, utilize sempre imagens em Webp ao invés de Jpeg ou PNG. 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. <h3 class="wp-block-heading">Melhore a velocidade do seu site</h3> A velocidade de carregamento do seu site é o principal ponto de atenção para SEO. 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 (WP Rocket, WP Fastest Cache são ótimos plugins para isso). Minimize também o uso de recursos terceiros. 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. 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. <figure class="wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-21 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> 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.. <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"><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> 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, sitemaps, feeds, etc… 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. <h3 class="wp-block-heading">Certificado SSL e o HTTPS</h3> A segurança é um fator crucial para garantir um bom tráfego orgânico. Sites com HTTPS oferecem uma camada extra de segurança e isso é considerado um fator de ranqueamento pelo Google. Para implementar o HTTPS, obtenha um certificado SSL junto ao seu provedor de hospedagem ou através de autoridades de certificação. <h3 class="wp-block-heading">Foque na experiência do usuário</h3> 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 conteúdo estruturado e que realmente atenda às necessidades dos usuários. Evite práticas de spam, que podem resultar em penalizações ou até no banimento do Google. <h3 class="wp-block-heading">Atualize seu conteúdo regularmente</h3> Conteúdos antigos podem perder relevância com o tempo. Atualize seus posts antigos com novas informações, dados recentes ou melhores práticas. 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. <h3 class="wp-block-heading">Monitore seu desempenho</h3> Como dito, monitore o desempenho do seu site com 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. Analisar esses dados permite que você faça ajustes contínuos e mantenha seu site otimizado para SEO. <hr class="wp-block-separator has-alpha-channel-opacity"> Otimizar seu site WordPress para SEO é 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 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. Comece hoje mesmo e colha os frutos de um SEO bem feito! Se você precisar de ajuda com otimização ou deseja explorar mais sobre como melhorar o SEO do seu site, não hesite em entrar em contato com os ratos da <a href="https://www.pinkandbrain.com/">Pink and Brain</a>. Somos ratos quando o assunto é criar sites otimizados em WordPress. 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>. </article> <article> <h1>Manipulando a scrollbar com CSS: como esconder, estilizar e mais</h1> César Canteiro — Thu, 27 Feb 2025 20:18:58 +0000 A scrollbar (barra de rolagem) 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. <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> <figcaption class="blocks-gallery-caption wp-element-caption">História e evolução da scrollbar nos navegadores</figcaption></figure> Neste post, você aprenderá a: <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-24 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> Se deseja ocultar a scrollbar, mas ainda permitir a rolagem do conteúdo, use as seguintes regras CSS: <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>.elemento::-webkit-scrollbar { display: none; }</code></pre>CSS</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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>.elemento { scrollbar-width: none; }</code></pre>CSS</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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>.elemento { -ms-overflow-style: none; }</code></pre>CSS</div> Com essas configurações, a barra de rolagem ficará invisível, mas o usuário ainda poderá rolar o conteúdo. <h2 class="wp-block-heading">2. Como estilizar e personalizar a scrollbar</h2> Se quiser estilizar a barra de rolagem em navegadores baseados em WebKit (Chrome, Safari, Edge), utilize os seguintes seletores: <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><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; }</code></pre>CSS</div> Explicação: <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"> 📌 Observação: o Firefox permite personalizar apenas a largura usando <code>scrollbar-width</code>, mas não oferece suporte a cores ou outros estilos avançados. </blockquote> <h2 class="wp-block-heading">3. Como fazer a rolagem suave</h2> Caso queira que a rolagem seja mais fluida, adicione este CSS: <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><a href="https://www.pinkandbrain.com/elementos/html-hypertext-markup-language/" title="html">html</a> { scroll-behavior: smooth; }</code></pre>CSS</div> Isso faz com que os links internos da página rolem suavemente até o destino, ao invés de saltar diretamente. <h2 class="wp-block-heading">4. Como criar uma scrollbar oculta que aparece ao passar o mouse</h2> Se deseja esconder a scrollbar e mostrá-la apenas quando o usuário passar o mouse sobre o elemento, utilize: <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>.elemento::-webkit-scrollbar { width: 0px; } .elemento:hover::-webkit-scrollbar { width: 8px; }</code></pre>CSS</div> <hr class="wp-block-separator has-alpha-channel-opacity"> 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. 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 ratos do desenvolvimento web! 🚀 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>. </article> <article> <h1>Efeito Drop Caps em CSS: primeira letra gigante em parágrafos</h1> César Canteiro — Fri, 17 Jan 2025 11:55:27 +0000 Drop caps são elementos de design amplamente usados em mídia impressa 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. <figure class="wp-block-gallery has-nested-images columns-2 wp-block-gallery-25 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> 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>. <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><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; }</code></pre>CSS</div> Com isso, a primeira letra ganha destaque, sendo estilizada de forma independente do restante do texto. <h2 class="wp-block-heading">Como customizar o tamanho da primeira letra pegando várias linhas por CSS?</h2> 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>: 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. <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><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; }</code></pre>CSS</div> Essa solução garante que a letra fique alinhada corretamente com o parágrafo. <h2 class="wp-block-heading">Efeito Drop Caps: Como colocar a primeira letra maiúscula no WordPress?</h2> É bem fácil. <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> Voalá! está pronto e fica muito bacana. <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"><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> 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: <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>drop__caps_p_2:first-child::first-letter { color: hotpink; padding-right: 8px; -webkit-initial-letter: 3; initial-letter: 3; }</code></pre>CSS</div> <h2 class="wp-block-heading">Compatibilidade com navegadores / browsers</h2> 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. <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)">CSS<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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code>@supports (initial-letter: 3) { article p:first-child::first-letter { initial-letter: 3; } }</code></pre>CSS</div> <h2 class="wp-block-heading">Quando usar Drop Caps?</h2> Drop caps são ideais para: <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> Com essas técnicas, você pode incorporar o charme clássico dos drop caps ao seu design moderno de maneira elegante e funcional! Gostou da dica? Aqui na Pink and Brain criamos aplicações modernas, diferenciadas, consistentes e focadas em SEO. Venha tomar um café digital e conversar sobvre negócios. 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>. </article> <article> <h1>Review do plugin de segurança: WordPress All-In-One (AIOS)</h1> César Canteiro — Thu, 09 Jan 2025 14:02:24 +0000 Se você tem um site em WordPress certamente já sofreu com algum spam, malware ou mesmo problemas graves de <a href="https://www.pinkandbrain.com/elementos/indexacao/" title="indexação">indexação</a> maliciosa de conteúdos, devido a vulnerabilidade que temas e plugins abrem em nossa aplicação. Essa exposição das tecnologias WordPress se dá justamente pela característica open source, por ser uma plataforma para todos os perfis de pessoas, não só desenvolvedores web, e o fator falta de conhecimento sobre segurança pode comprometer seu site. Vou fazer um review do plugin All-In-One Security (AIOS) para explicar as funcionalidades para você configurar em poucos instantes lendo esse tutorial. <h2 class="wp-block-heading">Sobre o plugin AIOS</h2> O AIOS é um plug-in de segurança completo que protege seu site com funções básicas e algumas mais avançadas, que acabam com 99% dos problemas (na minha opoinião). Funções como firewall integrado, bloqueio de IP, autenticação de dois fatores, honey pot, scanner de malware, detecção e prevenção contra ataques de força bruta, XSS (cross site scripting) e outras ameaças comuns à segurança. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Dashboard do painel geral do AIOS, plug-in de segurança WordPress</figcaption></figure> <h2 class="wp-block-heading">Por que usar o All-In-One Security (AIOS) no seu site WordPress?</h2> O All-In-One Security (AIOS) é um plug-in muito recomendado de fabricantes idôneos e comprometidos, super popular entre os desenvolvedores e a comunidade WordPress, que oferece auditoria de segurança, monitoramento e firewall e uma ampla gama de defesas contra ameaças, incluindo ataques de força bruta, malware e roubo de conteúdo. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Menu de opções do plugin no WordPress</figcaption></figure> O firewall do AIOS filtra o tráfego suspeito antes que ele chegue ao seu site. Caso os hackers consigam ultrapassar o firewall, o plug-in oferece vários recursos para proteger seu painel, como alterar o URL de login e o prefixo do banco de dados, além de exigir autenticação de dois fatores (2FA). <h2 class="wp-block-heading">Dashboard do All-In-One Security</h2> Se um intruso mal-intencionado obtiver acesso ao seu painel, o AIOS registrará todas as atividades no seu WordPress, ajudando a identificar rapidamente comportamentos suspeitos para que você possa tomar medidas corretivas. Se você está começando ou tem um orçamento limitado, pode baixar a versão lite do AIOS no repositório oficial do WordPress que já oferece uma centena de funcionalidades. <h2 class="wp-block-heading">Versão gratuita do All-In-One Security (AIOS)</h2> Este plug-in gratuito oferece recursos essenciais para combater spam de comentários e proteger seu painel com autenticação de dois fatores, além de criar um registro de auditoria detalhado e notificar sobre comportamentos suspeitos. O AIOS também pode proteger seu site contra ladrões de conteúdo, desativando <a href="https://www.pinkandbrain.com/elementos/feeds/" title="feeds">feeds</a> RSS e Atom e impedindo cliques com o botão direito do mouse. Entretanto, a versão premium oferece recursos adicionais, incluindo um scanner de segurança, opção de bloquear tráfego por país de origem, entre outros. <h2 class="wp-block-heading">Segurança é fundamental em sites WordPress</h2> A segurança do WordPress é crucial para todos os proprietários de sites. Mesmo que você esteja começando ou não tenha muito tráfego, muitos ataques são realizados por bots e scripts automatizados, tornando qualquer site um alvo potencial. Vamos explorar se o AIOS é o plug-in de segurança ideal para seu site WordPress. <h3 class="wp-block-heading">1. Proteção Contra ataques de força bruta</h3> O AIOS bloqueia automaticamente um endereço IP após um número definido de tentativas de login com falha. Você pode personalizar o número de tentativas e o período de bloqueio nas configurações do plug-in. Bots frequentemente geram erros 404 enquanto procuram vulnerabilidades. O AIOS monitora esses erros e bloqueia IPs que geram um número anormal de erros 404. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Proteção contra ataques de força bruta</figcaption></figure> Você também pode bloquear o tráfego com base no país de origem, permitindo a lista branca de IPs específicos mesmo em países bloqueados. <h3 class="wp-block-heading">2. Autenticação de dois fatores (2FA)</h3> O AIOS adiciona autenticação de dois fatores ao WordPress, compatível com ferramentas como <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a> Authenticator e Authy, e até com o WooCommerce. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Autenticação de dois fatores (2FA)</figcaption></figure> Você pode limitar esse recurso a funções específicas ou torná-lo obrigatório para certas funções de usuário, como administradores e editores. <h3 class="wp-block-heading">3. Scanner de malware</h3> O AIOS inclui um scanner de malware que notifica sobre códigos suspeitos no seu site e monitora o status do seu site nos mecanismos de busca. Está disponível apenas na versão paga e é um ótimo recurso sem dúvidas, uma vez que pode nortear ajustes vitais rapidamente. <h3 class="wp-block-heading">4. Proteção contra spam de comentários</h3> O AIOS bloqueia comentários originados de outros domínios e IPs conhecidos de spammers, eliminando esses comentários automaticamente. Os comentários de spam podem prejudicar a experiência do usuário e podem até mesmo prejudicar seu SEO. <h3 class="wp-block-heading">5. Scanner de segurança automatizado</h3> O AIOS vem com um scanner de segurança integrado que verifica se há alterações em arquivos no seu site e o notifica se encontrar algo suspeito. Ele verifica alterações em arquivos e notifica se encontrar algo suspeito, podendo ser executado manualmente ou agendado automaticamente. <h3 class="wp-block-heading">6. Firewall de aplicativos da web (WAF)</h3> O WAF integrado protege contra ataques de hackers, força bruta e DDoS usando regras de firewall “6G Blacklist”, protegendo seu site contra solicitações de URL maliciosas conhecidas e bots. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Firewall de aplicativos da web (WAF)</figcaption></figure> Novas ameaças à segurança estão sendo descobertas o tempo todo. Dito isso, a equipe do AIOS mantém uma lista de explorações conhecidas e as libera como novas regras de firewall, para que você possa ter certeza de que seu site está protegido contra as mais recentes ameaças à segurança conhecidas. <h3 class="wp-block-heading">7. Alterar o URL de login</h3> Personalize o URL de login para dificultar que hackers encontrem a página de login. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Alterar o URL de login</figcaption></figure> <h3 class="wp-block-heading">8. Forçar Logout</h3> Configure o logout automático de usuários após um período de tempo para aumentar a segurança, especialmente em computadores compartilhados. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Forçar Logout</figcaption></figure> <h3 class="wp-block-heading">9. Aprovação manual de contas</h3> Marque novas contas como “pendentes” até aprová-las manualmente no painel do WordPress, ajudando a prevenir contas de spam. <h3 class="wp-block-heading">10. Gerador de CAPTCHA</h3> Proteja páginas de login e registro com CAPTCHA, usando Cloudflare Turnstile, Google reCAPTCHA v2 ou CAPTCHA matemático. <h3 class="wp-block-heading">11. Ativar Honeypot</h3> Adicione um campo visível apenas para bots nas páginas de login e registro para redirecionar usuários suspeitos. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Honeypot</figcaption></figure> <h3 class="wp-block-heading">12. Renomear contas “admin”</h3> Substitua o nome de usuário “admin” por outro para evitar ataques de força bruta. <h3 class="wp-block-heading">13. Lista negra de IPs</h3> Bloqueie rapidamente IPs específicos, intervalos de IP e agentes de usuário. <h3 class="wp-block-heading">14. Proteção de cópia de conteúdo</h3> Impeça que outros sites exibam seu conteúdo via iframe e desative o clique com o botão direito para proteger imagens. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Proteção de cópia de conteúdo</figcaption></figure> <h3 class="wp-block-heading">15. Desativar Hotlinking</h3> Impeça hotlinking para proteger imagens e economizar recursos do servidor. <h3 class="wp-block-heading">16. Ferramenta de Força da Senha</h3> Verifique a força das senhas para evitar vulnerabilidades de segurança. <h3 class="wp-block-heading">17. Desativar Enumeração de Usuários</h3> Impeça que hackers obtenham uma lista de nomes de usuário válidos. <h3 class="wp-block-heading">18. Sais adicionais</h3> Adicione 64 novos caracteres aos sais padrão do WordPress para maior segurança nas credenciais de login. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Salt postfix</figcaption></figure> <h3 class="wp-block-heading">19. Desativar XML-RPC</h3> Bloqueie acesso externo ao XML-RPC para maior segurança, mantendo a funcionalidade de plug-ins como Jetpack. <h3 class="wp-block-heading">20. Desativar editores de arquivos</h3> Desative editores integrados para evitar que hackers adicionem códigos maliciosos ao seu site. <h3 class="wp-block-heading">21. Prefixo de banco de dados personalizado</h3> Altere o prefixo do banco de dados de “wp_” para dificultar ataques automatizados. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Mudar ou alterar prefixo do banco de dados (salve sempre o backup antes da operação)</figcaption></figure> <h3 class="wp-block-heading">22. Configurações de Permissão</h3> Corrija permissões de arquivos e pastas para manter a segurança ideal. <h3 class="wp-block-heading">23. Registro de Auditoria Detalhado</h3> Monitore mudanças e atividades do usuário com um log de auditoria detalhado, ajudando a identificar atividades suspeitas. <h3 class="wp-block-heading">24. Monitoramento de Tempo de Resposta e Uptime</h3> Receba notificações sobre lentidão ou tempo de inatividade do site para ações rápidas de correção. Essa é mais uma funcionaldade premkum, e de verdade, eu acho que vale a pena pagar os quase 50$ por ano. As vantagens valem muito mais do que isso. <figure class="wp-block-image size-full"><figcaption class="wp-element-caption">Algumas das funcionalidades premium. A tela era grande e eu peguei só um pedacinho</figcaption></figure> <h2 class="wp-block-heading">Meus insights finais</h2> O plugin de segurança para o WordPress All-In-One Security, ou AIOS, se preocupa de verdade com a segurança e oferece tudo que um site WordPress precisa para se proteger contra malwares, spams, bots maliciosos e outras infinitas vulnerabilidades. É claro que ele é apenas um plugin e não resolve todo o desenvolvimento web e as tecnologias colocadas na aplicação, mas é uma excelente forma de blindar seu conteúdo com diversas ferramentas poderosas de gestão. Se você precisa proteger seu site WordPress contra diversas ameaças de segurança, o AIOS pode ser uma ferramenta valiosa. Considere inclusive o premium, pois a empresa por trás é excelente e nunca tive problema algum com qualquer funcionalidade. <code>Nota editorial: Não ganhamos comissão de links e ferramentas selecionadas em nosso site. Não há qualquer tipo de interferência nas nossas opiniões trazidas aos leitores.</code> O post <a href="https://www.pinkandbrain.com/review-do-plugin-de-seguranca-wordpress-all-in-one-aios/">Review do plugin de segurança: WordPress All-In-One (AIOS)</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>. </article> <article> <h1>Buscando informações exclusivas das páginas: com o get_queried_object_id() no WordPress</h1> César Canteiro — Mon, 30 Dec 2024 14:17:46 +0000 No desenvolvimento de temas e plugins para WordPress, um dos desafios comuns que programadores enfrentam é garantir que as informações exibidas em uma página sejam coerentes com o template desenvolvido. Uma dessas situações por exemplo envolve a obtenção do título e do permalink de uma página. Você já deve ter usado funções como <code>the_title()</code> e <code>the_permalink()</code>, mas talvez tenha se deparado com problemas em que essas funções retornam valores inesperados, especialmente ao trabalhar com loops secundários na página, e os valores do título e permalink, que deveriam vir da págia atual, pegam de algum post do loop. É aqui que entra a importância de usar <code>get_queried_object_id()</code>. <h2 class="wp-block-heading">Por que usar get_queried_object_id()?</h2> A função <code>get_queried_object_id()</code> retorna o ID do objeto principal da consulta atual, ou seja, a página ou post que o WordPress está processando no momento. Com isso, você pode usar funções como <code>get_the_title()</code> e <code>get_permalink()</code> para obter informações confiáveis, sem depender do loop principal. Exemplo prático: <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)">PHP<pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly><?php echo get_the_title( get_queried_object_id() ); ?> <?php echo get_permalink( get_queried_object_id() ); ?></textarea></pre><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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><?php echo get_the_title( get_queried_object_id() ); ?> <?php echo get_permalink( get_queried_object_id() ); ?></code></pre>PHP</div> Essas linhas garantem que o título e o link correspondam à página ou post atual, mesmo que você tenha outros loops no código. <h2 class="wp-block-heading">Como get_queried_object_id() resolve esses problemas</h2> Ao usar <code>get_queried_object_id()</code>, você garante que está sempre trabalhando com o contexto principal da página atual, independente de outros loops ou consultas. No exemplo a seguir, no botão do Whatsapp que fica pinado em todas as páginas de um site, ao usar o <code>get_queried_object_id()</code> você irá garantir que as informações sejam daquela página exclusivamente, e não será influenciada por interferência de algum loop. <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)"><a href="https://www.pinkandbrain.com/elementos/html-hypertext-markup-language/" title="HTML">HTML</a><pre class="code-block-pro-copy-button-pre" aria-hidden="true"><textarea class="code-block-pro-copy-button-textarea" tabindex="-1" aria-hidden="true" readonly><a href="https://api.whatsapp.com/send/?text=<?php echo get_the_title( get_queried_object_id() ); ?> - <?php echo get_permalink( get_queried_object_id() ); ?>"></textarea></pre><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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><a href="https://api.whatsapp.com/send/?text=<?php echo get_the_title( get_queried_object_id() ); ?> - <?php echo get_permalink( get_queried_object_id() ); ?>"></code></pre>HTML</div> <h3 class="wp-block-heading">Vantagens</h3> <ul class="wp-block-list"> <li>Precisão: O título e o link sempre refletem a página atual.</li> <li>Evita conflitos: Funções globais como <code>the_title()</code> e <code>the_permalink()</code> não são influenciadas por loops secundários.</li> <li>Código mais limpo e reutilizável: Não é necessário criar workarounds manuais.</li> </ul> <hr class="wp-block-separator has-alpha-channel-opacity"/> <h2 class="wp-block-heading">Insights dos ratos</h2> O uso de <code>get_queried_object_id()</code> é top para garantir a consistência e a precisão dos dados exibidos quando você está desenvolvendo um tema ou plugin WordPress. Ele resolve problemas causados por loops secundários e torna o código mais confiável, especialmente em cenários complexos. Se você é um programador que trabalha com WordPress, adotar essa prática pode poupar muitas dores de cabeça e melhorar a qualidade do seu trabalho. 🚀 Se você precisa de ajuda com seu site WordPress entre em contato com a Pink and Brain. Somos ratos quando o assunto é desenvolvimento WordPress. O post <a href="https://www.pinkandbrain.com/get-queried-object-id-wordpress/">Buscando informações exclusivas das páginas: com o get_queried_object_id() no WordPress</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>. </article> <article> <h1>INP (Interaction to Next Paint): conheça a métrica das Core Web Vitals</h1> César Canteiro — Mon, 30 Dec 2024 11:00:00 +0000 O <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a> trouxe uma mudança significativa para as <a href="https://www.pinkandbrain.com/core-web-vitals-metricas-e-otimizacoes-para-seo/" title="Core Web Vitals">Core Web Vitals</a>, métricas essenciais que ajudam a mensurar a experiência do usuário em websites. A partir de março de 2024, a <a href="https://www.pinkandbrain.com/elementos/interaction-to-next-paint-inp/" title="Interaction to Next Paint (INP)">Interaction to Next Paint (INP)</a> substituiu a First Input Delay (FID), prometendo análises mais precisas e completas sobre a interatividade das páginas. As Core Web Vitals são métricas que o Google considera indispensáveis para uma boa experiência de página, indicando aos administradores de sites o que precisa ser melhorado. <h2 class="wp-block-heading">O que é a INP (Interaction to Next Paint)?</h2> A <a href="https://www.pinkandbrain.com/elementos/interaction-to-next-paint-inp/" title="INP">INP</a> é uma métrica projetada para medir todas as interações do usuário em uma página, considerando a mais lenta delas. Ela avalia o tempo desde a interação até a próxima pintura da tela (Next Paint), garantindo uma visão mais detalhada da experiência do usuário em comparação à FID, que mede apenas o atraso da primeira interação. <figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-27 is-layout-flex wp-block-gallery-is-layout-flex"> <figure class="wp-block-image size-full"></figure> </figure> <h3 class="wp-block-heading">Escala de desempenho da INP</h3> <ul class="wp-block-list"> <li>Bom: Abaixo de 200 ms.</li> <li>Precisa de melhorias: Entre 200 e 500 ms.</li> <li>Ruim: Acima de 500 ms.</li> </ul> Ao avaliar todas as interações, a INP reflete melhor o comportamento real dos usuários ao longo de sua jornada em uma página web. <h2 class="wp-block-heading">Por que a INP é mais eficaz que a FID?</h2> A FID mede apenas o atraso da primeira interação do usuário após o carregamento da página, o que limita sua capacidade de representar interações subsequentes. Já a INP considera: <ul class="wp-block-list"> <li>Todas as entradas do usuário: Não apenas a primeira, mas todas as interações ao longo da navegação.</li> <li>Duração total de eventos: Avalia o tempo necessário para processar cada interação e renderizar o próximo quadro.</li> <li>Agrupamento de interações lógicas: As interações relacionadas são agrupadas, considerando a interação mais lenta.</li> <li>Cobertura ao longo do ciclo de vida: Mede a responsividade durante toda a experiência do usuário na página.</li> </ul> Essas melhorias tornam a INP uma métrica mais abrangente e fiel às experiências reais dos usuários. <h2 class="wp-block-heading">Como surgiu a INP?</h2> <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> </figure> <h3 class="wp-block-heading">O início: 2021</h3> Em junho de 2021, o Google apontou as limitações da FID em um artigo do time do Chrome, destacando a necessidade de uma métrica mais robusta. Em novembro do mesmo ano, a métrica começou a ser testada de forma experimental, e a comunidade de desenvolvedores foi convidada a fornecer feedback. <h3 class="wp-block-heading">O nome oficial: 2022</h3> Em março de 2022, o nome <a href="https://www.pinkandbrain.com/elementos/interaction-to-next-paint-inp/" title="Interaction to Next Paint">Interaction to Next Paint</a> foi anunciado oficialmente. Segundo Jeremy Wagner, membro da equipe do Chrome: <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> 90% do tempo que um usuário passa em uma página ocorre após o carregamento. Portanto, medir a capacidade de resposta durante todo o ciclo de vida da página é essencial. </blockquote> <h3 class="wp-block-heading">Lançamento oficial: 2023</h3> Rick Viscomi e Annie Sullivan, em 2023, confirmaram que a INP será implementada definitivamente como métrica das Core Web Vitals em 2024. Até lá, ela estará disponível em ferramentas como PageSpeed Insights e Lighthouse com o status experimental. <h2 class="wp-block-heading">Benefícios de atender a INP</h2> A implementação da INP trará vantagens tanto para desenvolvedores quanto para usuários: <ul class="wp-block-list"> <li>Desenvolvedores: maior precisão na detecção de gargalos de interatividade, permitindo priorizar melhorias de desempenho.</li> <li>Usuários: experiências mais responsivas, reduzindo frustrações causadas por atrasos em interações.</li> </ul> Além disso, a métrica incentiva boas práticas de desenvolvimento, como feedbacks visuais rápidos e otimizações de <a href="https://www.pinkandbrain.com/elementos/javascript/" title="JavaScript">JavaScript</a> para evitar bloqueios desnecessários. <h2 class="wp-block-heading">Como ajustar seu site para atender a INP?</h2> Para garantir que seu site esteja atendendo as métricas Core Web Vitals: <ol class="wp-block-list"> <li>Use ferramentas de análise: o Lighthouse e o PageSpeed Insights já suportam a INP no modo experimental.</li> <li>Otimize seu JavaScript: reduza tarefas longas que possam atrasar a próxima pintura. Use técnicas de lazy, atrase ou tardie carregamentos, compacte arquivos, etc…</li> <li>Implemente feedbacks visuais rápidos: garanta que o usuário perceba imediatamente que sua interação foi registrada.</li> </ol> Quer ficar por dentro de mais novidades sobre SEO e Core Web Vitals? Siga a Pink and Brain e tenha acesso à conteúdos exclusivos dos ratos do digital. O post <a href="https://www.pinkandbrain.com/inp-interaction-to-next-paint-metrica-core-web-vitals/">INP (Interaction to Next Paint): conheça a métrica das Core Web Vitals</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>. </article> <article> <h1>Mobile first é uma ova! Design de marca e produto first</h1> César Canteiro — Mon, 23 Dec 2024 15:39:33 +0000 No mundo do design e desenvolvimento web, é comum ouvir a frase clichê: “Mobile first”. Desde que a adoção de dispositivos móveis explodiu, essa abordagem tem sido promovida como a solução definitiva para criar experiências digitais relevantes. Mas, na realidade, está na hora de repensar essa ideia. Antes de mergulhar no conceito de “mobile first”, é essencial entender o produto, criar diretrizes claras para a aplicação da marca e desenvolver soluções que realmente ressoem com as necessidades específicas de cada negócio. Por isso: Mobile First é uma OVA! Existem diversas empresas que querem ir para o ambiente digital, mas ainda não possuem referência visual de aplicação da marca nem para o mundo físico, imagina para a web, ou seja, precisam criar, e isso vem muito antes de um ptotótipo de página do site. Estudo marketing desde 2004 e já participei de centenas de projetos que nasceram no físico e foram para o digital, ou mesmo projetos que nasceram no digital de “qualquer forma”, e depois se lascaram para se remodelar: tiveram que repensar branding para “atualizar” suas interfaces. <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> Mobile first é uma ova! Antes de pensar em fazer um site, ou mesmo refatorar o antigo, as empresas precisam repensar suas estratégias de branding e produto, já que em muitos casos, não possuem diretrizes claras sobre o que fazem e onde querem chegar…. se o site vai ser de uma forma ou de outra, é o menor dos problemas. <cite>Césinha, Brain behind Pink and Brain</cite></blockquote> <h2 class="wp-block-heading">O que é “design de marca e produto first” no meu ponto de vista?</h2> Antes de sair criando um site novo, ou mesmo refatorando o atual, precisamos estabelecer uma base sólida que passa pela estratégia de branding, posicionamento de produto, ter um ótimo guia visual de aplicação da marca, tom e maneira de interagir com os usuários e planejamento estratégico para os próximos ciclos (anos, etc…): onde quero chegar! Trata-se de priorizar a compreensão profunda do produto, da marca e das regras de negócio antes de pensar em estar em qualquer dispositivo ou plataforma. Não adianta também construir uma experiência ótima para dispositivos móveis se ela não respeita os valores da marca, não resolve os desafios centrais do negócio com consistência, de forma a ser lembrado como “WOW que produto top”. Se a empresa não possui um plano de negócios, brand book, design system, enfim, nenhum material que norteie a criação dos protótipos web, como as pessoas entendem que podem criar algo substancial seja no mobile ou no desktop? Essa abordagem começa com perguntas fundamentais: <ul class="wp-block-list"> <li>Como está meu plano de negócios? meus desejos enquanto empresa?</li> <li>Possuo um brand book? ele é completo? Contempla aplicações web?</li> <li>Quem é o público alvo ou persona que quero atingir ao criar um site?</li> <li>Quais são as metas de negócio a serem alcançadas?</li> <li>Como a identidade visual da marca será traduzida para o digital?</li> <li>Quais são as particularidades do segmento em que a empresa atua?</li> <li>Como se comporta meu concorrente que já está na web?</li> <li>O que quero evidenciar e o que quero dar menos destaque?</li> <li>Para onde posso crescer? (para já contemplar esse crescimento e não precisar refazer templates no futuro novamente)</li> <li>Etc..</li> </ul> Responder a essas questões certamente ajudará a criar uma estratégia robusta de aplicação da marca, passando pelos protótipos das páginas, com aplicações visuais concisas, tom de comunicação e elementos chave para páginas consistentes. <h2 class="wp-block-heading">O mito do “mobile first”</h2> Não é que o conceito de “mobile first” seja irrelevante. De fato, vivemos em um mundo onde a maior parte do tráfego na internet vem de dispositivos móveis. No entanto, essa abordagem não é universalmente aplicável. Muitas empresas ainda não estão na intenet, não possuem clareza de aplicação da marca seja no mundo físico ou digital, ou, se já estão na internet, podem depender significativamente do tráfego desktop, especialmente em setores como B2B, educação e tecnologia, jurídicos, governamental, onde os profissionais preferem acessar informações detalhadas em telas maiores. Ao focar exclusivamente no “mobile first”, você corre o risco de criar soluções que: <ul class="wp-block-list"> <li>Ignoram as necessidades do usuário desktop: uma experiência ruim no desktop pode afastar clientes valiosos.</li> <li>Sacrificam a identidade visual da marca: um design excessivamente simplificado para caber no móvel pode comprometer a comunicação da marca.</li> <li>Desconsideram o contexto do uso: nem todo produto ou serviço é consumido da mesma forma em dispositivos diferentes.</li> </ul> <h2 class="wp-block-heading">Como criar diretrizes fortes para aplicação da marca na web?</h2> Para que o design de marca e produto seja realmente eficaz, é preciso pensar além do layout. Aqui estão alguns passos cruciais para desenvolver diretrizes consistentes: <ol start="1" class="wp-block-list"> <li>Definir a essência da marca: quais são os valores centrais? Quais cores, fontes e elementos visuais representam melhor a identidade da empresa?</li> <li>Estabelecer a hierarquia da informação: pense em como os usuários interagem com o conteúdo no desktop e no mobile. Ajuste conforme necessário, sem sacrificar o design.</li> <li>Criar protótipos responsivos: prototipagem é mais do que ajustar tamanhos de tela. É sobre garantir que cada versão ofereça uma experiência consistente e impactante.</li> <li>Integrar as regras de negócio: se o produto tem particularidades, como integrações ou funções específicas, elas devem ser priorizadas no design.</li> <li>Testar com usuários reais: avalie como diferentes perfis de público interagem com a aplicação da marca e os elementos do produto em dispositivos variados.</li> </ol> Se você não tem um guide de marca e nem sabe onde quer chegar, você precisa voltar alguns passos e organizar as ideias. Meu conselho de amigo: não gaste dinheiro e tempo fazendo um site ou refatorando o atual sem ter diretrizes claras de marca e produto. Você pode até cirar algo legal para ser lançado, mas em muito breve irá precisar alterar, atualizar e muitas vezes, fazer novamente. Cansei de ver casos assim. <blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"> Gaste seu tempo e dinheiro com branding e produto. Você vai economizar muito dinheiro para o futuro, que poderão pagar o desenvolvimento de 20 sites ou mais. <cite>Césinha</cite></blockquote> <h2 class="wp-block-heading">Case: Essencial Aparelhos Auditivos</h2> A Essencial Aparelhos Auditivos chegou até nós em outubro de 2023 com um site feito em Wix, gastando em média 10 mil reais por mês em campanhas de <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a> <a href="https://www.pinkandbrain.com/elementos/ads/" title="Ads">Ads</a>, que levavam o tráfego diretamente para uma landing page “horrível”. O primeiro contato das pessoas eram com essa prateleira toda desorganizada, feia, mal montada e sem <a href="https://www.pinkandbrain.com/elementos/storytelling/" title="storytelling">storytelling</a> nenhum. <h3 class="wp-block-heading">O que fizemos antes de prototipar as telas do novo site?</h3> <ul class="wp-block-list"> <li>Convecemos os gestores a recriar a marca para aplicação na web, pois a agência que tinha feito no passado não havia contemplado o futuro da empresa;</li> <li>Vetorizamos o logo, criamos ícones e elementos de grafismo diversos do absoluto zero com a cara da empresa;</li> <li>Criamos referências visuais próprias de aplicação dos aparelhos auditivos, inclusive com modelagem 3D;</li> <li>Criamos um projeto de hierarquia da informação, onde pudessemos ter clareza na prototipação e da navegação do site no futuro;</li> <li>Criamos referências sólidas dos profissionais que trabalham na empresa, visando tornar a marca mais próxima das pessoas, ao invés de só vender aparelhos auditivos</li> <li>Estudamos dezenas de concorrentes pelo Brasil e pelo mundo (e digo que vimos 90% dos players com os problemas citados acima: sem força de marca, sites horrosos, comunicação falha, etc…)</li> <li>SEO foi o epicentro da contrução dos componentes do site, além de trazer uma frente editorial forte onde a aquisição orgânica estivesse baseada no apoio aos deficientes auditivos, e não somente em pautas de bico de funil (venda).</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">Amostra do site da Essencial</figcaption></figure> Só depois de tudo isso estar bem esclarecido é que iniciamos a prototipagem das telas. E sim, começamos pelo mobile, mas sempre com o desktop em mente. Afinal, o desktop oferece maior clareza para exibir, destacar e comparar modelos. Além disso, 90% dos usuários alternam entre dispositivos antes de realizar uma compra, especialmente quando se trata de produtos com valores acima de 10 mil reais, pois essa decisão exige maior análise e consideração. O site foi lançado em dezembro de 2023 e desde então vem batendo recordes atrás de recordes, e se tornou a referência nacional em assuntos relacionados a saúde auditiva. O movimento criado em 2023 trouxe frutos carnudos para a empresa. A estratégia de colocar o SEO no centro das ações transformou a Essencial em uma referência no Google, fortalecendo sua marca e autoridade. Basta visitar os sites dos concorrentes para entender do que estou falando: nenhum deles investiu no trabalho prévio de design de marca e produto. Como resultado, possuem sites desenvolvidos por agências que não capturam e entregam o valor necessário para se destacar. Se você digitar “<a href="https://www.essencialaparelhosauditivos.com/">Aparelhos auditivos</a>“, “Aparelho Auditivo”, a empresa já é a top 1 no Google, mas se digitar também “<a href="https://www.essencialaparelhosauditivos.com/rg-pcd-o-que-e-como-emitir-e-quais-os-beneficios/">RG PCD</a>“, “<a href="https://www.essencialaparelhosauditivos.com/cnh-para-surdos-entenda-os-direitos-das-pessoas-com-deficiencia/">CNH para surdo</a>“, e milhares de outros temas, eles dominam, e são lembrados p´ro ativamente pelos usuários web. <figure class="wp-block-gallery has-nested-images columns-1 is-cropped wp-block-gallery-30 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> <figure class="wp-block-image size-large"></figure> </figure> Uma informação relevante: eles costumavam vende de 3 a 5 aparelhos por semana e atualmente já estão vendendo mais de 50 unidades/mês, e projetam vender mais de 100 unidades já no primeiro semestre de 2025. <h2 class="wp-block-heading">Por que o desktop ainda importa?</h2> Embora o mundo esteja cada vez mais “mobile-centric”, ignorar o desktop pode ser um erro caro. Aqui estão alguns motivos: <ul class="wp-block-list"> <li>Setores específicos dependem do desktop: negócios que vendem soluções complexas ou oferecem muito conteúdo técnico geralmente veem maior engajamento no desktop.</li> <li>Maior potencial de conversão: compras de alto valor ou decisões empresariais são frequentemente feitas em desktops, onde os usuários têm mais espaço para analisar informações.</li> <li>Melhor utilização de dados: interfaces de desktop permitem exibir relatórios, dashboards e outras visualizações detalhadas que são mais difíceis de consumir no móvel.</li> </ul> <h2 class="wp-block-heading">Não seja mais um “tolo” que replica o jargão “mobile first”: é hora de repensar prioridades</h2> Antes de adotar cegamente o “mobile first”, faça uma análise profunda das necessidades do seu negócio, do público e da marca. Um “design de marca e produto first” cria a base para experiências digitais verdadeiramente impactantes, que respeitam a identidade da empresa e atendem às expectativas dos usuários, independentemente do dispositivo que utilizam. No final das contas, o que importa é como sua marca se comunica e como o produto resolve problemas reais. O dispositivo é apenas um canal – e não o ponto de partida. Se você precisa de mentes diferenciadas no seu projeto, entre em contato conosco e venha tomar um café digital. Somos ratos quando o assunto é desenvolvimento web e marketing digital. O post <a href="https://www.pinkandbrain.com/mobile-first-e-uma-ova-design-de-marca-e-produto-first/">Mobile first é uma ova! Design de marca e produto first</a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>. </article> <article> <h1>Entenda o javascript:void(0) e sua relação com o elemento <a></h1> Marcelino Junior — Thu, 05 Dec 2024 21:47:28 +0000 Certamente, se você é desenvolvedor front-end já se deparou com com alguns documentos <a href="https://www.pinkandbrain.com/elementos/html-hypertext-markup-language/" title="HTML">HTML</a> utilizando o atributo href preenchido com o valor <code><a href="https://www.pinkandbrain.com/elementos/javascript/" title="javascript">javascript</a>:void(0)</code> dessa forma dentro de um elemento <code><a></code>: <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)">HTMLClique em mim, mas nada acontecerás!</a>" 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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><a href="javaScript:void(0)">Clique em mim, mas nada acontecerás!</a></code></pre>HTML</div> Ao clicar no link você previne o comportamento de levar o usuário para outra página ou mesmo pular para o início do documento HTML se usar o <code>#</code> como valor do atributo, e dependendo de como está levando o desenvolvimento da sua aplicação, pode ser uma opção até você concretizar outras ações com aquele elemento de linkagem. Quando clicado, a função JavaScript <code>void</code> é executada, que retorna <code>undefined</code> e não gera efeito na página. O propósito de usar <code>javascript:void(0)</code> como o valor de <code>href</code> é evitar que a página seja recarregada, movimentada até uma âncora e a URL não seja alterada quando o link for clicado e nenhuma ação precisa acontecer. <h2 class="wp-block-heading">O que é o javascript: no JS?</h2> Uma maneira de incorporar código JavaScript diretamente no documento HTML é utilizar o valor do atributo href de um hyperlink como o valor de um manipulador de eventos, como onclick. Por exemplo, se você tem um link que precisa executar uma função JavaScript específica quando clicado, em vez de navegar para uma página diferente, você pode usar a pseudo URL javascript: <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)">HTMLClique para executar a função!</a>" 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><pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><a href="javascript:minhaFuncao()">Clique para executar a função!</a></code></pre>HTML</div> Quando o usuário clica no link, a função JavaScript <code>minhaFuncao()</code> será executada e o link não terá o comportamento de direcionar o usuário para outro lugar. <h2 class="wp-block-heading">O que acontece se usar apenas o # no href do <a>?</h2> Utlizar o <code>#</code> como valor do atributo href irá automaticamente influenciar no comportamento pós clique do elemento <code><a></code>, jogando o usuário para o topo do documento HTML, ou seja, movimentado sua tela para o início da página. Se você utilizar o <code>#</code> com algum ID que nomeu qualquer seção, div, ou mesmo qualquer elemento HTML, o usuário ao clicar, srá levado até a posição dam página onde o elemento é referenciado. <h2 class="wp-block-heading">Insights finais dos ratos</h2> O <code>javascript:void(0)</code> é usado como uma maquiagem para evitar comportamentos padrões do HTML, especificamente no atributo href dos elementos de linkagem <code><a></code>. É importante notar que este método pode ser um risco de segurança, pois permite que códigos potencialmente maliciosos sejam executados no computador do usuário, por isso deve ser usado com cautela. Ah.. e tem uma outra informação que as ferramentas de análise de semântica e acessibilidade vão ficar reportando que o link não tem uma “âncora”. Se for usar, use com cautela, mas minha recomendação é evita o uso de <code><a></code> e a jutilização de outras tags como <code><button></code>, ou mesmo um <code></code>. O post <a href="https://www.pinkandbrain.com/entenda-o-javascript-void-0-e-sua-relacao-com-o-elemento-de-linkagem-a-no-html/">Entenda o javascript:void(0) e sua relação com o elemento <a></a> apareceu primeiro em <a href="https://www.pinkandbrain.com">Pink and Brain</a>. </article> <article> <h1>HTML básico e semântico: header, nav, main, aside e footer</h1> César Canteiro — Thu, 05 Dec 2024 21:31:51 +0000 Muito se fala sobre semântica <a href="https://www.pinkandbrain.com/elementos/html-hypertext-markup-language/" title="HTML">HTML</a>, boas práticas de formatação HTML, desenvolvimento HTML front =-end enxuto para SEO, e vou explicar como começar uma estrutura básica de um site usando HTML5, a versão mais recente da linguagem de marcação padrão para a criação de páginas web. Vamos abordar diferentes elementos e recursos do HTML5 que ajudarão a construirpáginas bem vistas pelos <a href="https://www.pinkandbrain.com/elementos/crawler/" title="crawler">crawler</a> da internet, em especial o <a href="https://www.pinkandbrain.com/elementos/google/" title="Google">Google</a>, tornando o código eficiente, tanto para os robôs quanto para os usuários, em especial que sofrem com alguma deficiência visual ou auditiva. <h2 class="wp-block-heading">Estrutura Básica de um Documento HTML5</h2> Um documento HTML5 possui uma estrutura básica que consiste em várias partes. Para entender melhor, vamos detalhar cada uma delas: <h3 class="wp-block-heading">Doctype</h3> O doctype é a primeira linha de um documento HTML5 e informa ao navegador que o documento está em conformidade com a especificação HTML5. <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:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)">HTML" style="color:#f6f6f4;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><pre class="shiki dracula-soft" style="background-color: #282A36" tabindex="0"><code><!DOCTYPE html></code></pre>HTML</div> <h3 class="wp-block-heading">Elemento html</h3> O elemento <code><html></code> é o elemento raiz de um documento HTML e contém todos os outros elementos. <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:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)">HTML ... </html>" style="color:#f6f6f4;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><pre class="shiki dracula-soft" style="background-color: #282A36" tabindex="0"><code><html> ... </html></code></pre>HTML</div> <h3 class="wp-block-heading">Elemento head</h3> O elemento <code><head></code> contém informações sobre o documento, como o título da página, metadados e referências a arquivos CSS e <a href="https://www.pinkandbrain.com/elementos/javascript/" title="JavaScript">JavaScript</a>. <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:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)">HTML <meta charset="UTF-8"> <title>Pink and Brain | Especialistas em SEO e Audiência Digital ' style="color:#f6f6f4;display:none" aria-label="Copy" class="code-block-pro-copy-button"><head> <meta charset="UTF-8"> <title>Pink and Brain | Especialistas em SEO e Audiência Digitaltitle> <link rel="stylesheet" href="estilos.css"> head> HTML Elemento body O elemento contém o conteúdo visível do documento, como texto, imagens, links e outros elementos HTML. HTML<body> ... body> HTML Organização da estrutura de um site em HTML5 Ao criar um site em HTML5, é importante organizar o conteúdo de maneira clara e fácil de navegar. Veja uma ideia base de como estruturar seu HTML semânticamente, vindo da estrutura principal. Estrutura semântica base de um documento HTML Entenda os seguintes elementos, podemos estruturar o site de forma eficiente: Cabeçalho O cabeçalho é geralmente colocado no topo da página e contém informações de identificação do site, como o logotipo e o slogan. Podemos utilizar o elemento para envolver o conteúdo do cabeçalho. HTML<header> <h1>Meu logoh1> <nav> <ul> <li><a href="#">Inícioa>li> <li><a href="#">Sobrea>li> <li><a href="#">Serviçosa>li> <li><a href="#">Contatoa>li> ul> nav> header> HTML Barra de Navegação A barra de navegação é usada para permitir que os usuários naveguem pelo site. Podemos criar uma barra de navegação utilizando o elemento . Dentro do , podemos usar elementos de lista, como e , para criar os links de navegação. HTML <nav> <ul> <li><a href="#">Inícioa>li> <li><a href="#">Sobrea>li> <li><a href="#">Serviçosa>li> <li><a href="#">Contatoa>li> ul> nav> HTML Conteúdo principal O conteúdo principal é o elemento central do site, onde a maior parte do conteúdo é exibida. Podemos envolver o conteúdo principal com o elemento . HTML<main> <h2>Sobreh2> Conheça os ratos do marketing digital e do desenvolvimento web.p> <h2>Serviçosh2> <ul> <li>Serviço 1li> <li>Serviço 2li> <li>Serviço 3li> ul> <img decoding="async" src="imagem.jpg" alt="Imagem do site"> main> HTML Conteúdo complementar A barra lateral é opcional e geralmente é usada para exibir informações adicionais, como links relacionados, menus de navegação secundários ou anúncios. Podemos criar uma barra lateral usando o elemento . HTML<aside> <h3>Links úteish3> <ul> <li><a href="#">Link 1a>li> <li><a href="#">Link 2a>li> <li><a href="#">Link 3a>li> ul> aside> HTML Rodapé O rodapé é colocado na parte inferior da página e geralmente contém informações adicionais, como informações de contato, links de política de privacidade ou direitos autorais. Podemos usar o elemento para envolver o conteúdo e criar o rodapé. HTML<footer> © 2023 Meu Site. Todos os direitos reservados.p> footer> HTML Dicas para uma boa estrutura de um site em HTML5 Use uma estrutura semântica: isso melhora a acessibilidade e o SEO do site. Mantenha o código HTML limpo e bem organizado: facilita a manutenção e a leitura do código. Utilize CSS para estilizar o site: torna o site mais atraente visualmente. Teste o site em diferentes navegadores e dispositivos: garantir a compatibilidade é crucial. Considere a usabilidade e a experiência do usuário: projetar uma navegação e layout intuitivos é fundamental. Exemplo completinho Aqui está um exemplo básico de estrutura de um site: HTMLDOCTYPE html> <html> <head> <title>Pink and Brain | Especialistas em SEO e Audiência Digitaltitle> <link rel="stylesheet" href="estilos.css"> head> <body> <header> <h1>Meu Siteh1> Bem-vindo ao Meu Site incrível!p> <nav> <ul> <li><a href="#">Inícioa>li> <li><a href="#">Sobrea>li> <li><a href="#">Serviçosa>li> <li><a href="#">Contatoa>li> ul> nav> header> <main> <h2>Sobreh2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor lacus sit amet ipsum lobortis, eu cursus sapien facilisis. Vivamus malesuada arcu lacus, sed efficitur nulla aliquam in.p> <h2>Serviçosh2> <ul> <li>Serviço 1li> <li>Serviço 2li> <li>Serviço 3li> ul> <img src="imagem.jpg" alt="Imagem do site"> main> <aside> <h3>Links úteish3> <ul> <li><a href="#">Link 1a>li> <li><a href="#">Link 2a>li> <li><a href="#">Link 3a>li> ul> aside> <footer> © 2024 Meu Site. Todos os direitos reservados.p> footer> body> html> HTML Ao utilizar corretamente a estrutura e os recursos do HTML5, é possível criar sites modernos, acessíveis e atraentes. Lembre-se de adaptar a estrutura às necessidades do seu projeto e explorar outros recursos avançados disponíveis no HTML5 para aprimorar ainda mais a experiência do usuário. Essas são apenas algumas tags semânticas do HTML, existem outras centenas para você se aprofundar. O post HTML básico e semântico: header, nav, main, aside e footer apareceu primeiro em Pink and Brain.

Conteúdos sobre Desenvolvimento Web | 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

Como contratar SEO: time interno, agência ou consultoria?

Prós e contras entre SEO Interno, Agência e Consultoria

Como funciona gerir um time de SEO Interno?

Custos Envolvidos

Estilo de Trabalho

Tempo Alocado

Vantagens

Desvantagens

Como funcionam as agências de SEO?

Custos

Estilo de Trabalho

Tempo Alocado

Vantagens

Desvantagens

Como funciona uma Consultoria de SEO?

Custos

Estilo de Trabalho

Vantagens

Desvantagens

SEO Freelancer: uma alternativa?

Como escolher a melhor forma de contratar SEO?

Manifesto César e Marcelino da Pink and Brain

Falhas clássicas nas estratégias de SEO (e o que fazer)

Três principais falhas nas auditorias de SEO

Valor limitado para os tomadores de decisão

Desconexão com a estratégia de marketing

Estaticidade e pontualidade

Mas afinal, o que fazer nestes casos? Dicas de ouro

Foco nas regras do negócio, não em métricas em si

Fácil compreensão para toda a equipe

Foco nas ações de maior impacto

Abandone as auditorias automáticas e superficiais

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

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)

Perguntas frequentes (FAQ)

SEO: o que considerar?

Acessibilidade e UX

Compatibilidade

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

O que são redirects?

Quando usar redirects?

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)