What are Open Graph tags?

Open Graph (OG) tags are meta tags placed in your page's that control how your content appears when shared on social platforms like Facebook, LinkedIn, Slack, and WhatsApp — defining the title, description, image, and type shown in the preview card.

What OG image size should I use?

The recommended OG image size is 1200 × 630 pixels (1.91:1 aspect ratio). This gives the best display quality across Facebook, LinkedIn, and Twitter large-image cards. Minimum is 600 × 315px.

What is the difference between Twitter card types?

summary shows a small thumbnail beside your title and description. summary_large_image shows a large banner image above the text. app is for mobile app promotion. player embeds a media player. For most articles and pages, summary_large_image delivers the best visual impact.

Do I need both OG tags and Twitter Card tags?

Yes. Twitter has its own tag set (twitter:*) and will not fall back to OG tags for all fields. This generator outputs both sets plus the standard meta description in a single code block.

Will these tags work on Facebook, LinkedIn, and Slack?

Yes. Facebook, LinkedIn, Slack, Discord, WhatsApp, and most other platforms read og:* tags to generate link previews. Twitter reads twitter:* tags first and falls back to og:* where its own tags are absent.

OG Tag Generator – Open Graph & Twitter Card Tags with Live Preview

Generate Open Graph and Twitter Card meta tags with a live social media preview — see exactly how your link will appear on Facebook, LinkedIn, Slack, and Twitter before you publish. Supports 6 OG content types, 4 Twitter card styles, og:locale, og:site_name, and outputs copy-ready HTML in one block.

OG Tag Generator

Generate Open Graph & Twitter Card meta tags for your pages.

Import Existing Tags From URL

Page Title0/60 characters

Description0/160 characters

Page URL

Image URL

Site Name

Locale

OG Type

Twitter Card

Twitter @username

Social Preview

Image preview

example.com

Page Title

Page description will appear here

Generated Meta Tags

<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary_large_image" />

🌐

Open Graph

Facebook, LinkedIn, and most platforms use OG tags.

🐦

Twitter Cards

Twitter-specific meta tags for rich link previews.

👁️

Live Preview

See how your page will look when shared on social media.

What This OG Tag Generator Creates

Open Graph Tag Generator

Generates og:title, og:description, og:url, og:image, og:type, og:locale, and og:site_name with 6 content type options.

Twitter Card Generator

Generates twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site with 4 card type options.

Live Social Preview

Real-time Facebook/LinkedIn-style card preview showing your OG image at 1.91:1 ratio, hostname, title, and description.

Standard Meta Description

Also outputs a standard <meta name='description'> tag alongside OG and Twitter tags in one copy-ready block.

How to Generate Open Graph Tags

Enter page details

Fill in page title, description, URL, image URL, and site name. Fields update the live preview and generated tags in real time.

Choose OG type & Twitter card

Select the right OG type (website, article, product…) and Twitter card style (summary, summary_large_image…) for your content.

Check the social preview

The live preview card shows how your link will look on Facebook, LinkedIn, and similar platforms before you publish.

Copy the generated tags

Click Copy to grab all generated meta tags as HTML-ready code and paste them into your page's <head> section.

Why OG Image Is the Most Important Social Tag

When your link is shared on Facebook, LinkedIn, or Slack, the OG image is the single largest visual element in the preview card. Links with a compelling, correctly sized OG image consistently receive higher engagement than links with missing or poorly sized images — because the image is what catches the eye before the title is read. The recommended size is 1200×630px (1.91:1 ratio). Images smaller than 600×315px may be shown as a small thumbnail beside the text rather than a large card. Square images work better for Twitter's summary card format. If your CMS generates OG images automatically (like WordPress with Yoast or Next.js with next/og), verify that the generated image URL is actually accessible and that the image dimensions are correct — a common issue is the og:image URL pointing to a path that returns a 404 or a redirect. You can test your OG tags using Facebook's Sharing Debugger or LinkedIn's Post Inspector after publishing.

Where to Place Meta Tags in Your Page (and Common Mistakes)

All meta tags — including OG tags and Twitter Card tags — must be placed inside the<head> element of your HTML page, before the closing </head> tag. In Next.js, use the built-in Metadata API (or the legacyHead component) to inject tags server-side so crawlers and social scrapers see them. In WordPress, use a plugin like Yoast SEO or Rank Math that outputs OG tags automatically per post. The most common mistakes: placing OG tags in the <body> (not read by social crawlers), using a relative URL for og:image instead of a full absolute URL with https://, forgetting twitter:card (without it Twitter ignores all other twitter:* tags), and setting og:type incorrectly — most pages should be "website" unless they are articles, products, or profiles. Copy the complete output from this generator and paste it directly inside your page's<head> — no manual rewriting needed.

Frequently Asked Questions

What are Open Graph tags?: Open Graph (OG) tags are meta tags placed in your page's <head> that control how your content appears when shared on social platforms like Facebook, LinkedIn, Slack, and WhatsApp — defining the title, description, image, and type shown in the preview card.
What OG image size should I use?: The recommended OG image size is 1200 × 630 pixels (1.91:1 aspect ratio). This gives the best display quality across Facebook, LinkedIn, and Twitter large-image cards. Minimum is 600 × 315px.
What is the difference between Twitter card types?: summary shows a small thumbnail beside your title and description. summary_large_image shows a large banner image above the text. app is for mobile app promotion. player embeds a media player. For most articles and pages, summary_large_image delivers the best visual impact.
Do I need both OG tags and Twitter Card tags?: Yes. Twitter has its own tag set (twitter:*) and will not fall back to OG tags for all fields. This generator outputs both sets plus the standard meta description in a single code block.
Will these tags work on Facebook, LinkedIn, and Slack?: Yes. Facebook, LinkedIn, Slack, Discord, WhatsApp, and most other platforms read og:* tags to generate link previews. Twitter reads twitter:* tags first and falls back to og:* where its own tags are absent.

SEO Tools