What are Open Graph (OG) meta tags?

The Open Graph protocol was introduced by Facebook to enable web pages to become rich objects in social media feeds. When a URL is shared on platforms like Facebook, LinkedIn, Slack, Discord, and iMessage, crawlers inspect og:title, og:description, og:image, and og:url to render an interactive link preview card.

Which Open Graph tags are mandatory for social sharing?

The four essential tags are og:title (the headline), og:type (usually 'website' or 'article'), og:image (absolute URL to preview image), and og:url (the canonical link). Platforms also strongly recommend og:description and og:site_name.

What is the recommended size for an Open Graph image?

1200 × 630 pixels (a 1.91:1 aspect ratio) is the universal standard. This ensures sharp, high-resolution rendering on retina screens across Facebook, LinkedIn, and Twitter/X large cards. The image URL must be an absolute HTTPS link.

Why does Twitter / X need its own meta tags?

While X falls back to standard Open Graph tags if Twitter tags are missing, twitter:card (such as 'summary_large_image' or 'summary') instructs X whether to display a full-width hero image or a compact thumbnail. Using dedicated twitter: tags ensures optimal display formatting on X.

How do I test my Open Graph tags after deploying?

Use official free crawler validation tools: Facebook Sharing Debugger, LinkedIn Post Inspector, and the X Card Validator. These tools force platforms to refresh cached preview data when you update a page.

How do I generate Open Graph tags without this page?

In the of your HTML, add , , , , and . For X, add . Always escape special characters (&, , ") in attribute content.

Can Open Graph tags be tested locally before deployment?

Yes. Plaintools previews the share card directly in your browser. If you want Facebook or LinkedIn's official debuggers to test the page, the site must be public—use a preview URL or a tunnel like Cloudflare Tunnel to expose your local build.

Open Graph generator

Generate Open Graph meta tags and Twitter Card HTML with interactive social preview cards. Test your title, description, canonical URL, and 1200×630 share image for Facebook, LinkedIn, and X, then copy clean meta tags straight into your HTML head. Everything runs locally in your browser — no URLs or copy leave your device.

Runs locally · No tracking · Browser-only

Page Title (og:title)

34 characters. Recommended: 50–60 characters.

Description (og:description)

109 characters. Recommended: 110–160 characters.

Canonical Page URL (og:url)

Absolute HTTPS URL.

Open Graph Image URL (og:image)

Absolute image URL (recommended: 1200 × 630 px).

Image Alt Text (og:image:alt)

Accessibility description for screen readers.

Open Graph Type (og:type)

Site Name (og:site_name)

Twitter / X Card Format (twitter:card)

Twitter / X Handle (twitter:site)

Optional brand or creator handle.

Facebook / LinkedIn Preview

plaintools.io

Plaintools — Private Browser Tools

Fast, private utility shed where files and data never leave your browser. Zero tracking, zero server uploads.

X / Twitter Preview (summary_large_image)

Plaintools — Private Browser Tools

Fast, private utility shed where files and data never leave your browser. Zero tracking, zero server uploads.

plaintools.io

Paste the copied <meta> tags into the <head> section of your HTML document or layout component.

Also building tracking or structured URLs? Use the UTM generator, Slug generator, or Schema markup generator.

Open Graph generator example

Article page with summary large image card

og:title '10 Principles of Resilient Software', og:description 'Practical architecture guide...', og:image 'https://example.com/cover.jpg', og:type 'article', twitter:card 'summary_large_image'. Generates full head meta tags and social card preview.

Open Graph generator how-to

Sanitize and trim inputs; escape HTML special characters (&, <, >, ", ').
Validate title length (50–60 chars recommended) and description length (110–160 chars recommended).
Verify url and image are absolute URLs starting with http:// or https://.
Assemble primary HTML tags: <title>, <meta name="title">, <meta name="description">.
Assemble Open Graph tags: og:type, og:url, og:title, og:description, og:image, og:image:alt, og:site_name, og:locale.
Assemble Twitter Card tags: twitter:card, twitter:url, twitter:title, twitter:description, twitter:image, twitter:site.
Emit combined HTML snippet with explanatory section comments.

Related tools

SEO

Schema markup generator

Build FAQ, HowTo, Article, Product, LocalBusiness, Breadcrumb, and Organization JSON-LD.

SEO

UTM generator

Add source, medium, campaign, term, and content parameters to a URL you already own.

SEO

Slug generator

Turn a title into a lowercase URL slug, with stop words stripped and unicode transliterated.

SEO

Favicon generator

Convert any image into PNG favicons (16×16, 32×32, 48×48), favicon.ico, and Apple touch icons.

SEO

Robots.txt generator

Generate RFC 9309 robots.txt files with allow/disallow paths, bot groups, sitemaps, and crawl delays.

SEO

Meta tag generator

Generate HTML title, meta description, canonical, robots, viewport, and theme-color tags with live Google SERP preview. Nothing is uploaded.

People also use

SEO

Open Graph generator FAQ

What are Open Graph (OG) meta tags?: The Open Graph protocol was introduced by Facebook to enable web pages to become rich objects in social media feeds. When a URL is shared on platforms like Facebook, LinkedIn, Slack, Discord, and iMessage, crawlers inspect og:title, og:description, og:image, and og:url to render an interactive link preview card.
Which Open Graph tags are mandatory for social sharing?: The four essential tags are og:title (the headline), og:type (usually 'website' or 'article'), og:image (absolute URL to preview image), and og:url (the canonical link). Platforms also strongly recommend og:description and og:site_name.
What is the recommended size for an Open Graph image?: 1200 × 630 pixels (a 1.91:1 aspect ratio) is the universal standard. This ensures sharp, high-resolution rendering on retina screens across Facebook, LinkedIn, and Twitter/X large cards. The image URL must be an absolute HTTPS link.
Why does Twitter / X need its own meta tags?: While X falls back to standard Open Graph tags if Twitter tags are missing, twitter:card (such as 'summary_large_image' or 'summary') instructs X whether to display a full-width hero image or a compact thumbnail. Using dedicated twitter: tags ensures optimal display formatting on X.
How do I test my Open Graph tags after deploying?: Use official free crawler validation tools: Facebook Sharing Debugger, LinkedIn Post Inspector, and the X Card Validator. These tools force platforms to refresh cached preview data when you update a page.
How do I generate Open Graph tags without this page?: In the <head> of your HTML, add <meta property="og:title" content="Your Title" />, <meta property="og:description" content="Your Description" />, <meta property="og:image" content="https://example.com/image.jpg" />, <meta property="og:url" content="https://example.com/page" />, and <meta property="og:type" content="website" />. For X, add <meta name="twitter:card" content="summary_large_image" />. Always escape special characters (&, <, >, ") in attribute content.
Can Open Graph tags be tested locally before deployment?: Yes. Plaintools previews the share card directly in your browser. If you want Facebook or LinkedIn's official debuggers to test the page, the site must be public—use a preview URL or a tunnel like Cloudflare Tunnel to expose your local build.