SEO

SEO vs Design: quando o "bonito" estraga o ranking (e como resolver)

Quase ninguém quer um site feio. O problema é que muito do que se chama "design moderno" em 2026 — heros inteiros em imagem, scroll infinito, animações de entrada por todo o lado — é exatamente o que arranca o site da primeira página do Google. O conflito existe, mas é falso: bons sites resolvem-no na fase de wireframe, não no fim com um plugin de cache. Este guia mostra onde está a tensão real e como decidir.

A premissa: Google lê texto, humanos veem imagem

O Google indexa HTML. Tudo o que estiver dentro de uma imagem (texto numa foto, headline em SVG sem alt, copy "escrita" em Canva e exportada como PNG) é invisível para o motor de pesquisa. Os humanos lêem isso sem esforço; o crawler não.

Regra base, sem exceções:

  • Texto que precisa de rankear vive em <h1>, <h2>, <p>. Nunca dentro de imagem.
  • Imagens decorativas: alt="" (ignoradas).
  • Imagens informativas: alt com descrição factual (não keyword stuffing).
  • Logos, ícones: SVG inline ou com <title> acessível.

Conflito 1 — Hero "all-image" sem H1 textual

Padrão típico de templates premium: o hero é uma imagem gigante com a headline embutida no PNG/JPG. Visualmente impecável. Para SEO, é como não ter H1.

Sintomas no Search Console: a página não rankeia para a keyword que está "na imagem", e o Google escolhe outra frase do corpo como title — quase sempre pior.

Como resolver:

  1. Headline em HTML (<h1>) por cima da imagem, com position: absolute ou Grid.
  2. A imagem é background ou camada decorativa.
  3. Se o design exige tipografia personalizada, usar a fonte real (web font) — não exportar como imagem.

Conflito 2 — Scroll infinito sem paginação real

Os sites de portefólio e blog adoram scroll infinito. Carrega-se com JavaScript à medida que o utilizador desce. Problema: o Googlebot não desce. Vê o que está no HTML inicial e segue. Posts antigos ficam órfãos.

Como resolver:

  • Render do HTML completo (SSR ou SSG) com paginação tradicional (/blog/pagina-2).
  • Em cima, opcionalmente, JavaScript que muda a UX para "scroll infinito" sem perder os links reais.
  • Cada link de página tem href válido, não onclick.

Conflito 3 — JavaScript pesado a bloquear o LCP

Frameworks modernos podem render muito do conteúdo via JS no cliente. O Google indexa páginas com JS, mas com delay e orçamento limitado. Se o conteúdo principal só aparece depois de 4s de execução, o Google indexa uma página vazia.

O que pesa mais, por ordem:

  1. Builders visuais (Elementor, Divi, WPBakery) com 6+ plugins ativos.
  2. Sliders e carousels JS na dobra.
  3. Animações de entrada (AOS, GSAP) em cada elemento.
  4. Chat widgets, popups e tracking carregados antes do conteúdo.

Como resolver:

  • LCP <2.5s medido em PageSpeed Insights, mobile.
  • HTML do hero entregue server-side (não pintado por JS no cliente).
  • Animações apenas em interação ou abaixo da dobra.
  • Lazy-load para imagens fora do viewport — nunca para o hero.

Mais detalhe técnico em SEO técnico: guia prático para PME.

Conflito 4 — Animações que adiam o conteúdo

A animação de "fade-in" do título é bonita uma vez. Se atrasa o LCP por 800ms, o Google penaliza a página e o utilizador desiste antes do efeito acabar.

Regras práticas:

  • Animação nunca esconde texto que o Google precisa de ler.
  • Estado inicial CSS = estado final visível. A animação modifica transform, não opacity: 0.
  • prefers-reduced-motion: reduce respeitado (acessibilidade + UX).

Conflito 5 — Tipografia exótica que falha em mobile

Designers adoram fontes raras. O Google preocupa-se com CLS (Cumulative Layout Shift) — se a fonte carrega 1.5s depois e o layout salta, é penalização.

  • Fontes web com font-display: swap ou optional.
  • Auto-hospedar (não carregar de servidor terceiro lento).
  • Pré-carregar a fonte do hero (<link rel="preload">).
  • Máximo 2 famílias por site. Subset para latim quando possível.

Conflito 6 — Falta de hierarquia visível (H1, H2, H3)

"Tudo é H1 porque é tudo importante." Não é. O Google usa hierarquia para entender estrutura. Um único H1 por página, H2s para secções, H3s para sub-blocos.

Erros frequentes:

  • 0 H1 (porque o título é uma imagem).
  • 4 H1 (porque o tema usa H1 para cada secção).
  • H2 com texto de marketing genérico ("Soluções para si") em vez de descrever o conteúdo.

Conflito 7 — Galerias e portefólios sem texto

Sites de fotógrafos, arquitetos, agências criativas: galeria com 40 fotos, zero texto. Para humanos, é deslumbrante. Para o Google, é uma página em branco.

Como resolver sem matar a estética:

  • Descrição textual por cima ou por baixo de cada caso (200–400 palavras).
  • Schema CreativeWork ou ImageObject com metadados.
  • Listas de tags/categorias com links reais.
  • Página individual por projeto, em vez de tudo num único scroll.

Conflito 8 — Dados estruturados ignorados

Schema.org não muda o design, mas muda a forma como o Google apresenta o resultado: estrelas, preço, FAQ, breadcrumb. Sites "bonitos" feitos só com base em templates raramente o incluem.

Mínimo recomendado:

  • Organization (homepage).
  • BreadcrumbList (todas as páginas internas).
  • Product + Offer (e-commerce).
  • FAQPage quando há FAQ real.
  • LocalBusiness para negócios físicos com morada PT.

Detalhe em dados estruturados/schema para PME PT.

Como auditar o teu site em 15 minutos

Ferramentas gratuitas, ordem:

  1. PageSpeed Insights (mobile) — LCP, CLS, INP. Se LCP >2.5s, o design está a sabotar.
  2. Inspect → View Source — procura H1, H2, conteúdo principal no HTML inicial. Se não está lá, é renderizado por JS.
  3. Lighthouse — separador "Best Practices" + "SEO". Score abaixo de 90 em SEO = problemas estruturais.
  4. WAVE (acessibilidade) — falhas aqui geralmente são também falhas de SEO (alt-text, hierarquia).
  5. Search Console — relatório de "Páginas" e "Core Web Vitals" mostra o que o Google vê de verdade.

Cinco passos. Quem cobrar pelo redesign sem fazer este check primeiro está a apostar.

Casos onde "design ganha" — e está certo

Nem todo o site existe para rankear. Exemplos legítimos:

  • Landing de campanha paga: o tráfego vem de Google Ads/Meta Ads. SEO orgânico é irrelevante. O que importa é Quality Score, LCP e taxa de conversão.
  • Portefólio de senior designer: o cliente chega por LinkedIn ou referência. O site é prova, não captação.
  • Site de evento pontual: vive 3 meses, indexação acelerada não é prioridade.

Nestes casos, o design dita. Mas mesmo aqui, velocidade não é negociável — utilizadores impacientes não esperam por animações.

Conflito 9 — Cookies, popups e CMP que sabotam o LCP

O banner de cookies legal é necessário. Mal implementado, é o assassino silencioso de Core Web Vitals em sites portugueses. Sinais típicos:

  • Banner bloqueia a interação na primeira dobra (penalizado por INP).
  • CMP carrega scripts terceiros antes do conteúdo principal.
  • Popup de newsletter ao segundo 2, antes do hero pintar.
  • Layout shift quando o banner aparece (CLS dispara).

Como resolver:

  • CMP leve (Cookiebot, Klaro, próprio) carregado de forma assíncrona, sem bloquear render.
  • Banner com altura fixa reservada — sem CLS.
  • Popup de newsletter só depois de 30s ou ao tentar sair (exit-intent).
  • Scripts de tracking só disparam após consentimento — não em paralelo.

Conflito 10 — Sliders, carousels e tabs com conteúdo crítico

Conteúdo importante escondido em slides 2, 3, 4 de um carrossel: o Google indexa, mas dá peso muito menor a conteúdo "fora da vista". Utilizadores também — em média, 80% só veem o primeiro slide.

Regras:

  • Conteúdo crítico (proposta de valor, CTA principal) fora de slider.
  • Carrossel para galeria visual, depoimentos, logos — nunca para H1 ou benefícios chave.
  • Tabs com conteúdo SEO relevante devem ter todo o HTML renderizado, mesmo o oculto por CSS.
  • Acordeões com <details> nativo em vez de JS custom.

A regra de decisão

Antes de cada escolha estética que afete o HTML, perguntar:

  1. O Google consegue ler este conteúdo no HTML inicial?
  2. O LCP fica abaixo de 2.5s em mobile com 4G real?
  3. Se a animação falhar, o utilizador vê o conteúdo na mesma?
  4. Há um H1 textual com a keyword principal?

Três sins e meio são suficientes. Quatro nãos significam refazer a secção. Quando o conflito persiste, o site provavelmente precisa de refazer-se por inteiro, não de remendos.

No sitesfixe.pt construímos sites em que o design serve o ranking, não o contrário: HTML semântico, LCP abaixo de 1s, schema completo desde o dia 1. Se o teu site está bonito mas invisível no Google, fala connosco. Sites desde 1.500€.

Lê também:

Fontes

Precisas de um site ou loja online?

Agência digital portuguesa. Sites e lojas online rápidos, otimizados para o Google e feitos para resultado.

Pedir orçamento