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

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

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

O que são redirects?

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

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

Quando usar redirects?

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

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

Migração de domínio

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

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

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

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

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

Ajustes de slug e arquitetura

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

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

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

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

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

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

Consolidação de conteúdos duplicados

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

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

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

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

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

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

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

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

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

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

John Mueller (Google)

Tipos de Redirects

Principais códigos HTTP

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

Menos comuns

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

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

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

Como implementar redirects?

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

No servidor

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

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

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

Redirect único (301 direto para uma nova URL)

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

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

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

Redirect com Regex (reescrevendo vários slugs)

# Ativa o mecanismo de rewrite
RewriteEngine On

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

# Ativa o mecanismo de rewrite
RewriteEngine On

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

Exemplos práticos:

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

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

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

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

Exemplo:

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

Em CMS

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

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

Via CDN

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

Em DNS

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

Boas práticas para redirects

Evite cadeias de redirecionamento

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

Corrija loops imediatamente

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

Mantenha relevância no destino

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

Deixe o redirect ativo por tempo suficiente

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

Atualize links internos

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

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

Monitore no Search Console

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

Reaproveite oportunidades em páginas 404

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

Erros comuns a evitar

Redirecionar tudo para a home

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

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

Usar Meta Refresh com atraso

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

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

Criar redirecionamentos irrelevantes

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

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

Como testar os redirects?

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

Testes rápidos no navegador

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

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

Ferramentas online

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

Auditorias em massa

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

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

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

Césinha

Monitoramento contínuo

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

Não brinque com fogo

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

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

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

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

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

O que é INP (Interaction to Next Paint)?

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

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

Como funciona a INP?

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

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

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

A transição do FID para a INP

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

A jornada da INP: como tudo começou?

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

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

Como a INP pode impactar sites?

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

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

A INP e suas implicações para SEO

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

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

O que fazer para melhorar a métrica?

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

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

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

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

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.

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.