Gerador de tags meta Open Graph

As tags a partir das quais se constrói uma pré-visualização de link

Quando alguém cola o seu link numa publicação ou numa mensagem, a app envia um crawler à página e lê um punhado de tags <meta> no <head>. Essas tags vêm do protocolo Open Graph, que indica quatro como obrigatórias:

• og:title: o título tal como deve aparecer na pré-visualização.
• og:type: o que é a página. website serve para a maioria das páginas e article serve para um artigo de blogue. O protocolo também define tipos como profile, book, video.movie e music.song.
• og:image: o URL da imagem que representa a página.
• og:url: o URL canónico, que o protocolo designa como o ID permanente do objeto.

O protocolo também define tags opcionais, e o gerador escreve as mais úteis: og:description, og:site_name, e os detalhes da imagem og:image:width, og:image:height e og:image:alt. Quanto ao texto alternativo, o protocolo é direto: se uma página especifica og:image, deve especificar og:image:alt, e esse texto descreve o que está na imagem, não é uma legenda.

O que o X acrescenta: twitter:card

O X também lê Open Graph. A sua referência de markup de cards (a documentação para programadores do X, ligada aqui através do Internet Archive porque a página original agora redireciona) indica o fallback para cada tag: twitter:title recorre a og:title, twitter:description a og:description, twitter:image a og:image e twitter:image:alt a og:image:alt. Por isso, a única tag que vale a pena adicionar é twitter:card, que escolhe o layout. Se a omitir, a mesma referência indica que o X pode recorrer a um summary card pequeno, mesmo que quisesse o grande:

• summary_large_image: uma imagem de largura total acima do título. A página do card de imagem grande do X indica que as imagens para este formato suportam uma proporção de 2:1, com dimensões mínimas de 300 × 157 e um máximo de 4096 × 4096 pixels, abaixo de 5MB, em JPG, PNG, WEBP ou GIF. SVG não é suportado.
• summary: um card mais pequeno com uma imagem quadrada. A página do summary card do X indica que a imagem suporta uma proporção de 1:1, de 144 × 144 até 4096 × 4096 pixels, e é recortada para um quadrado em todas as plataformas.

A mesma referência lista os cards app e player, que exigem campos extras de loja de aplicativos ou de player de vídeo, por isso eles ficam de fora aqui. Ela também documenta os limites que as verificações acima usam: 70 caracteres para o título, 200 para a descrição e 420 para o texto alternativo.

Tamanhos de imagem indicados pelas plataformas

• LinkedIn: o seu guia para tornar um site compartilhável pede og:title, og:image, og:description e og:url, e lista um tamanho máximo de arquivo de 5 MB, um mínimo de 1200 × 627 pixels e uma proporção recomendada de 1.91:1.
• Meta: as suas melhores práticas de compartilhamento indicam usar imagens com pelo menos 1080 pixels de largura para telas de alta resolução, e pelo menos 600 pixels de largura para exibir anúncios de link com imagem. A mesma página pede og:image:width e og:image:height para que o rastreador possa renderizar a imagem imediatamente, sem precisar baixá-la e processá-la primeiro.

Uma imagem de 1200 × 630 atende a todos esses requisitos: tem pelo menos 1200 × 627 para o LinkedIn, mais de 1080 de largura para a Meta e 1.905:1, dentro de 5% da proporção 2:1 do X.

Verifique e atualize pré-visualizações antigas

Os aplicativos armazenam em cache o que rastrearam, então corrigir as tags não corrige uma pré-visualização que já foi armazenada. As duas grandes redes oferecem uma ferramenta para isso:

• O Sharing Debugger da Meta mostra as tags que o seu rastreador lê, com quaisquer erros ou avisos, e aciona uma nova leitura. O guia para webmasters da Meta o descreve, e a página de melhores práticas observa que, de outra forma, o conteúdo lido é atualizado em um período padrão de 24 horas.
• O Post Inspector do LinkedIn atualiza uma URL em cache. A página de ajuda do LinkedIn observa que a atualização afeta apenas novas publicações: as publicações que já incluem a URL mantêm a pré-visualização antiga.

O que esta ferramenta não faz

Ela não busca a sua página nem a sua imagem, por isso não pode ver o que está realmente no ar, e a pré-visualização acima é um esboço em texto, não uma renderização. Ela escreve as tags; o seu site ainda precisa entregá-las no <head> da página, no HTML que o rastreador recebe. Tags adicionadas depois por JavaScript podem nunca ser vistas. E ela não escreve cards app ou player, nem as propriedades extras que tipos como book ou video.movie definem.

Se você prefere não escrever isto à mão

O Hermoso é marketing no piloto automático: ele pesquisa os anúncios que já funcionam no seu mercado, cria anúncios de imagem e vídeo alinhados à sua marca, agenda as publicações e gerencia campanhas pagas nas suas próprias contas de anúncios. Funciona no app web ou dentro do Claude, ChatGPT e Cursor através do seu servidor MCP.

Ferramentas gratuitas: Construtor de links UTM · Gerador de QR code · Guia de tamanhos para redes sociais

Perguntas frequentes

Quais tags Open Graph são obrigatórias?

O protocolo Open Graph lista quatro propriedades obrigatórias: og:title, og:type, og:image e og:url. As tags og:description, og:site_name e a largura, altura e alt de og:image são opcionais, mas vale a pena adicioná-las.

Preciso de twitter:title e twitter:image se já tenho tags og:?

Não. A referência de marcação de cards do X diz que twitter:title, twitter:description, twitter:image e twitter:image:alt recorrem aos seus equivalentes og:. A tag que vale a pena adicionar é a twitter:card, que escolhe o layout do card.

Qual deve ser o tamanho de uma imagem Open Graph?

O LinkedIn pede pelo menos 1200 × 627 pixels em 1,91:1 e abaixo de 5 MB. A Meta sugere pelo menos 1080 pixels de largura. O card de imagem grande do X suporta 2:1 de 300 × 157 a 4096 × 4096. Uma imagem de 1200 × 630 serve para os três.

Por que meu link ainda mostra uma imagem antiga depois que mudei as tags?

O aplicativo guardou em cache a leitura antiga. Passe a URL pelo Sharing Debugger da Meta ou pelo Post Inspector do LinkedIn para buscá-la de novo. O LinkedIn observa que publicações que já compartilham a URL mantêm a prévia antiga.

Por que as aspas e os e comerciais aparecem alterados na saída?

Eles recebem escape HTML para que a tag continue válida. Um título como Tom & Jerry's "Sale" vira Tom & Jerry's "Sale" dentro do atributo content, e navegadores e rastreadores leem de volta como o texto original.

A ferramenta carrega minha imagem?

Não. Nada do que você digita é enviado a lugar algum e a URL da imagem nunca é buscada, por isso a prévia mostra um espaço reservado em vez da imagem.