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 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.

Gerador Open Graph

Gerador Open Graph que monta meta tags OG e Twitter Card com prévia ao vivo do cartão 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.

Criado e mantido por Udit Agarwal

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

Gera tags Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name)
Adiciona tags Twitter Card correspondentes (twitter:card, title, description, image)
Prévia ao vivo do cartão social que atualiza enquanto você digita
Produz um bloco de meta tags HTML limpo e pronto para copiar
Escapa corretamente caracteres especiais em títulos, descrições e URLs
Deixa você escolher o og:type e o estilo do twitter:card (como summary_large_image)
Copie para a área de transferência ou baixe as tags como meta-tags.html
Pula campos vazios para o markup gerado ficar enxuto

Como usar Gerador de Open Graph

Insira o título da página, a descrição, a URL e a URL da imagem nos campos de entrada.
Defina o og:type e o estilo do Twitter card, depois adicione o nome do seu site.
Confira a prévia ao vivo do cartão social para confirmar como o link vai aparecer.
Clique em Copiar para pegar o HTML ou use Baixar para salvar meta-tags.html.
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

A og:image não aparece nas prévias do Facebook ou LinkedIn. — Use uma URL absoluta completa (https://...) para a imagem, não um caminho relativo, e garanta que a imagem seja acessível publicamente.
O Twitter mostra uma imagem pequena em vez de um cartão grande. — Defina o valor de twitter:card como summary_large_image para as plataformas renderizarem o layout de imagem em largura total.
O título ou a descrição aparece cortado na prévia. — Mantenha os títulos em torno de 60 caracteres e as descrições entre 110 e 160 caracteres para as plataformas não truncá-los.
Caracteres especiais como & ou < quebram o markup. — Digite os caracteres normais; o gerador os escapa automaticamente em entidades HTML válidas na saída.
As plataformas ainda mostram dados antigos de prévia após você atualizar as tags. — Reescaneie a URL com o depurador da plataforma (como o Facebook Sharing Debugger) para limpar a prévia em cache.

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

Formatador de HTML — Embeleze ou minifique HTML, formate CSS/JS inline e veja a prévia do resultado.
Analisador de URL — Decomponha uma URL em suas partes e liste os parâmetros de consulta.
Codificar / Decodificar URL — Codifique e decodifique componentes de URL.
Escapar / Desescapar HTML — Escape e desescape caracteres especiais e entidades HTML.
Gerador de código QR — Gere um código QR a partir de texto ou de uma URL; baixe como PNG ou SVG.
Prévia de Markdown — Renderize Markdown em HTML com prévia ao vivo.
Conversor de formato de imagem — Converta imagens entre PNG, JPEG e WebP inteiramente no seu navegador.

Mais ferramentas de Web e DevOps

Gerador de robots.txt — Monte um robots.txt com regras de User-agent, Allow, Disallow e sitemaps.
Gerador de Sitemap XML — Transforme uma lista de URLs em um sitemap.xml válido para SEO.
Gerador de .htaccess — Monte regras do Apache: HTTPS, redirecionamentos 301, gzip e cache.
Gerador de Configuração nginx — Monte um server block nginx com proxy reverso, SSL, gzip e cache.
Calculadora SemVer — Analise, compare, verifique faixas, incremente e normalize versões semânticas, com suporte a faixas npm.
Gerador de Header Cache-Control — Monte um header HTTP Cache-Control correto com alternadores simples e saída para nginx, Apache e meta.
Gerador de Meta Tags — Gere meta tags de SEO, Open Graph e Twitter Card a partir de um formulário, no navegador.
Gerador de CSP — Monte um cabeçalho Content-Security-Policy diretiva por diretiva, com trechos prontos, no navegador.
Gerador de htpasswd — Gere uma linha .htpasswd com bcrypt ou SHA-1 para Apache e nginx, no navegador.
Gerador de Cores Tailwind — Crie uma escala Tailwind 50-950 em OKLCH a partir de uma cor.
Gerador de CSS Grid — Monte um layout de grid visualmente e copie o CSS.
Calculadora de CSS Clamp — Gere um valor clamp() fluido a partir de tamanhos e viewports.

Ver todas as ferramentas de Web e DevOps (27) · Todas as ferramentas