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

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

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

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

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

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

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

Impacto por simples mudança na hierarquia dos elementos

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

Uso de tags semânticas

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

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

Velocidade de carregamento da página

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

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

Impactos indiretos de um redesign

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

Responsividade e Mobile-First Indexing

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

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

Experiência do Usuário (UX)

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

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

Core Web Vitals

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

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

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

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

Digo isso a 10 anos aka. Césinha

Redirecionamentos e URLs

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

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

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

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

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

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

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

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

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

Melhorias na navegação interna

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

Conteúdo mais acessível

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

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

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

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

Pink and Brain

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

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

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

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

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

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

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

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

Mas lembre-se:

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

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

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

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

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:

// 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'));

Este script faz o seguinte:

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

Testando o script

Para testar o script:

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

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.

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

// 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.');
}

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.

Essa tag, em conjunto com <summary>, é 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 <details>?

O <details> cria um container que pode ser aberto ou fechado pelo usuário. Dentro dele, o <summary> funciona como o título clicável.

Exemplo básico:

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

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 <details> 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 <details> (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:

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

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 <details> 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 <details>?Sim. O Google já confirmou que considera o conteúdo dentro de <details> 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 <details> está no HTML e tende a ser rastreável normalmente.
• Use <summary> 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 <details>:

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 <summary> específicos, não genéricos (“Clique para abrir”).
• Evite aninhar muitos <details> dentro de <details> 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.

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

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

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

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

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

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

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

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

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

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

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

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

3. Falta de escalabilidade

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

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

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

4. Segurança

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

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

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

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

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

Quando usar Elementor:

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

Quando evitar Elementor:

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

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

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

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

A reconstrução traz benefícios como:

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

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

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

Site no mercado de crédito

Site no mercado de saúde auditiva

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

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

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

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

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

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

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

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

Mas o SEO não morreu. Ele apenas se transformou — como sempre fez. E, mais do que nunca, exige estrutura, inteligência editorial, base técnica sólida e clareza de propósito.

SEO não é buzzword, é base

Em 2025, o SEO se tornou quase um guarda-chuva de siglas:

• GEO: Generative Engine Optimization, o SEO pensado para respostas por IA.
• AEO: Answer Engine Optimization, o SEO para FAQs, snippets e resumos.
• AIO: AI Optimization, adaptação de conteúdo para interagir com LLMs como Gemini e ChatGPT.
• LLMSEO: o SEO orientado para treinar modelos de linguagem e ser citado por eles.

Aparentemente, cada nova feature do Google ou ferramenta de IA cria sua própria “nova disciplina”. Mas no fundo, tudo se resume à mesma essência: estruturar a informação da melhor forma possível para que ela seja compreendida, indexada, citada e valorizada — seja por humanos, seja por máquinas.

Não importa se a resposta será exibida em uma AI Overview, em um box de snippet, numa posição zero ou em um carrossel. O conteúdo que aparece é sempre aquele que foi bem feito. Com semântica, com técnica, com propósito.

Quem tenta inventar uma nova roda, muitas vezes, só está maquiando o básico que nunca foi feito.

Se antes otimizávamos para ranquear em uma lista de links, agora otimizamos para ser citados como fontes em resumos automatizados, caixas de resposta, overviews e assistentes de IA.

Esse novo cenário ganhou vários nomes… uma tentativa de rotular a prática de escrever pensando nos mecanismos de resposta automática, e não apenas no ranqueamento tradicional. Mas vamos ser francos: GEO, AIO, AEO, LLMSEO nada mais é do que SEO bem feito para um novo contexto.

Bots são todos bots, são máquinas, que buscam informações, contextos, estruturas…

César Canteiro

— e nada disso é novo para quem sempre levou SEO a sério.

O paradoxo da nova SERP: visibilidade sem clique

Desde abril de 2025, cerca de 90% das buscas no Google no Brasil já exibem AI Overviews — respostas geradas por IA que ocupam o topo da página e sintetizam a informação sem necessidade de clique. Resultado? O tráfego orgânico cai, mas a visibilidade explode. Estamos diante de uma era em que o usuário consome conteúdo sem acessar o site.

Essa mudança exige que repensemos métricas, formatos e estratégias. Como afirmou Martin Splitt, do time do Googlebot:

Os cliques podem diminuir, mas a conversão acontece mais adiante na jornada — mesmo sem um clique. E os cliques que ainda chegam são os de maior potencial de conversão.

Completo

O desafio, portanto, não é mais gerar cliques a qualquer custo, mas construir autoridade para ser citado pelas máquinas e lembrado pelas pessoas.

A briga dos publishers e a ameaça da invisibilidade

Enquanto a visibilidade cresce, o controle sobre ela escapa. Publishers do mundo todo vivem um paradoxo cruel:

• Seus conteúdos são usados por IAs para montar respostas
• Suas marcas ganham alcance
• Mas os cliques e a receita publicitária desaparecem

E o pior: todo esse scrapping por parte dos bots das AIs, sem remuneração, sem autorização formal e muitas vezes sem citação da fonte.

Quem vai pagar pela informação que treina, abastece e sustenta a IA?

Na Europa, esse dilema virou política pública. A Diretiva de Direitos Autorais da UE exige que plataformas negociem remuneração com veículos jornalísticos. França e Alemanha já implementaram taxas e modelos de compensação — mas o movimento ainda engatinha no resto do mundo.

A Cloudflare declarou guerra aos rastreadores de IA

Em 1º de julho de 2025, a Cloudflare — maior CDN do planeta — bloqueou por padrão todos os rastreadores de IA em sites novos.

Foi o início de um movimento chamado internamente de “O Dia da Independência do Conteúdo”.

A partir de agora, quem quiser permitir que LLMs acessem seu site precisa ativar isso manualmente. A inversão do padrão expõe uma tensão crescente: se as IAs querem consumir o conteúdo alheio, vão precisar pedir licença.

O debate está só começando — mas a pressão por regulação e remuneração é irreversível.

Cuidado com os falsos profetas

No vácuo dessa transição, floresce um novo perfil de guru digital: aquele que transforma hype em fórmula mágica. Prometem vencer a IA com prompts secretos, “técnicas ocultas” e scripts milagrosos. Mas ignoram o óbvio: não existe atalho para ser referência.

SEO continua sendo sobre:

• Estrutura semântica (HTML limpo, heading tags corretas, linkagem inteligente)
• Conteúdo útil, profundo e confiável
• Presença técnica irrepreensível
• Experiência do usuário e consistência editorial

Como disse Ryan Jones, VP de SEO da Razorfish:

Não se trata mais da consulta em si. Trata-se da relevância semântica em relação ao tema.

Ryan Jones

Mais presença, menos dependência

Marcas inteligentes estão aprendendo a viver além do clique. Investem em canais proprietários como newsletters com matérias completas, conteúdos nativos no WhatsApp, relatórios exclusivos e produtos editoriais com valor real. O objetivo não é mais atrair para o site a qualquer custo — mas servir melhor a audiência onde ela já está.

E uma coisa é verdade…

O swell de Nazaré com ondas perfeitas de tráfego orgânico parece ter seus dias contados.

O conteúdo que aparece é o que merece

Seja para humanos ou IAs, o conteúdo que se destaca é aquele:

• Bem estruturado, quando longos possuem sumário (TOC) e subtítulos hierarquizados
• Que usa listas, tabelas, blocos de citação e elementos visuais bem otimizados
• Com heading tags corretas (sem negrito fake em lugar de <h2>)
• Com negritos estratégicos nos primeiros parágrafos usando <strong> (e não só para estética)
• Com imagens leves, bem nomeadas e com alt text consistente
• Com linkagem interna consciente e construção semântica densa

E o melhor? Tudo isso está ao seu alcance, nos editores de conteúdos como o do WordPress. Só precisa ser feito com intenção.

Fazer SEO como nunca… do mesmo jeito de sempre

O SEO moderno não exige truques — exige excelência. A IA não cria autoridade: ela replica, interpreta e cita quem já tem. Se o seu conteúdo é confiável, bem escrito, escaneável e referenciado, você não precisa implorar para ser citado. Você será.

• O que era tático virou estrutural.
• O que era otimização virou posicionamento de marca.
• O que era “post de blog” virou fonte da verdade para sistemas que respondem perguntas.

A nova era do SEO não é feita de truques, nem de gurus. É feita de quem entrega valor real, com técnica e consistência.

Por isso, antes de pensar em GEO ou AIO, pense em fazer o dever de casa.

O post GEO, AIO, AEO? O novo SEO? os velhos erros e os falsos profetas apareceu primeiro em Pink and Brain.

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 tráfego orgânico, aquele oriundo de pesquisas no Google. 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, CDN, tamanho do HTML, 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.

Por que escolher o CMS WordPress para o seu site?

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 blog, 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.

Ter um site em WordPress melhora automaticamente a posição no Google?

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 autoridade do domínio, 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.

Dicas de ouro para otimizar seu site WordPress para fins de SEO

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.

Fuja do Elementor e crie um tema autoral para o seu negócio

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.

Utilize JavaScript puro ao invés de recursos terceiros como o JQuery

Deixar de utilizar o jQuery para utilizar JavaScript 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 indexação 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.

Reponsividade ao invés de desenvolver interfaces separadas

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 mobile-first, 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 site no subdomínio “m.” 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.

Somos ratos quando o assunto é migração de sites, m. para www.

Otimize o SEO On-page: tags essenciais, title, description, imagem de destaque, densidade das palavras-chave no contexto

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.

Otimize suas imagens (a tal boa prática em imagens)

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:

• Nomenclatura;
• Formato;
• Peso;
• Atributos Alt e Title;
• Legenda.

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 (crawlers 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 loading="lazy" para que não atrapalhem a renderização do HTML.

Melhore a velocidade do seu site

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.

Sites WordPress podem ter boas notas de classificação no Core Web Vitals?

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

SEO técnico: a fundação da sua obra

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 Google Search Console para verificar se as páginas importantes estão sendo indexadas e se não há erros que possam afetar seu ranking.

Certificado SSL e o HTTPS

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.

Foque na experiência do usuário

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.

Atualize seu conteúdo regularmente

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.

Monitore seu desempenho

Como dito, monitore o desempenho do seu site com ferramentas como o Google Analytics e o Google Search Console 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.

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 Pink and Brain. Somos ratos quando o assunto é criar sites otimizados em WordPress.

O post Dicas essenciais de otimizações para SEO em sites WordPress apareceu primeiro em Pink and Brain.

O que são tags HTML semânticas?

Tags semânticas são elementos do HTML que possuem um significado específico, indicando o tipo de conteúdo que elas contêm. Diferente das tags genéricas como <div> e <span>, que apenas agrupam elementos sem atribuir um significado, as tags semânticas descrevem explicitamente o propósito do conteúdo.

Exemplos de tags semânticas incluem

• <header> – Define a seção de cabeçalho da página ou de um artigo.
• <nav> – Representa um bloco de navegação, geralmente usado para menus.
• <section> – Define uma seção temática dentro de um documento.
• <article> – Indica um conteúdo independente, como um post de blog ou uma notícia.
• <aside> – Utilizado para conteúdo complementar, como barras laterais e widgets.
• <footer> – Marca o rodapé de uma página ou seção.
• <main> – Define o conteúdo principal da página, evitando elementos repetitivos como menus e rodapés.
• <figure> – Agrupa elementos gráficos como imagens, ilustrações e tabelas.
• <figcaption> – Define a legenda de um elemento <figure>.
• <mark> – Destaca um trecho de texto importante.
• <time> – Representa datas e horários de forma compreensível para humanos e máquinas.
• <details> – Cria uma seção de conteúdo expansível/colapsável.
• <summary> – Define o rótulo visível de um elemento <details>.
• <address> – Representa informações de contato, como endereço de e-mail, telefone e localização.
• <dialog> – Define uma caixa de diálogo ou janela modal interativa.
• <cite> – Indica a citação de uma fonte.
• <blockquote> – Define uma citação em bloco, usada para trechos de textos externos.
• <code> – Representa um trecho de código de programação.
• <em> – Dá ênfase ao texto, geralmente exibindo-o em itálico.
• <strong> – Indica um texto de alta importância, geralmente exibindo-o em negrito.

Como as tags semânticas melhoram o SEO técnico

Melhor compreensão pelo Google

Os motores de busca utilizam crawlers (robôs de indexação) para entender a estrutura de um site. Quando um site utiliza tags semânticas corretamente, o Google e outros mecanismos de pesquisa conseguem identificar com mais precisão qual parte do conteúdo é relevante para determinada busca.

Por exemplo, se um artigo estiver envolto na tag <article>, o Google entende que aquele bloco de texto representa um conteúdo completo e independente, facilitando sua exibição nos resultados de pesquisa.

Melhora na acessibilidade

As tags semânticas também são importantes para leitores de tela utilizados por pessoas com deficiência visual. Esses leitores utilizam as tags para fornecer uma experiência de navegação mais fluida e compreensível, o que melhora a acessibilidade do site e pode contribuir para um melhor ranqueamento no Google.

Facilidade na indexação

Quando os robôs de busca analisam um site com HTML bem estruturado, a indexação ocorre de maneira mais eficiente. Tags como <header>, <main>, <article>, <section> e <footer> ajudam os motores de busca a diferenciar seções importantes da página, melhorando a forma como o conteúdo é exibido nos resultados da pesquisa.

Destaque nos resultados de busca

O Google exibe rich snippets (fragmentos ricos) nos resultados de pesquisa com base em uma estrutura HTML bem definida. Isso pode incluir breadcrumbs, avaliações, receitas e outros dados estruturados. O uso correto de tags semânticas facilita a interpretação desses dados pelos motores de busca, aumentando as chances de um site aparecer com informações mais atrativas nos resultados.

Melhoria na experiência do usuário (UX)

Um código HTML mais organizado e semântico melhora a experiência do usuário ao tornar o conteúdo mais claro e navegável. Isso reduz a taxa de rejeição e aumenta o tempo de permanência no site, fatores que influenciam positivamente o SEO.

Erros comuns e melhores práticas

Uso excessivo de <div> em vez de tags apropriadas

Muitos desenvolvedores ainda utilizam <div> para estruturar toda a página. Isso prejudica a semântica e a acessibilidade. Sempre que possível, use tags apropriadas como <section>, <article>, <header> e <nav>.

Evitar aninhamento inadequado de tags semânticas

Evite estruturas incorretas, como um <footer> dentro de um <article>. Certifique-se de seguir a hierarquia lógica do conteúdo.

Certificar-se de que <main> aparece apenas uma vez por página

A tag <main> deve ser única e conter apenas o conteúdo principal da página, sem repetir menus ou rodapés.

Comparação entre HTML antigo e HTML semântico

Essa abordagem melhora a legibilidade do código, tornando-o mais organizado e compreensível tanto para desenvolvedores quanto para motores de busca.

Exemplo prático de uso de tags semânticas

Aqui está um exemplo de estrutura de código HTML utilizando tags semânticas para um blog:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog de Tecnologia</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Início</a></li>
                <li><a href="#">Artigos</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>O Futuro da Inteligência Artificial</h2>
            <p>A inteligência artificial está revolucionando diversas indústrias...</p>
        </article>

        <aside>
            <h2>Artigos Relacionados</h3>
            <ul>
                <li><a href="#">Machine Learning e seu impacto</a></li>
                <li><a href="#">Chatbots inteligentes</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2025 Blog de Tecnologia - Todos os direitos reservados.</p>
    </footer>
</body>
</html>

O uso de tags HTML semânticas é uma prática essencial para melhorar o SEO técnico e a experiência do usuário. Elas ajudam os motores de busca a entender melhor o conteúdo de uma página, facilitam a indexação e aumentam a acessibilidade do site. Para garantir um site bem otimizado, é fundamental adotar boas práticas de marcação semântica no desenvolvimento web.

Se você deseja melhorar o SEO do seu site, começar pela estrutura do HTML é um ótimo primeiro passo!

Entre em contato com os ratos digitais da Pink and Brain! Somos ratos quando o assunto é semântica HTML e estamos prontos para transformar seu código em algo imbatível!

O post Tags HTML semânticas e sua importância para o SEO técnico apareceu primeiro em Pink and Brain.

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

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

Entenda a atualização do algoritmo

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

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

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

Faça uma análise completa do seu site

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

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

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

Revise a qualidade do conteúdo

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

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

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

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

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

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

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

Verifique os backlinks

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

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

Revise a estrutura técnica do seu site

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

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

Mantenha-se atualizado com as diretrizes do Google

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

Monitore os resultados e seja paciente

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

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

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

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

Vamos abordar diferentes elementos e recursos do HTML5 que ajudarão a construirpáginas bem vistas pelos crawler da internet, em especial o Google, 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.

Estrutura Básica de um Documento HTML5

Um documento HTML5 possui uma estrutura básica que consiste em várias partes. Para entender melhor, vamos detalhar cada uma delas:

Doctype

O doctype é a primeira linha de um documento HTML5 e informa ao navegador que o documento está em conformidade com a especificação HTML5.

<!DOCTYPE html>

Elemento html

O elemento <html> é o elemento raiz de um documento HTML e contém todos os outros elementos.

<html>
  ...
</html>

Elemento head

O elemento <head> contém informações sobre o documento, como o título da página, metadados e referências a arquivos CSS e JavaScript.

<head>
  <meta charset="UTF-8">
  <title>Pink and Brain | Especialistas em SEO e Audiência Digital</title>
  <link rel="stylesheet" href="estilos.css">
</head>

Elemento body

O elemento <body> contém o conteúdo visível do documento, como texto, imagens, links e outros elementos HTML.

<body>
  ...
</body>

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.

Entenda os seguintes elementos, podemos estruturar o site de forma eficiente:

Cabeçalho <header>

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 <header> para envolver o conteúdo do cabeçalho.

<header>
  <h1>Meu logo</h1>
  <nav>
	  <ul>
	    <li><a href="#">Início</a></li>
	    <li><a href="#">Sobre</a></li>
	    <li><a href="#">Serviços</a></li>
	    <li><a href="#">Contato</a></li>
	  </ul>
 </nav>
</header>

Barra de Navegação <nav>

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 <nav>. Dentro do <nav>, podemos usar elementos de lista, como <ul> e <li>, para criar os links de navegação.

 <nav>
	  <ul>
	    <li><a href="#">Início</a></li>
	    <li><a href="#">Sobre</a></li>
	    <li><a href="#">Serviços</a></li>
	    <li><a href="#">Contato</a></li>
	  </ul>
 </nav>

Conteúdo principal <main>

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

<main>
  <h2>Sobre</h2>
  <p>Conheça os ratos do marketing digital e do desenvolvimento web.</p>
  <h2>Serviços</h2>
  <ul>
    <li>Serviço 1</li>
    <li>Serviço 2</li>
    <li>Serviço 3</li>
  </ul>
  <img decoding="async" src="imagem.jpg" alt="Imagem do site">
</main>

Conteúdo complementar <aside>

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

<aside>
  <h3>Links úteis</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</aside>

Rodapé <footer>

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 <footer> para envolver o conteúdo e criar o rodapé.

<footer>
  <p>© 2023 Meu Site. Todos os direitos reservados.</p>
</footer>

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:

<!DOCTYPE html>
<html>
	<head> <title>Pink and Brain | Especialistas em SEO e Audiência Digital</title> <link rel="stylesheet" href="estilos.css">
	</head>
	<body> 
	
		<header> 
			<h1>Meu Site</h1> 
			<p>Bem-vindo ao Meu Site incrível!</p> 
			<nav> 
				<ul> 
					<li><a href="#">Início</a></li> 
					<li><a href="#">Sobre</a></li> 
					<li><a href="#">Serviços</a></li> 
					<li><a href="#">Contato</a></li> 
				</ul> 
			</nav>
		</header>	
		
		<main> 
		<h2>Sobre</h2> 
		<p>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ços</h2> 
		<ul> 
			<li>Serviço 1</li> 
			<li>Serviço 2</li> 
			<li>Serviço 3</li> 
		</ul> 
		<img src="imagem.jpg" alt="Imagem do site"> 
		</main> 
		<aside> 
			<h3>Links úteis</h3> 
			<ul> 
				<li><a href="#">Link 1</a></li> 
				<li><a href="#">Link 2</a></li> 
				<li><a href="#">Link 3</a></li> 
			</ul> 
		</aside> 
		
		<footer> 
			<p>© 2024 Meu Site. Todos os direitos reservados.</p> 
		</footer>
	</body>
</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.

Lançadas em maio de 2020, o Core Web Vitals foi criado para fornecer uma orientação unificada sobre os principais indicadores de qualidade de uma página da web. Esses indicadores não só influenciam diretamente o ranqueamento nos mecanismos de pesquisa, mas também impactam significativamente a experiência do usuário, que é um fator crucial para o sucesso de qualquer site.

Se você precisa de ajuda para otimizar o seu site, entre em contato com a Pink and Brain. Somos ratos quando o assunto é otimizar sites através das métricas de Core Web Vitals.

Neste guia, iremos explorar detalhadamente o que são as métricas Core Web Vitals, como medi-las, quais ferramentas utilizar, e as melhores práticas para otimizar seu site de acordo com essas métricas.

O que é Core Web Vitals?

Core Web Vitals são um conjunto de métricas padronizadas pelo Google que medem aspectos essenciais da experiência do usuário em uma página web. Essas métricas avaliam três elementos principais: velocidade de carregamento, interatividade e estabilidade visual. Juntas, elas oferecem uma visão abrangente de como os usuários percebem a performance de um site.

As Core Web Vitals são compostas por três métricas principais:

1. Largest Contentful Paint (LCP): Mede o tempo que leva para o maior elemento de conteúdo visível na página carregar.
2. Interaction to Next Paint (INP): Avalia a rapidez com que a página responde a uma interação do usuário.
3. Cumulative Layout Shift (CLS): Verifica a estabilidade visual da página, avaliando se há mudanças inesperadas no layout.

Essas métricas foram escolhidas pelo Google porque afetam diretamente a experiência do usuário, influenciando tanto a percepção de velocidade quanto a facilidade de uso e a estabilidade da página.

A métrica First Input Delay (FID), foi uma das principais métricas de experiência do usuário introduzidas pelo Google. Ela media o tempo que leva para uma página se tornar interativa após a primeira interação do usuário, como um clique em um botão ou um toque em um link.

No entanto, a FID (First Input Delay) não faz mais parte das métricas Core Web Vitals desde o início de 2024. O Google decidiu substituí-la pela métrica Interaction to Next Paint (INP), que fornece uma visão mais abrangente da interatividade da página e melhora a precisão na medição da resposta da página às interações do usuário.

A importância das métricas de Core Web Vitals para o SEO

Desde que o Google integrou as Core Web Vitals como parte dos sinais de experiência da página (Page Experience Signals), essas métricas se tornaram essenciais para qualquer estratégia de SEO. A experiência do usuário passou a ser um fator determinante no ranqueamento das páginas, especialmente após as atualizações de agosto de 2021 e março de 2022, que introduziram esses critérios para dispositivos móveis e desktops, respectivamente.

Então, por que é tão importante?

• Melhoria no ranqueamento: Sites que oferecem uma melhor experiência do usuário têm mais chances de se destacar nos resultados de busca. Isso é especialmente relevante quando várias páginas têm conteúdo similar em termos de relevância.
• Redução da taxa de rejeição: Páginas com tempos de carregamento longos ou layouts instáveis tendem a afastar os visitantes. Ao otimizar as Core Web Vitals, você pode reduzir significativamente a taxa de rejeição.
• Aumento nas taxas de conversão: Uma página que carrega rápido e oferece uma experiência suave é mais propensa a converter visitantes em clientes.

Explorando as principais métricas de Core Web Vitals

Largest Contentful Paint (LCP) – Carregamento do maior conteúdo visível

A Largest Contentful Paint (LCP) mede o tempo que leva para o maior elemento de conteúdo visível na página carregar completamente. Esse elemento pode ser uma imagem, um vídeo ou um bloco de texto. O LCP é crucial porque reflete a percepção do usuário sobre a velocidade de carregamento do site.

Elementos comuns que afetam o LCP

• Imagens grandes ou não otimizadas: O uso de imagens pesadas sem compressão pode aumentar significativamente o tempo de carregamento.
• Tempos de resposta do servidor: Um servidor lento pode atrasar o carregamento do conteúdo principal.
• Renderização do lado do cliente: Processos complexos de renderização no navegador do usuário podem retardar a exibição do conteúdo.

Otimizações recomendadas:

• Compressão de imagens: Utilize formatos modernos como WebP e ferramentas de compressão para reduzir o tamanho das imagens sem perder qualidade.
• Uso de CDNs: Content Delivery Networks (CDN) ajudam a reduzir a latência, servindo o conteúdo a partir de servidores próximos ao usuário.
• Pré-carregamento de recursos críticos: Utilize a tag <link rel="preload"> para garantir que os recursos críticos sejam carregados o mais rápido possível.

O Google recomenda que o LCP ocorra em até 2,5 segundos para garantir uma boa experiência ao usuário.

Interaction to Next Paint (INP) – Interatividade da página

A Interaction to Next Paint (INP) mede o tempo que a página leva para reagir a uma interação do usuário, como um clique em um botão ou link. Essa métrica é essencial porque interações lentas podem frustrar os usuários e aumentar a taxa de rejeição.

Problemas comuns que afetam o INP

• JavaScript pesado ou não otimizado: Scripts longos ou mal otimizados podem retardar a resposta da página.
• Execução de tarefas de longa duração: Tarefas que bloqueiam o main thread do navegador impedem que ele responda rapidamente às interações do usuário.

Otimizações recomendadas:

• Minificação de JavaScript: Remova espaços, quebras de linha e outros caracteres desnecessários para reduzir o tamanho dos arquivos.
• Divisão de tarefas longas: Fragmentar tarefas longas em menores pode ajudar a manter o thread principal livre para responder às interações do usuário.
• Uso de Web Workers: Utilize Web Workers para executar scripts pesados em segundo plano, liberando o main thread para a interatividade.

O INP ideal deve ser inferior a 200 milissegundos para uma experiência suave.

Cumulative Layout Shift (CLS) – Estabilidade visual da página

A Cumulative Layout Shift (CLS) mede a frequência com que os elementos da página mudam de posição inesperadamente enquanto a página ainda está carregando. Esses movimentos podem ocorrer devido ao carregamento assíncrono de recursos, como imagens sem dimensões especificadas ou anúncios que aparecem subitamente.

Problemas comuns que afetam o CLS

• Imagens sem dimensões especificadas: Quando as dimensões não são definidas, o layout pode ser reconfigurado à medida que as imagens carregam.
• Publicidade e iframes: Elementos de terceiros que carregam tardiamente podem causar mudanças bruscas no layout.
• Fonts e outros elementos dinâmicos: Fontes personalizadas e elementos que carregam de forma assíncrona também podem provocar alterações no layout.

Otimizações recomendadas:

• Definição de dimensões para imagens e vídeos: Sempre especifique largura e altura nos elementos de mídia para evitar mudanças inesperadas no layout.
• Alocação de espaço para anúncios: Reserve espaço na página para anúncios que serão carregados posteriormente.
• Fontes web otimizadas: Use fontes que minimizam o impacto na renderização e no layout.

Uma boa pontuação de CLS deve ser de 0,1 ou menos para garantir uma experiência visual estável.

Ferramentas para medir as métricas Core Web Vitals

Existem várias ferramentas para medir as métricas Core Web Vitals, tanto do Google quanto de terceiros, que ajudam a medir e analisar as premissas importantes. Abaixo estão algumas mais utilizadas no dia a dia, que inclusive são gratuitas:

Google PageSpeed Insights

O Google PageSpeed Insights é uma ferramenta amplamente utilizada que fornece dados sobre as Core Web Vitals tanto para dispositivos móveis quanto para desktop. Além de mostrar as pontuações das métricas, a ferramenta oferece sugestões detalhadas para otimizar a performance da página.

Como usar:

1. Acesse o site do PageSpeed Insights.
2. Insira a URL da página que deseja analisar.
3. Clique em “Analisar” e aguarde os resultados.

O relatório gerado inclui uma visão geral das pontuações LCP, INP e CLS, juntamente com outras métricas de performance e sugestões de melhorias.

O site acima apresentava vários problemas de carregamento e foi desenvolvido em WordPress com o plugin Elementor, que não recomendamos para projetos que necessitam de tráfego orgânico sólido. Refizemos o site do zero, seguindo as melhores práticas de formatação semântica e SEO, com foco nas principais métricas das Core Web Vitals. Hoje, o site carrega praticamente de forma instantânea.

Se você quiser saber mais, veja estas dicas de otimizações para SEO em sites WordPress.

Google Lighthouse

O Google Lighthouse é uma ferramenta de código aberto que pode ser usada tanto como extensão do navegador quanto diretamente nas DevTools do Chrome. Além das Core Web Vitals, o Lighthouse avalia outros aspectos do site, como acessibilidade e práticas recomendadas de SEO.

Como usar:

1. Abra a página que deseja testar no Chrome.
2. Clique com o botão direito e selecione “Inspecionar”.
3. Navegue até a aba “Lighthouse” e clique em “Generate Report”.

O relatório fornecerá uma análise detalhada de várias métricas, incluindo as Core Web Vitals, e oferecerá recomendações para melhorias.

Google Search Console

O Google Search Console oferece uma visão completa das Core Web Vitals em todas as páginas do seu site. Ele permite que os webmasters identifiquem problemas em grande escala e monitorem o desempenho ao longo do tempo.

Como usar:

1. Acesse o Google Search Console e faça login na sua conta.
2. Navegue até a seção “Experiência da Página” no menu lateral.
3. Clique em “Core Web Vitals” para ver um relatório detalhado do desempenho das suas páginas.

O Search Console categoriza as páginas em “Adequados”, “Precisa de Melhoria” e “Inválido” com base nas Core Web Vitals. Além disso, ele mostra quais URLs precisam de atenção e fornece links diretos para resolver os problemas identificados.

Outras ferramentas para medir o Core Web Vitals

GTmetrix (Plano PRO)

• Descrição: Embora tenha uma versão gratuita, o GTmetrix oferece planos pagos que incluem acesso a recursos avançados de teste, como a medição de Core Web Vitals. Ferramenta útil para monitorar e melhorar o desempenho do site com base em dados do Lighthouse.
• Principais Recursos: Análise avançada de desempenho, relatórios históricos, alertas automáticos, opções de teste geolocalizadas.
• Preço: Planos pagos a partir de $10 por mês.

Pingdom

• Descrição: Ferramenta de monitoramento de desempenho de site que oferece insights sobre velocidade de página e monitoramento de Core Web Vitals. Oferece relatórios detalhados e recomendações para otimizar a experiência do usuário.
• Principais Recursos: Monitoramento de tempo de atividade, relatórios de desempenho, testes de velocidade de página, alertas em tempo real.
• Preço: Planos a partir de $10 por mês.

WebPageTest (Plano PRO)

• Descrição: Ferramenta robusta para análise de desempenho da web que mede Core Web Vitals e fornece dados detalhados sobre a performance do site. Oferece scripts de teste personalizados, testes recorrentes, e relatórios detalhados para identificar problemas de desempenho.
• Principais Recursos: Testes personalizados, suporte a múltiplas localizações, relatórios avançados de desempenho, integração com outras ferramentas.
• Preço: Planos a partir de $15 por mês.

Semrush (SEO Toolkit com Auditoria de Sites)

• Descrição: Uma ferramenta de SEO multifuncional que inclui recursos de auditoria de site para medir o Core Web Vitals. Oferece um conjunto completo de ferramentas de SEO, marketing de conteúdo, e análise competitiva.
• Principais Recursos: Auditoria de site, rastreamento de palavras-chave, monitoramento de backlinks, análise de concorrentes, relatórios personalizados.
• Preço: Planos a partir de $129.95 por mês.

Screaming Frog SEO Spider (Licença Paga)

• Descrição: O Screaming Frog é uma ferramenta poderosa de SEO que permite auditar sites e identificar problemas relacionados a SEO e Core Web Vitals. A versão paga oferece uma auditoria abrangente de páginas, incluindo análise de desempenho e problemas relacionados aos Core Web Vitals.
• Principais Recursos: Rastreamento de sites completo, auditoria de SEO, análise de Core Web Vitals, integração com Google Analytics e Search Console, relatórios personalizados.
• Preço: Licença paga a partir de £199 por ano.

Melhores práticas para otimização do Core Web Vitals

Agora que entendemos a importância e as ferramentas para medir as Core Web Vitals, é essencial saber como otimizar seu site para garantir uma boa pontuação nessas métricas. Abaixo, listamos algumas das melhores práticas que utilizamos para melhorar cada uma das principais métricas.

Antes das nossas dicas, veja um vídeo do próprio Google sobre o tema:

Otimizando o Largest Contentful Paint (LCP)

• Melhore o tempo de resposta do servidor: opte por servidores rápidos e otimizados para reduzir o tempo de resposta. IPs dedicados, largura de banda, histórico da empresa, tudo isso conta. Além disso, o uso CDNs (Content Delivery Networks) para servir conteúdo de maneira mais rápida e eficiente são fundamentais, como a Cloudflare.
• Carregamento assíncrono de CSS e JavaScript: scripts e folhas de estilo css que bloqueiam a renderização podem atrasar o LCP. Minifique e carregue esses recursos de forma assíncrona sempre que possível.
• Priorize o carregamento do conteúdo acima da primeira dobra: o conteúdo que aparece na parte visível da tela deve ser carregado primeiro. Implemente técnicas como Lazy Loading para diferir o carregamento de elementos abaixo da dobra. Além disso, identifique a imagem ou recurso mais pesado da primeira dobra e faça um preload para que ele carregue mais rápido.
• Otimização de imagens: use formatos modernos como WebP, e técnicas de compressão para reduzir o tamanho das imagens sem sacrificar a qualidade. Além disso, especifique dimensões de altura e largura para evitar reflows.

Otimizando o Interaction to Next Paint (INP)

• Reduza a execução de JavaScript: scripts pesados ou mal otimizados podem bloquear o main thread, atrasando a resposta a interações. Minifique e compacte o JavaScript para melhorar a performance.
• Use técnicas de Code Splitting: divida o código em pedaços menores e carregue apenas o necessário para cada página. Isso reduz o tempo de carregamento inicial e melhora a resposta a interações.
• Web Workers: execute tarefas intensivas de processamento em segundo plano com Web Workers para liberar o main thread e manter a página responsiva.
• Adie o carregamento de recursos não essenciais: carregue recursos não críticos, como scripts de análise ou widgets sociais, após a interação inicial do usuário, para garantir que a página seja interativa o mais rápido possível. Utilize sempre o Google Tag Manager para controlar os scripts e recursos de terceiros que são apensxados na sua aplicação ou site.

Otimizando o Cumulative Layout Shift (CLS)

• Reserve espaço para imagens e vídeos: sempre defina largura e altura para imagens e vídeos para evitar mudanças inesperadas no layout.
• Display Swap: utilize font-display: swap para evitar reflows causados pelo carregamento de fontes personalizadas.
• Gerencie o carregamento de anúncios: reserve espaço no layout para anúncios e iframes, evitando que eles provoquem deslocamentos ao carregarem. Atrase o carregamento deles (existem diversas formas de fazer isso com o IntersctionObserver do JavaScript, ou até recursos nativos como atributo loading="lazy" utilizado direto na tag HTML (lembrando que o loading="lazy” funciona em imagens, vídeos e iframes).
• Evite a inserção dinâmica de conteúdo: Se precisar adicionar conteúdo dinamicamente, como pop-ups ou banners, faça-o de forma que não cause mudanças bruscas no layout. Considere animar a transição para torná-la mais suave.

Sites em WordPress são capazes de ter notas boas nas métricas de Core Web Vitals?

Definitvamente sim, mesmo sendo uma plataforma baseada em PHP, que utiliza o servidor para servir páginas para os usuários. Atualmente, com as tecnologias client side, ou seja, páginas são geradas no navegador do cliente ao invés do servidor em si, muito se questiona se vale a pena utilizar o WordPress e outras aplicações consideradas mais “antigas”, mas isso é uma grande “balela”.

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.

Um grande benefício é a capacidade do WordPress de ser otimizado para SEO, com diversas ferramentas e plugins que ajudam a melhorar a visibilidade orgânica.

Ah… mas vale lembrar que se for usar um CMS como o WordPress, é melhor não usar muitos plugins, fugir do Elementor (o dementador do SEO), e contratar alguém que entende do assunto desenvolvimento de sites em WordPress.

Se você tem tem um site em WordPress essa é para você: dicas de otimizações para SEO em sites WordPress.

Monitoramento contínuo das métricas de Core Web Vitals

Otimizar as métricas de Core Web Vitals não é uma tarefa única, mas sim um processo contínuo. À medida que seu site evolui, novas páginas são criadas e novos conteúdos são adicionados, é necessário monitorar regularmente para garantir que a experiência do usuário permaneça excelente.

Ferramentas como o Google Search Console e o Google Analytics podem ser configuradas para alertá-lo sobre quedas de performance ou problemas emergentes, permitindo que você tome medidas proativas.

As Core Web Vitals são mais do que apenas métricas técnicas; elas são um reflexo direto da experiência do usuário no seu site. Com a crescente importância dessas métricas no algoritmo do Google, ignorá-las pode resultar em perda de tráfego e, consequentemente, de oportunidades de negócio. Ao otimizar seu site com base nas Core Web Vitals, você não apenas melhora suas chances de um bom ranqueamento no Google, mas também oferece uma experiência de qualidade para os seus visitantes, o que, em última análise, resulta em maior engajamento, melhores taxas de conversão e um impacto positivo nos resultados da sua empresa.

Se você precisa de ajuda para otimizar o seu site, entre em contato com a Pink and Brain. Somos ratos quando o assunto é otimizar sites através das métricas de Core Web Vitals.

O post Core Web Vitals: guia para favoritar no seu navegador apareceu primeiro em Pink and Brain.

Vou mostrar uma lista completa de tags HTML e as propriedades CSS obsoletas para você substituir, inclusive trazendo as soluções para atualizar seu código de maneira eficaz. Mantenha seu código sempre atualizado, semântico e diferenciado.

Embora a maioria dos navegadores ainda suporte tags e propriedades obsoletas, não é recomendado utilizá-las, pois é provável que sejam removidas em futuras versões.

Tabela de tags deprecated do HTML

Tabela de propriedades CSS obsoletas deprecated

Exemplos de Atualização de Código

Substituição das tags font e center

<!-- Código obsoleto -->
<font color="#333">Texto exemplo</font>
<center>Conteúdo centralizado</center>

<!-- Código atualizado -->
<span class="text-style">Texto exemplo</span>
<div class="center">Conteúdo centralizado</div>

<style>
	.text-style {
	  font-size: 14px;
	  color: #333;
	}
	
	.center {
	  text-align: center;
	}
</style>

Manter a aplicação atualizada garante compatibilidade, segurança e uma boa experiência do usuário, além de beneficiar diretamente SEO. Utilize este guia para identificar e atualizar tags e atributos obsoletos em seu código, mantendo seu site eficiente e compatível com os padrões atuais.

O post Tags HTML e propriedades CSS deprecated que não são mais utilizados apareceu primeiro em Pink and Brain.

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

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

Otimização de JavaScript

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

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

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

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

Redirecionamentos: evite os desnecessários

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

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

Otimização de imagens

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

Essas práticas incluem:

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

Por que a velocidade do site é importante para SEO?

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

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

O que são Core Web Vitals?

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

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

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

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

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

Além disso, a função permite que as propriedades de estilo se ajustem automaticamente a diferentes tamanhos de tela. Com a crescente demanda por sites responsivos e a necessidade de layouts precisos, a função calc() tornou-se uma habilidade importante para qualquer desenvolvedor web.

Funcionalidades Principais

A função calc() permite a combinação de valores numéricos, unidades de medida e operadores matemáticos, facilitando a definição de larguras, alturas, margens, preenchimentos e outras propriedades dimensionais. É especialmente útil na criação de layouts fluidos e adaptáveis a diferentes tamanhos de tela.

Sintaxe Básica

A sintaxe básica da função calc() é simples. Ela permite que você execute cálculos ao especificar os valores de propriedades no CSS. A função pode ser utilizada em qualquer lugar, como comprimento, frequência, ângulo, tempo, porcentagem, número e inteiro.

A sintaxe básica da função calc() é uma expressão matemática que pode incluir operadores matemáticos válidos, como adição, subtração, multiplicação e divisão. Além disso, ela pode conter valores numéricos e outras unidades de medida.

Exemplo básico da sintaxe da função calc():

propriedade: calc(expressão);

Onde:

• Propriedade: é a propriedade CSS à qual a função será aplicada.
• Expressão: é a expressão matemática que deseja-se calcular, utilizando valores, unidades de medida e operadores matemáticos.

Desenvolvimento

A função calc() pode ser utilizada em diversos contextos, tais como para valores de largura, altura, margens, entre outros. Os desenvolvedores podem portanto alcançar maior controle e precisão na criação de layouts que se adaptam de forma eficaz a diferentes dispositivos e tamanhos de tela.

Exemplos

Definindo largura com porcentagem e pixels:

width: calc(50% - 20px);

Neste caso, a largura do elemento é definida como metade da largura do contêiner, com a subtração de 20 pixels, proporcionando flexibilidade e precisão no dimensionamento.

Calculando margem com porcentagem e rem:

margin: calc(2rem + 5%);

Aqui, a margem do elemento será de 2 rem mais 5% do tamanho do seu contêiner.

Definindo altura com viewport height (vh) e pixels:

height: calc(100vh - 80px);

Neste exemplo, a altura do elemento é estabelecida como igual à altura da janela do navegador menos 80 pixels, garantindo um layout ajustável.

Exemplo de como posicionar um pseudoelemento de grafismo com a função calc()

No exemplo abaixo eu usei a função calc() para colocar o elemento gráfico no topo da <section>, alinhado ao centro.

A função calc() no CSS oferece uma abordagem versátil e eficaz para lidar com layouts responsivos e cálculos dimensionais.

Lembre-se que, emsmo sendo uma técnica bastante difundida e presente em quase todos os sistemas operacionais, é essencial utilizá-la com moderação e considerar a compatibilidade com navegadores mais antigos, se necessário.

O post Função calc() no CSS: como fazer cálculos na folha de estilos apareceu primeiro em Pink and Brain.

Em portais de notícias, a apresentação visual e a acessibilidade são fatores críticos para atrair e reter leitores. Uma prática duvidosa que já presenciamos é o uso do atributo aria-hidden="true" em imagens. No entanto, essa prática pode afetar negativamente o SEO se não for aplicada com clareza dos efeitos.

Esse post surgiu justamente de uma demanda da área de acessibilidade para a inserção do atributo em todas as imagens do site, e isso iria comprometer diretamente os benefícios das informações que rondam as imagens importantes das páginas (alt, title, legendas).

Vou explicar o impacto do uso inadequado de aria-hidden="true" em imagens e como isso pode prejudicar o SEO de um portal de notícias. Lembrando que este é o meu ponto de vista e, assim como qualquer assunto dentro do marketing digital, a experiência fala mais alto, e você não vai encontrar conteúdos relevantes sobre esse tema, então, se estou aqui é para passar a diante um entendimento correto a cerca do tema.

Mas afinal, o que é aria-hidden=”true”?

O atributo aria-hidden="true" é utilizado para indicar que um elemento HTML, incluindo seus filhos, devem ser ignorados por tecnologias assistivas como leitores de tela. Isso é frequentemente aplicado em elementos decorativos, ícones que se repetem com constância, elementos visuais, grafismos, que não são essenciais para a compreensão do conteúdo.

Exemplo:

<img src="grafismo-bg.jpg" alt="" aria-hidden="true">

Impacto no SEO de Portais de Notícias

Para um portal de notícias, as imagens desempenham um papel fundamental não só na atração visual, mas também na otimização para motores de busca. Usar aria-hidden="true" de maneira inadequada pode ter consequências significativas.

Imaginem que apenas na home desse portal de notícias 100 imagens ou mais de matérias relevantes são disponibilizadas no HTML. Ao utilizar esse atributo em todas as imagenms o que aconteceria? Não teríamos recursos de imagens passíveis de leitura por estes dispositivos e pior do que isso, estarímos informando para o Googlebot, ou qualquer bot, que aquela imagem não tem “conteúdo semântico” associado, o que seria um erro fatal uma vez que as imagens fazem parte do tripé de sustentação de notícias (principalmente as quentes).

Destaco os seguintes pontos:

1. Perda de conteúdo valioso para SEO: imagens com descrições, legendas e atributos relevantes (atributo alt, title, caption) contribuem para o SEO, fornecendo contexto adicional para os motores de busca. Ocultar essas imagens com aria-hidden="true" impede que os mecanismos de busca utilizem essas informações.
2. Experiência do usuário comprometida: usuários que dependem de tecnologias assistivas perdem o acesso a informações cruciais quando imagens relevantes são ocultadas. Isso pode resultar em uma experiência de usuário negativa e afetar indiretamente o SEO.

Exemplos de uso inadequado em portais de notícias

1. Ocultar imagens relevantes para a matéria:

Ocultar imagens que complementam o texto da notícia pode resultar em perda de contexto tanto para usuários quanto para crawlers.

Exemplo errado:

<img src="politica.jpg" alt="Presidente em discurso" aria-hidden="true">

2. Ocultar infográficos e gráficos informativos

Infográficos e gráficos frequentemente contêm informações vitais que devem ser acessíveis a todos os usuários e indexados pelos motores de busca.

Exemplo errado:

<img src="infografico.jpg" alt="Crescimento econômico anual" aria-hidden="true">

Boas práticas para portais de notícias

1. Usar aria-hidden="true" apenas em elementos decorativos

Aplique o atributo apenas em imagens que não adicionam valor informativo ao conteúdo, ícones que se repentem, elementos de grafismo, bordas, BGs, etc…

Exemplo correto:

<img src="grafismo.jpg" alt="" aria-hidden="true">

2. Garantir que imagens relevantes sejam acessíveis

Certifique-se de que todas as imagens que fornecem informações complementares ao texto sejam acessíveis e tenham descrições adequadas.

Exemplo correto:

<img src="evento-xpto.jpg" alt="Participantes no evento discutindo inovação tecnológica">

Benefícios de uma abordagem correta

1. Melhoria na acessibilidade

Garantir que todas as informações visuais importantes estejam acessíveis melhora a experiência para todos os usuários, incluindo aqueles que dependem de leitores de tela.

2. Otimização para mecanismos de pesquisa

Imagens relevantes e bem descritas ajudam a fornecer um contexto mais rico aos motores de busca, potencialmente melhorando o ranking do portal de notícias.

O uso adequado do atributo aria-hidden="true" em imagens é essencial para equilibrar acessibilidade e SEO, especialmente em portais de notícias renomados. Evitar erros comuns e seguir boas práticas garante que seu conteúdo seja acessível e otimizado para motores de pesquisas.

Se você quer ter uma assessoria relevante para seu portal de notícias, de uma dupla que contribuiu diretamente em novos portais, grandes portais já líderes de mercado, além de start-ups, com certeza somois os ratos digitais que você precisa bater um papo. Somos especialistas em marketing digital e SEO para publishers.

O post Aria hidden true e SEO: reflita sobre imagens e acessibilidade apareceu primeiro em Pink and Brain.

O que é o atributo “name” no HTML?

O atributo “name” é um dos atributos fundamentais em HTML, usado para identificar elementos específicos em uma página web. Ele é frequentemente associado a elementos de formulário para permitir a referência e a manipulação desses elementos por meio de scripts do lado do cliente ou ao enviar dados para um servidor.

Utilização em Formulários

Em formulários HTML, o atributo “name” é essencial para identificar e nomear os diferentes campos de entrada. Quando um formulário é submetido, os valores dos campos de entrada são enviados ao servidor com base nos nomes definidos pelo atributo “name”. Isso permite que o servidor processe os dados adequadamente.

<form action="/submit_form.php" method="post">
  <label for="username">Nome de usuário:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Senha:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Enviar">
</form>

No exemplo acima, os campos de entrada “username” e “password” possuem os atributos “name” definidos como “username” e “password”, respectivamente. Assim, quando o formulário é enviado, os valores inseridos nesses campos são enviados ao servidor com esses nomes.

Utilização do atributo “name” em elementos de seleção

Além de campos de entrada, o atributo “name” também é usado em elementos de seleção, como caixas de seleção (<select>) e botões de opção (<input type="radio"> e <input type="checkbox">). Ele é usado para agrupar e identificar as opções selecionadas pelo usuário.

<select name="cidade">
  <option value="1">Nova York</option>
  <option value="2">Los Angeles</option>
  <option value="3">Chicago</option>
  <option value="4">Houston</option>
</select>

Neste exemplo, o atributo “name” está definido como “cidade”, e cada opção tem um valor único. Quando o formulário é enviado, o servidor recebe o valor selecionado com base no nome “cidade”.

Exemplo de manipulação do elemento com JS

O atributo “name” também é amplamente utilizado em scripts do lado do cliente, em especial para manipular elementos de formulário por meio de JavaScript. Ele permite que os desenvolvedores acessem e modifiquem dinamicamente os valores dos campos de entrada, facilitando a validação e a interatividade.

// Acessando o valor de um campo de entrada com base no atributo "name"
var username = document.getElementsByName("username")[0].value;

Neste exemplo, o valor do campo de entrada com o nome “username” é acessado e armazenado na variável “username” para posterior manipulação.

O atributo “name” no HTML é uma parte fundamental na construção de formulários e interações web. Ao desenvolver páginas web, é essencial atribuir nomes significativos aos elementos usando o atributo “name”, garantindo uma experiência de usuário fluida e uma integração eficiente com o backend.

O post Atributo name no HTML: para que serve e quando utilizar? apareceu primeiro em Pink and Brain.