Pré-visualização de link do iMessage não funciona ou mostra um balão cinza

O Mensagens busca a própria página e não executa JavaScript. Sem a og:image e um bom ícone, você fica apenas com o balão cinza simples contendo apenas o título.

Última atualização

Verifique sua URL

Atualizar prévia

Verificar favicon

Solução rápida


  1. Verifique a página com o verificador de meta tags.

  2. Adicione uma og:image com pelo menos 900 px de largura e um og:title sem o nome da sua marca.

  3. Forneça um ícone quadrado de pelo menos 108 px, como um apple-touch-icon.

  4. Envie o link novamente com uma query string para ver a nova prévia.


Por que a prévia do iMessage está simples ou ausente

  • Não há og:image. Por padrão, o Mensagens exibe um balão cinza com o título, domínio e um pequeno ícone.

  • As tags são adicionadas via JavaScript. As prévias de links não executam JavaScript, portanto os metadados devem estar no HTML.

  • A página usa um redirecionamento por meta refresh. O Mensagens não segue redirecionamentos por meta tag. Redirecionamentos no lado do servidor funcionam.

  • A página é muito pesada. A página principal é limitada a 1 MB, e ícones, imagens e vídeos juntos a 10 MB.

  • Dispositivos móveis e desktop recebem HTMLs diferentes. A Apple solicita os mesmos metadados para ambos.

Como corrigir isso

  1. Leia as tags com o verificador de meta tags.

  2. Adicione og:image com uma imagem de pelo menos 900 px de largura. Não coloque texto nela, pois ela pode ser exibida em tamanhos pequenos.

  3. Adicione um ícone quadrado de pelo menos 108 px. O Mensagens usa um apple-touch-icon, um favicon ou um ícone <link rel>. Teste-o com o verificador de favicon.

  4. Defina og:title com o título da página sem o nome do site e coloque a marca em og:site_name.

  5. Substitua qualquer meta refresh por um redirecionamento de servidor.

Tags que o Mensagens lê

  • og:title para a legenda

  • og:image para a imagem

  • og:site_name para a marca

  • og:video ou twitter:player:stream apontando para um arquivo de vídeo para reprodução integrada

  • Um ícone do apple-touch-icon ou o favicon

Regras de tamanho de imagem

  • Imagens com pelo menos 900 px de largura

  • Imagens com menos de 150 px de largura podem ser ignoradas ou exibidas como um ícone

  • Ícones quadrados, com pelo menos 108 px de cada lado

  • HTML da página de até 1 MB; todas as imagens, ícones e vídeos de até 10 MB

A Apple chama isso de diretrizes e diz que os limites podem mudar.

Como forçar uma atualização

O Mensagens não possui uma ferramenta de atualização. Envie a URL com uma query string, como ?v=2. Não verificado: a Apple não divulga por quanto tempo uma prévia permanece em cache. A ferramenta de atualização também abrange os outros aplicativos.

Fontes

Perguntas Frequentes

Por que o iMessage só mostra um balão de link cinza?

A página não tem nenhuma og:image utilizável, por isso o Mensagens recorrerá ao título, domínio e ícone. Adicione uma imagem com pelo menos 900 px de largura.

O iMessage executa JavaScript para gerar pré-visualizações?

Não. A Apple diz que as prévias de links não executam JavaScript nem seguem redirecionamentos meta. As tags devem estar no HTML.

Qual é o tamanho do ícone que o iMessage usa?

A Apple exige um ícone quadrado de pelo menos 108 px por lado, como um apple-touch-icon.

Verifique sua página e atualize a prévia

Cole sua URL no verificador gratuito para ver as tags exatas que cada aplicativo lê. Assim que as tags estiverem corretas, use a ferramenta de atualização para limpar a pré-visualização antiga.

Verifique sua URL

Atualizar pré-visualização

Verificar favicon

Guias relacionados

A prévia do link do WhatsApp não está funcionando ou não aparece

O WhatsApp tem limites rígidos: a tag head precisa estar nos primeiros 300 KB do HTML e a imagem deve ter menos de 600 KB. Se desrespeitar algum deles, você terá uma miniatura pequena ou nenhuma prévia.

A prévia de links do Slack não está funcionando ou não está atualizando

O Slack expande links com um bot que lê tags do oEmbed, Open Graph e Twitter Card. Os resultados ficam armazenados em cache no Slack por cerca de 30 minutos.

O card do X (Twitter) não está aparecendo ou não está atualizando

O X cria o card a partir das tags twitter:, usando as tags og: como alternativa. Não há mais um validador que atualize o cache, então a solução é usar tags corretas acompanhadas de uma nova URL.