Gerador de Open Graph

Gere meta tags Open Graph e Twitter com prévia do card social.

Os valores dos seus campos são transformados em meta tags localmente no seu navegador, e nada do que você insere é enviado para um servidor.

Precisa inspecionar as partes de um link? Experimente o Analisador de URL.

Sobre Gerador de Open Graph

Este gerador Open Graph monta as meta tags Open Graph e Twitter Card que suas páginas precisam para exibir prévias de link ricas nas plataformas sociais. Preencha o título, a descrição, a URL canônica, a og:image, o tipo, o nome do site e o estilo do Twitter card, e veja uma prévia ao vivo do cartão social atualizar enquanto você digita, antes de copiar o HTML pronto. É útil para desenvolvedores, profissionais de marketing e equipes de conteúdo que querem meta tags sociais corretas sem escrever cada propriedade na mão. Como gerador de meta tags og e gerador de twitter card, ele cobre as tags og:image comuns e as meta tags sociais para que os links compartilhados no Facebook, LinkedIn, Slack e X fiquem caprichados. Tudo roda localmente no seu navegador, então o que você digita é processado no seu dispositivo e nada é enviado para um servidor.

Recursos

Como usar Gerador de Open Graph

  1. Insira o título da página, a descrição, a URL e a URL da imagem nos campos de entrada.
  2. Defina o og:type e o estilo do Twitter card, depois adicione o nome do seu site.
  3. Confira a prévia ao vivo do cartão social para confirmar como o link vai aparecer.
  4. Clique em Copiar para pegar o HTML ou use Baixar para salvar meta-tags.html.
  5. Cole as tags geradas na seção <head> da sua página.

Exemplo

Entrada

title: Dia do Lançamento
url: https://acme.dev/launch
image: https://acme.dev/og.png

Saída

<title>Dia do Lançamento</title>
<!-- Open Graph -->
<meta property="og:title" content="Dia do Lançamento" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://acme.dev/launch" />
<meta property="og:image" content="https://acme.dev/og.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Dia do Lançamento" />
<meta name="twitter:image" content="https://acme.dev/og.png" />

Campos vazios são omitidos, e o og:type assume website como padrão.

Erros comuns e solução de problemas

Perguntas frequentes

O que é o Gerador Open Graph?
O Gerador Open Graph é uma ferramenta que produz um bloco HTML pronto para colar com meta tags Open Graph e Twitter Card, montado a partir do seu título, descrição, URL, imagem, tipo e nome do site.
Como uso o Gerador Open Graph para criar meta tags?
Preencha o título da página, a descrição, a URL canônica, a og:image, o tipo e o nome do site, veja a prévia ao vivo atualizar, depois clique em Copiar ou Baixar e cole as tags no <head> da sua página.
Qual a diferença entre tags Open Graph e Twitter Card?
As tags Open Graph (og:) são lidas pelo Facebook, LinkedIn, Slack e muitos outros, enquanto as tags twitter: são específicas do X/Twitter. Esta ferramenta gera as duas para as prévias funcionarem em todo lugar.
Qual tamanho de og:image funciona melhor?
Uma imagem de 1200x630 pixels com uma URL absoluta é a escolha segura para cartões summary_large_image na maioria das plataformas.
Por que minhas alterações não aparecem quando compartilho o link?
As plataformas sociais guardam as prévias em cache, então cole sua URL no depurador de compartilhamento delas para forçar um novo escaneamento após atualizar as meta tags.
O que eu digito no Gerador Open Graph fica privado?
Sim. As tags são montadas localmente no seu navegador, seus dados nunca saem do seu dispositivo e nada do que você insere é enviado para um servidor.

Ferramentas relacionadas

Todas as ferramentas de ArrayKit