Porque as suas ligações ficam feias no WhatsApp e nas redes, e como corrigi-lo

Um cliente envia a um amigo a ligação de um produto pelo WhatsApp. Em vez de um cartão com a foto e o nome, aparece o seu logótipo pixelizado, a imagem de um banner cortada ao meio ou só o endereço a azul. É o passa-palavra da sua loja, e chega com a pior cara possível.

A culpa quase nunca é do WhatsApp. É que a página não lhe diz que imagem mostrar, ou di-lo mal.

Como as redes decidem o que mostrar

Quando alguém cola uma ligação, a aplicação descarrega a página e procura umas etiquetas no <head>: as do protocolo Open Graph, criado pelo Facebook e hoje lido por quase todas (WhatsApp, Facebook, LinkedIn, Telegram, Slack, Discord, Pinterest…). O X/Twitter lê ainda as suas próprias etiquetas twitter: e, se não as encontrar, usa as do Open Graph.

As básicas são:

• og:title: o título do cartão.
• og:description: o texto breve por baixo.
• og:image: a imagem. Com URL absoluto e HTTPS.
• og:url: o endereço canónico da página.
• og:type: o tipo (para produtos usa-se muitas vezes product ou website).

Recomendáveis: og:image:width e og:image:height (ajudam a imagem a aparecer à primeira), og:image:alt e twitter:card com o valor summary_large_image para o cartão grande.

O tamanho que funciona em todas

A medida de referência é 1200 × 630 píxeis (proporção aproximada 1,91:1). É a que o Facebook recomenda para a pré-visualização grande e a que melhor encaixa nas restantes. O que costuma falhar:

• Fotos de produto quadradas: a rede corta-as em cima e em baixo, ou mostra-as em miniatura de lado.
• Imagens demasiado pequenas: abaixo de certo tamanho, as redes mostram uma miniatura ou nada.
• Imagens demasiado pesadas: o WhatsApp em particular pode não mostrar imagens muito grandes. Mantê-las leves (abaixo de algumas centenas de KB) evita problemas.
• Texto colado às margens: algumas apps cortam as margens. Deixe espaço à volta.

Porque o PrestaShop nem sempre o resolve

• Muitos temas não imprimem etiquetas Open Graph, ou só as da página inicial.
• Alguns imprimem og:image com a imagem do produto no seu tamanho quadrado.
• Vários módulos imprimem as suas próprias etiquetas e acabam duplicadas, com imagens diferentes. A rede fica com a primeira que encontra, que nem sempre é a boa.
• As etiquetas aparecem no fim do <head>, atrás de muito código. Algumas aplicações só leem o início da página.
• Categorias e páginas CMS não têm imagem própria.

A cache de cada rede: o motivo de «não mudar»

As redes guardam a pré-visualização na primeira vez que alguém partilha uma ligação e reutilizam-na durante algum tempo. Por isso corrige as etiquetas e o cartão continua a aparecer mal. Como forçar a atualização:

• Facebook: o Depurador de partilhas (Sharing Debugger) mostra o que lê e permite voltar a extrair a página.
• LinkedIn: o Post Inspector faz o mesmo.
• WhatsApp: não tem ferramenta pública. O prático é testar com o URL acrescentando um parâmetro (por exemplo ?v=2) para verificar que a nova versão está bem; a ligação sem parâmetro atualiza-se com o tempo.
• Telegram: o seu bot @WebpageBot permite pedir que atualize a pré-visualização de um URL.

Para além da foto: uma imagem que vende

Uma pré-visualização não tem de ser apenas a foto do produto. Uma imagem composta com a foto, o nome, o preço e, se houver, o desconto, comunica num relance o que o amigo precisa de saber para carregar. A condição é que esteja atualizada: uma imagem com um preço antigo gera desconfiança.

Checklist

1. Cada ficha, categoria e página CMS tem o seu og:image, com URL absoluto e HTTPS.
2. A imagem mede 1200 × 630 e pesa pouco.
3. Só há um conjunto de etiquetas Open Graph por página.
4. As etiquetas estão no início do <head>.
5. og:title e og:description aparecem no idioma da página.
6. Passou três URL pelo depurador do Facebook e pelo inspetor do LinkedIn.
7. Testou partilhar pelo WhatsApp a partir de um telemóvel.

Como resolvê-lo no PrestaShop

RKR Dynamic Image gera no seu servidor, sem serviços externos, uma imagem de 1200 × 630 para cada produto, categoria e página CMS com imagem, com a foto, o nome, o preço com o formato da sua loja, um selo de desconto quando o há (preços específicos incluídos) e as estrelas de avaliação se usar o módulo de comentários de produto do PrestaShop. A imagem atualiza-se sozinha quando um preço muda, é gerada por idioma e por loja, e pode ser desenhada com um construtor visual com 23 temas. O módulo imprime as etiquetas no início do <head> para que o WhatsApp as leia. Funciona em PrestaShop 1.7.8 a 9.x.