Corrigir erros de dimensão de imagem & CLS em WordPress (guia 2026)

Na era dos Core Web Vitals, a forma como geres imagens decide o teu SEO. Historicamente, este artigo tratava de erros AMP. Em 2026, o problema é Cumulative Layout Shift (CLS) e os requisitos do Google Discover.

O erro: “Tamanho da imagem menor que o recomendado”

Se vês isto na Google Search Console, geralmente refere-se a dados estruturados ou Google Discover. A Google exige que as imagens tenham pelo menos 1200px de largura para serem elegíveis para cartões grandes no Discover e News.

A Solução: Garante que a tua og:image e Imagem de Destaque Principal são de alta resolução (ex: 1200x675px). Não uses miniaturas pequenas (300px) como a tua imagem de metadados primária.

O assassino de performance: CLS (cumulative layout shift)

Já visitaste um site, começaste a ler, e depois uma imagem carregou e empurrou o texto para baixo? Isso é CLS. A Google odeia isso (e as métricas provam que os utilizadores também).

1. Define sempre width e height

Os browsers precisam de saber o aspect ratio antes de a imagem descarregar para reservar espaço.

<!-- MAU -->
<img src="photo.jpg" alt="...">

<!-- BOM -->
<img src="photo.jpg" width="800" height="600" alt="...">

O WordPress adiciona estes atributos automaticamente a imagens padrão. Mas se inseres HTML “hardcoded” no teu tema, tens de os adicionar.

2. CSS moderno: Aspect-ratio

Em 2026, usamos a propriedade CSS aspect-ratio para reservar espaço para responsividade, mesmo para vídeos ou contentores de fundo.

.card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Isto garante que o browser desenha uma caixa 16:9 imediatamente, prevenindo mudanças de layout.

O legado “AMP”

Se ainda vês erros AMP antigos:

1. Imagem de Banner: Tem de ter exatamente 60px de altura? Não, isso é história. Apenas garante que o teu logótipo em Schema.org tem 600x60px.
2. Imagem de Destaque: Tem de ter pelo menos 696px de largura para AMP.

Recomendação para 2026: Abandona o AMP. WordPress moderno com Cache/CDN adequado é mais rápido que AMP e dá-te mais controlo. Foca-te nos Core Web Vitals (INP e CLS).

Resumo

1. Metadados: Usa imagens 1200px+ para Imagens de Destaque.
2. Layout: Inclui sempre width=".." e height=".." no HTML.
3. CSS: Usa aspect-ratio para contentores responsivos.
4. Discover: Imagens de alta qualidade obtêm 3x mais cliques no Google Feed.