What image size should I use for OG tags?

The recommended OG image size is 1200×630 pixels with a 1.91:1 aspect ratio. This ensures your image displays correctly on Facebook, Twitter, LinkedIn, and Discord. Images should be under 8MB and in JPG, PNG, or WebP format. Smaller images may appear cropped or pixelated on some platforms.

Do I need both OG tags and Twitter Card tags?

Not strictly — Twitter falls back to OG tags if Twitter-specific tags are missing. However, adding Twitter Card tags gives you more control and ensures optimal display. The "summary_large_image" card type is recommended for most content as it shows a large image preview.

Where do I put these meta tags?

Place all meta tags inside the section of your HTML document. If you're using a framework like Next.js, React, or Vue, use the framework's head management system (e.g., next/head, react-helmet) to add the tags dynamically. The JSON-LD script tag also goes in the .

How do I test my OG tags?

After publishing, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) to verify your OG tags. For Twitter, use the Card Validator (cards-dev.twitter.com/validator). This tool's built-in preview gives you a good approximation, but always verify with the official tools after deployment.

🏷️

OG Meta Tag Generator & Social Preview

Generate Open Graph, Twitter Card, and JSON-LD tags. Preview on Facebook, Twitter, LinkedIn, and Discord.

100% LOCALOG + Twitter + JSON-LD4 platform previewsArticle & product typesHTML & JSON-LD output

Page Details

Title *

Description *

159 / 160 chars

URL *

OG Image URL *

OG Type

Twitter Card

Site Name

Locale

Twitter Handle

Social Preview

freetoolhub.org

OG Meta Tag Generator & Social Preview — FreeToolHub

Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. …

<meta charset="UTF-8">
<title>OG Meta Tag Generator &amp; Social Preview — FreeToolHub</title>
<meta name="description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://freetoolhub.org/og-meta-generator/">
<meta property="og:title" content="OG Meta Tag Generator &amp; Social Preview — FreeToolHub">
<meta property="og:description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required.">
<meta property="og:image" content="https://freetoolhub.org/og-image.png">
<meta property="og:site_name" content="FreeToolHub">
<meta property="og:locale" content="en_US">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://freetoolhub.org/og-meta-generator/">
<meta name="twitter:title" content="OG Meta Tag Generator &amp; Social Preview — FreeToolHub">
<meta name="twitter:description" content="Generate Open Graph, Twitter Card, and JSON-LD tags with live previews for Facebook, X/Twitter, LinkedIn, and Discord. Free, browser-based, no signup required.">
<meta name="twitter:image" content="https://freetoolhub.org/og-image.png">
<meta name="twitter:site" content="@freetoolhub">
<meta name="twitter:creator" content="@freetoolhub">

Next Steps

Generate a QR code

Share your optimized page with a QR code for print or digital

QR code →

Data Source & Legal Disclaimer

Effective: 2026

Sources: Browser-side processing (no external API)

This tool runs 100% in your browser. All computation happens locally on your device — your input is never uploaded to any server. Results are for reference only.

See all data sources & update policy →

Como funcionaPage 2

↩ Voltar à calculadora

How a link becomes a rich card — illustrated

When you paste a link into a chat or post, the platform's crawler fetches the page, reads a handful of <meta> tags, and renders a card from them. Open Graph (og:*) is the standard most platforms read; Twitter Card (twitter:*) is the X-specific flavor; JSON-LD is structured data that Google and others use for richer search results. No tags = the crawler guesses a title and a random image, which is why so many shares look broken. If the title is missing or the image fails to load, the card falls back to a plain, un-clickable text link.

Share URL → crawl → render

og:title, og:description, og:image and og:url are the four tags almost every platform reads. The crawler caches the result, so edits to your page may need a re-scrape before the new card appears.

A shareable blog post

You want every link to your new article to open as a rich card.

Title under 60:Keep og:title ≤ 60 chars so it never truncates in cards
Description 120–160:og:description should say what the page delivers, not keywords
Image 1200×630:That is the 1.91:1 ratio every major platform crops to
Test before publish:Preview all four platforms in this tool before you ship the tags

↩ Back to generator

FAQ e detalhesPage 3

↩ Voltar à calculadora

Generate Open Graph, Twitter Card, and JSON-LD tags. Everything runs locally; nothing is uploaded.

FreeToolHub Open Graph Meta Tag Generator is a free browser-based tool — generate Open Graph, Twitter Card, and JSON-LD tags. No signup, no upload; everything runs locally in your browser.

Sobre esta ferramenta

O que é esta ferramenta?

Gere tags Open Graph, Twitter Card e JSON-LD. Visualize no Facebook, Twitter, LinkedIn e Discord. Gerador de meta tags gratuito — sem cadastro, 100% baseado em navegador.

OG + Twitter + JSON-LD4 platform previewsArticle & product typesHTML & JSON-LD output

O Que São Meta Tags Open Graph?

As meta tags Open Graph (OG) são tags HTML que controlam como sua página da web aparece quando compartilhada em plataformas de redes sociais como Facebook, LinkedIn e Discord. Elas definem o título, descrição, imagem e tipo de conteúdo que aparece no cartão de visualização do link. Sem tags OG, as plataformas sociais adivinham o que mostrar — frequentemente resultando em imagens ausentes, títulos incorretos ou visualizações quebradas.

O Que São Tags Twitter Card?

As meta tags Twitter Card são semelhantes às do Open Graph, mas especificamente para o Twitter/X. O tipo mais comum é "summary_large_image", que exibe uma imagem grande acima do título e da descrição. O Twitter recorre às tags OG se as tags específicas do Twitter estiverem faltando, mas adicioná-las dá a você mais controle sobre como seu conteúdo aparece nos tweets.

Por Que Usar Dados Estruturados JSON-LD?

JSON-LD é o formato preferido do Google para dados estruturados. Ele ajuda os mecanismos de busca a entenderem o tipo do seu conteúdo (artigo, produto, site) e pode habilitar resultados ricos na busca — como datas de publicação de artigos, preços de produtos e navegação em "migalhas de pão". Esta ferramenta gera JSON-LD junto com suas meta tags, dando a você otimização para redes sociais e mecanismos de busca em um único passo.

Perguntas frequentes

Que tamanho de imagem devo usar para as tags OG?

O tamanho de imagem recomendado para OG é 1200×630 pixels com uma proporção de aspecto de 1,91:1. Isso garante que sua imagem seja exibida corretamente no Facebook, Twitter, LinkedIn e Discord. As imagens devem ter menos de 8MB e estar nos formatos JPG, PNG ou WebP. Imagens menores podem aparecer cortadas ou pixeladas em algumas plataformas.

Preciso tanto de tags OG quanto de tags Twitter Card?

Não estritamente — o Twitter recorre às tags OG se as tags específicas do Twitter estiverem faltando. No entanto, adicionar tags Twitter Card dá a você mais controle e garante exibição ideal. O tipo de cartão "summary_large_image" é recomendado para a maioria dos conteúdos, pois mostra uma visualização de imagem grande.

Onde colocar essas meta tags?

Coloque todas as meta tags dentro da seção <head> do seu documento HTML. Se você estiver usando um framework como Next.js, React ou Vue, use o sistema de gerenciamento de cabeçalho do framework (por exemplo, next/head, react-helmet) para adicionar as tags dinamicamente. A tag de script JSON-LD também vai no <head>.

Como testar minhas tags OG?

Após publicar, use o Facebook Sharing Debugger (developers.facebook.com/tools/debug/) para verificar suas tags OG. Para o Twitter, use o Card Validator (cards-dev.twitter.com/validator). A visualização embutida nesta ferramenta lhe dá uma boa aproximação, mas sempre verifique com as ferramentas oficiais após a implantação.

Outros nomes desta ferramenta

Esta ferramenta também é conhecida por estas tarefas — cada link abre a mesma ferramenta com um guia focado:

Open Graph meta tags generator — Open Graph Meta Tags Generator