Open Graph Generator

Create optimized OG & Twitter meta tags for social sharing in seconds.

Generate clean, copy-ready HTML meta tags to improve how links to your page appear on Facebook, LinkedIn, Twitter and other platforms.

Fast • SEO-friendly • Responsive
Paste tags into <head> — works with most CMS

Tool Inputs












Definition

Open Graph tags are meta tags inside the <head> of an HTML page that tell social networks exactly what content, title, description and image to show when a link is shared.

Key Features

  • Generate Facebook Open Graph & Twitter Card meta tags
  • Validate required fields and URLs
  • Preview and copy-ready, nicely formatted HTML
  • Download tags as a small .html snippet
  • Mobile-responsive, minimal inline CSS for portability

How to Use

  1. Fill Title and Description (title is required).
  2. Optionally add canonical URL, image, site name & locale.
  3. Click Generate OG Tags to produce formatted meta tags.
  4. Use Copy to Clipboard or Download .html to save them.
  5. Paste the tags into your page <head> for improved social previews.

Generated Meta Tags


Real-World Use Cases

  • Marketing teams crafting consistent link previews across social platforms.
  • Developers and site admins adding OG tags to landing pages and blog posts.
  • eCommerce pages ensuring product cards look right when shared.
  • Agencies producing social-ready pages for campaigns.

Benefits

  • Better click-through rates due to attractive previews.
  • Consistent presentation across Facebook, LinkedIn, and other scrapers.
  • Improved brand recognition via custom images and site names.

FAQ

1. What are Open Graph tags?
Open Graph tags are HTML meta tags that tell social platforms what content to show when your URL is shared.
2. Which tags are required?
At minimum: og:title and og:description. A powerful preview also needs og:image and og:url.
3. What size should the OG image be?
For best results use at least 1200×630 pixels for a wide image. Twitter has its own size preferences for card types.
4. Will these tags work with my CMS?
Yes — paste the generated HTML inside your page <head> or into your CMS’s SEO/Open Graph fields.
5. Do social platforms update immediately?
Platforms often cache pages. Use their link debugging tools (e.g., Facebook Sharing Debugger) to force a refresh.
6. Is there a preview of how it will look on social networks?
This tool generates tag markup — use platform-specific preview tools (Facebook/Twitter card validators) for a visual check.

Disclaimer

This tool generates suggested Open Graph and Twitter Card meta tag markup for convenience. It does not automatically add tags to your website — you must paste or install the generated code into your site’s <head> yourself. Always check platform validators and caching behavior after updating tags.

What Are Open Graph Tags and How Do They Work?

Open Graph (OG) is a protocol originally created by Facebook in 2010 that standardizes how web pages describe themselves to social platforms. When you share a link on Facebook, LinkedIn, Twitter, WhatsApp, Slack, or Discord, the platform’s crawler fetches the page and reads the Open Graph meta tags in the HTML <head> to determine what title, description, image, and other details to display in the link preview.

Without Open Graph tags, platforms make their own guesses — often pulling random text from the page or failing to find an appropriate image. The result is an unattractive, incomplete, or misleading preview that gets far fewer clicks than a properly configured one.

Open Graph tags look like this in HTML:

<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear description of your page." />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

This tool generates all of these tags instantly from the form inputs — no manual HTML coding required.

The Essential Open Graph Tags Explained

og:title — The title that appears in the social preview card. Keep it under 60 characters to prevent truncation. This does not need to match your page’s HTML title tag exactly — you can craft a more social-media-optimized version.

og:description — The descriptive text shown below the title in the preview. Aim for 150–300 characters. Focus on what the user will get from the page rather than repeating the title. Strong descriptions improve click-through rates significantly.

og:image — The image shown in the preview card. This is the single most important element for engagement — posts with images consistently outperform text-only previews. Use an image of at least 1200×630 pixels for optimal display across platforms. Smaller images may not display correctly or may be cropped.

og:url — The canonical URL of the page. This ensures that when your content is shared from multiple URLs (with and without www, with tracking parameters, etc.) all shares consolidate into one unified preview with combined engagement metrics.

og:type — Describes the type of content: website, article, product, or profile. Use “article” for blog posts and news pages, “product” for e-commerce items, and “website” for general pages.

og:site_name — The name of your website as you want it to appear in previews. Helps with brand recognition especially when content is shared outside your usual audience.

Twitter Card Tags — What They Add

Twitter (now X) has its own parallel system called Twitter Cards that works alongside Open Graph. This tool generates both sets of tags simultaneously.

The key Twitter-specific tags are:

twitter:card — Defines the card layout. “summary” shows a small square image thumbnail. “summary_large_image” shows a large banner image above the title — this format consistently generates higher engagement and is recommended for most content.

twitter:title and twitter:description — Twitter reads og:title and og:description as fallbacks if Twitter-specific tags are absent, but setting them explicitly gives you control over Twitter-specific presentation.

If og: tags are already set, Twitter-specific tags are optional but recommended for maximum control.

Platform-Specific Image Size Requirements

PlatformRecommended Image SizeAspect Ratio
Facebook1200 × 630 px1.91:1
Twitter/X (large card)1200 × 628 px1.91:1
LinkedIn1200 × 627 px1.91:1
WhatsApp400 × 400 px minimumSquare acceptable
Discord1200 × 630 px1.91:1
Slack1200 × 630 px1.91:1

The 1200×630 pixel size works well across all major platforms. Always use HTTPS image URLs — HTTP images may be blocked by platforms that enforce secure content policies.

Related Tools

Scroll to Top