Análise de Open Graph

Como funciona esta verificação

O Scanaris procura no <head> da tua página três etiquetas Open Graph: og:title, og:description e og:image. Se estão as três com conteúdo, não há nada a dizer. Se falta alguma, abre um achado informativo a indicar quais; se faltam as três, o achado diz diretamente que a página não tem Open Graph. É informativo, por isso não desconta pontos: não é uma falha de segurança nem de indexação, é uma oportunidade perdida de cada vez que alguém partilha o teu site.

Porque importa

Quando alguém cola a tua ligação no WhatsApp, X, LinkedIn, Slack, Discord, iMessage ou Telegram, a aplicação visita o URL, lê estas etiquetas e constrói o cartão de pré-visualização: imagem grande, título e descrição. Sem elas, o cartão sai sem imagem, com o URL em bruto ou com um pedaço de texto qualquer da página. A diferença em cliques entre uma ligação com cartão e uma sem ele é grande, sobretudo em móvel, onde o cartão ocupa o ecrã todo. E a imagem que escolheres é, para muita gente, a primeira impressão da tua marca.

Como corrigir

<meta property="og:title" content="Scanner de segurança para apps feitas com IA">
<meta property="og:description" content="Analisa o teu site em 60 segundos e recebe as falhas com a sua solução.">
<meta property="og:image" content="https://teudominio.com/og/home.png">
<meta property="og:url" content="https://teudominio.com/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

• A imagem vai em URL absoluto e em HTTPS, com 1200 por 630 píxeis, em JPG ou PNG e abaixo de 1 MB para que todas as plataformas a aceitem. Um fundo de marca, o título da página em grande e o logótipo é a fórmula que funciona.
• Uma por página, não a mesma em todas. Um artigo com o seu título na imagem partilha-se mais do que um com a imagem genérica do site. O Nuxt tem um módulo para gerar estas imagens a partir de um template; o Next.js fá-lo com um ficheiro opengraph-image.tsx em cada rota.
• Nuxt: useSeoMeta({ ogTitle, ogDescription, ogImage, twitterCard: 'summary_large_image' }). Next.js: metadata.openGraph e metadata.twitter. WordPress: o Yoast e o Rank Math geram-nas por entrada com a imagem destacada.
• twitter:card é a única etiqueta própria de que o X precisa; para título, descrição e imagem usa as og: se não encontrar as suas.

As plataformas guardam o cartão em cache na primeira vez que veem um URL. Depois de mudares as etiquetas, pede um novo rastreio no depurador de partilha do Facebook, no inspetor de publicações do LinkedIn ou no validador do X; o WhatsApp e o Telegram renovam-no sozinhos passado algum tempo.

Confirma que está corrigido

curl -s https://teudominio.com | grep -oE '<meta (property|name)="(og:|twitter:)[^"]+" content="[^"]*"'
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" "$(curl -s https://teudominio.com | grep -oE 'og:image" content="[^"]+"' | cut -d'"' -f3)"

O primeiro lista as etiquetas; o segundo descarrega a imagem e deve dar 200 com tipo de imagem. Depois cola o URL num chat contigo próprio e olha para o cartão.

Perguntas frequentes

Já tenho título e meta description. Não servem?

Algumas plataformas usam-nos como recurso, mas nenhuma mostra imagem sem og:image, e a imagem é o que dá o salto em cliques. As og: além disso deixam-te pôr um título diferente do da Google, mais curto e mais direto.

Conta para o SEO?

Não diretamente: a Google não usa o Open Graph para o ranking. Conta para que as pessoas partilhem e cliquem, o que acaba em ligações e tráfego. O que a Google lê de facto é revisto por metadados SEO.

A minha imagem aparece cortada em algumas aplicações.

Cada plataforma recorta para a sua proporção. Com 1200 por 630 e o conteúdo importante centrado, com margem nas bordas, fica bem em todas. Evita texto pequeno colado aos cantos.