Cartões sociais: Open Graph e a imagem de partilha

O que é uma pré-visualização de ligação

Quando alguém partilha uma ligação numa rede social ou numa aplicação de mensagens, a plataforma lê a página e cria um pequeno cartão: uma imagem, um título, um texto curto e o domínio. A maioria das plataformas lê para isso as etiquetas do protocolo Open Graph, que são elementos meta no head da página. O X, antigo Twitter, também lê as suas próprias etiquetas, que começam por twitter:. Cada plataforma desenha o seu cartão e decide quanto texto mostra. Tu decides o que a página diz às plataformas.

As etiquetas básicas

O protocolo Open Graph, publicado em ogp.me, indica quatro propriedades que todas as páginas devem ter: og:title, og:type, og:image e og:url. og:url é o endereço canónico da página. Opcionais, mas úteis, são og:description, og:site_name e og:locale, a língua e a região das etiquetas, por exemplo de_DE.

<meta property="og:title" content="Saldos de verão: todas as canecas com desconto">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Seis canecas azuis numa mesa de madeira">
<meta property="og:description" content="Até 31 de agosto: preços mais baixos em canecas e pratos.">
<meta property="og:site_name" content="Loja Exemplo">
<meta name="twitter:card" content="summary_large_image">

Escreve todos os endereços por extenso, com https://. O protocolo define um endereço como um URL que usa http:// ou https://, por isso um caminho como /img/sale.jpg não é um valor válido. og:url deve coincidir com a ligação canónica da página. Se uma etiqueta aparecer duas vezes com valores diferentes, o protocolo dá preferência à primeira.

A imagem de partilha

A maioria das pré-visualizações mostra a imagem em formato largo. Uma imagem com uma proporção de cerca de 1,91 : 1, por exemplo 1200 × 630 píxeis, é recomendada com frequência e cabe na maioria dos cartões sem cortes. As imagens quadradas são muitas vezes cortadas em cima e em baixo, por isso mantém o conteúdo importante ao centro. Para o Google Discover, a Google recomenda imagens com pelo menos 1200 píxeis de largura, uma pré-visualização grande permitida com a definição max-image-preview:large e uma imagem indicada com og:image ou com marcação schema.org. A Google também desaconselha imagens genéricas, como o logótipo do site.

og:image:width e og:image:height indicam o tamanho da imagem em píxeis. og:image:alt descreve o que está na imagem; não é uma legenda. O protocolo diz que uma página com og:image também deve indicar og:image:alt.

Título e descrição

og:title pode ser diferente do elemento title. Não precisa do nome do site, porque og:site_name já o indica. As plataformas cortam os textos longos no seu próprio comprimento, por isso coloca as palavras importantes primeiro. As etiquetas Open Graph também contam fora das redes sociais. A Google indica o conteúdo de og:title como uma das fontes dos links de título nos resultados de pesquisa, tem em conta og:site_name para o nome do site e refere og:image como uma forma de indicar uma imagem preferida.

Etiquetas para o X

A etiqueta twitter:card escolhe o tipo de cartão. O valor summary_large_image pede uma imagem grande e larga; summary, uma pequena. Se a tua página já tiver etiquetas Open Graph, acrescentar twitter:card muitas vezes chega. As páginas para programadores do X não puderam ser lidas para este guia, por isso confirma lá as regras atuais antes de confiares num pormenor.

Um cartão por página

Muitos sites definem o mesmo título e a mesma imagem para todas as páginas, muitas vezes através do tema. Assim, todas as ligações partilhadas ficam iguais. Dá a cada página importante o seu próprio og:title, og:description e og:image: a uma página de produto, a fotografia do produto; a um artigo, a sua imagem principal. Para og:type, o protocolo usa, entre outros tipos, website para uma página geral e article para um artigo. Um sistema de loja ou de conteúdos pode preencher estas etiquetas automaticamente a partir do título, do resumo e da imagem principal de cada página. Depois de uma alteração, verifica uma página de cada modelo.

Porque é que a pré-visualização não muda

Muitas plataformas guardam um cartão depois de o criarem. Se mais tarde mudares a imagem ou o título, as pessoas podem continuar a ver o cartão antigo durante algum tempo. Um novo nome de ficheiro para uma nova imagem ajuda, porque a plataforma vê então um endereço novo. Algumas plataformas oferecem uma ferramenta que volta a ler a página.

Antes de partilhares uma página

• og:title, og:type, og:image e og:url estão presentes, e og:url é o endereço canónico?
• Todos os endereços estão completos, com https://?
• A imagem é suficientemente larga, carrega e tem o conteúdo importante ao centro?
• og:image:alt, og:image:width e og:image:height estão definidos?
• Existe uma etiqueta twitter:card, e o título é suficientemente curto?

Trabalhar com o Do4U

A Verificação do cartão social mostra como fica uma página quando a sua ligação é partilhada e verifica as etiquetas por trás da pré-visualização. Introduzes um endereço. O Do4U lê a página e o início da sua imagem de partilha. O código recolhe as etiquetas Open Graph, as etiquetas de cartão do Twitter/X e as alternativas, ou seja, o título, a meta descrição e a primeira imagem, bem como a ligação canónica e a língua. Lê do ficheiro o formato e o tamanho reais da imagem e compara-os com as etiquetas. Recebes uma pré-visualização neutra, uma tabela de todas as etiquetas, conclusões com um motivo curto e etiquetas sugeridas para copiar. As etiquetas que uma página só define com JavaScript não são vistas. Não é usada IA, e a verificação é gratuita, com um limite diário.

O Do4U encontra indícios; tu verificas e decides. A pré-visualização é um esboço neutro: a forma como uma plataforma mostra a ligação é decidida pela plataforma.