Gerador de Open Graph e cartões sociais

Como usar o gerador de Open Graph

1. Escreve o Título e a Descrição que queres que as pessoas vejam quando a tua ligação é partilhada. Podem ser diferentes do teu título de SEO: escreve-os a pensar num feed social.
2. Adiciona o URL da página (o endereço canónico) e o URL da imagem. Ambos têm de ser absolutos, a começar por https://.
3. Descreve a imagem em Descrição da imagem (texto alternativo), para que quem usa leitores de ecrã saiba o que ela mostra.
4. Escolhe ou larga a mesma imagem em Imagem de pré-visualização. Ela fica no teu dispositivo: a ferramenta usa-a apenas para desenhar as pré-visualizações e preencher a Largura da imagem (px) e a Altura da imagem (px).
5. Define o Nome do site, o Tipo de conteúdo e o Locale (numa página em português de Portugal, a predefinição é pt_PT), escolhe o estilo do Cartão do X (Twitter) e, se as tiveres, as contas X do site e do autor.
6. Confere as pré-visualizações e a lista de Verificações, depois usa Copiar ou Transferir e cola as etiquetas dentro do <head> da página.

O que fazem as etiquetas Open Graph

Quando uma ligação é colada no Facebook, no LinkedIn, no X, no Slack, no Discord, no WhatsApp, no iMessage e em muitas outras aplicações, um robô vai buscar a página e lê as suas meta tags Open Graph (og:) para montar um cartão: uma imagem, um título, uma descrição curta e o domínio. Sem estas etiquetas, a aplicação adivinha e escolhe muitas vezes um logótipo, um aviso de cookies ou a primeira frase do menu.

As quatro propriedades básicas são og:title, og:type, og:image e og:url. Esta ferramenta acrescenta também og:description, og:site_name, og:locale e os detalhes da imagem (og:image:width, og:image:height, og:image:alt). Declarar o tamanho da imagem permite a algumas plataformas mostrar o cartão logo na primeira partilha, em vez de esperarem que a imagem seja descarregada.

O X lê as suas próprias etiquetas twitter:, mas recorre ao título, à descrição e à imagem Open Graph quando as versões do X faltam, por isso a ferramenta só acrescenta o que o X realmente precisa: twitter:card, as contas opcionais e a descrição da imagem. Assim evita-se duplicar todos os valores.

Tamanhos de imagem que funcionam em todo o lado

Usa JPEG ou PNG, mantém o ficheiro razoavelmente leve (bem abaixo de 5 MB) e evita pôr texto importante perto das margens, porque cada plataforma recorta de forma ligeiramente diferente. As pré-visualizações desta ferramenta são aproximações desses layouts, não capturas de ecrã.

Depois de publicar

As redes sociais guardam as pré-visualizações das ligações em cache, por vezes durante dias. Depois de alterares as etiquetas, pede-lhes que voltem a ler a página com o Facebook Sharing Debugger ou o LinkedIn Post Inspector. A página tem de estar acessível ao público: os robôs não veem páginas protegidas por login nem em localhost.