🏷️

Open Graph Generator

Generate complete Open Graph and Twitter Card meta tags for your webpage. Fill in your details and copy ready-to-use HTML instantly.

Basic Information

Image

Twitter Card

Generated Meta Tags

About Open Graph Generator — OG Meta Tag Generator Online

Open Graph meta tags are HTML elements placed in your page's <head> that control how the page appears when shared on social networks. Without them, Facebook, LinkedIn, WhatsApp, Slack, and Discord choose their own title, description, and image from your page content — usually getting it wrong or picking an irrelevant image. This generator produces a complete set of OG and Twitter Card tags from your inputs, with live character counts to keep titles and descriptions within each platform's display limits.

The generator is most useful when building or updating page templates, writing new content that will be actively shared, or auditing pages that show poor share card previews. A developer building a new blog post template can use the generator to produce the correct tag set once, then template the values into the CMS rather than writing the tags from scratch. A content writer who doesn't know which meta tags are needed for social sharing can generate the complete set by filling in plain-text fields and copy it to their developer without needing to know the tag names and attribute syntax.

How to Use Open Graph Generator

  1. Enter your Page Title — keep it under 60 characters for reliable display across all platforms. The character count next to the label shows how close you are to the truncation threshold.
  2. Enter a Description — aim for under 120 characters for consistent cross-platform display. Descriptions under 155 characters are safe for Facebook; LinkedIn and WhatsApp truncate earlier.
  3. Fill in the Page URL, Site Name, and Page Type — the type determines the OG type tag (og:type), which affects how some platforms categorize the content.
  4. Enter the og:image URL with width, height, and alt text. Image dimensions help Facebook display the card correctly without having to fetch and measure the image first.
  5. Configure the Twitter Card section with card type and Twitter usernames if applicable. The generated tags appear in the right panel and update as you type — click Copy All Tags to copy the complete tag set.

OG Tag Reference

Understanding what each tag does helps you fill in the generator correctly — and decide which optional fields are worth including for your specific use case.

  • og:title: The title shown in the share card across all platforms. This should be the page's actual title or a version specifically written for sharing context — not necessarily the same as the HTML <title> tag (which is SEO-optimized) or the article headline (which may be too long). Write it as if you're introducing the content to a friend who doesn't know it exists.
  • og:description: Supporting text below the title. Not all platforms show this (WhatsApp sometimes hides it), but when shown it carries second-level context. Focus on what the content delivers rather than describing what the page is about — "How to set HSTS correctly on NGINX" is more compelling than "An article about HSTS configuration."
  • og:image: The visual element of the share card. This is the most significant factor in whether a shared link gets clicked — a compelling, relevant image outperforms text-only cards on every platform. The image should make sense without reading the title, and should look good at roughly 500px wide (how it renders on mobile feeds).
  • og:type: Tells platforms how to categorize the content. website is the default for most pages. article enables additional optional tags like article:author and article:published_time on Facebook. product is relevant for e-commerce pages.
  • twitter:card: Controls the Twitter card format. summary_large_image shows a full-width image above the title and description — this format tends to get more engagement than the compact summary format. Use summary only when the image isn't central to the content (e.g., brand logo cards).

Tips for Effective OG Tags

The mechanics of OG tags are straightforward — writing them well is where the real work is.

  • Write the OG title and description specifically for social context: Someone seeing your link in a social feed has no context about your site or why this page is relevant to them. The OG title and description need to be self-contained — they should communicate value without relying on brand recognition or page context. This often means the OG description is different from the meta description, which is written for search snippets.
  • Provide image dimensions in the tags: The og:image:width and og:image:height tags tell platforms the image size without them having to fetch and measure it. This speeds up link preview rendering and reduces the chance of the preview appearing without an image while the platform waits for the image to load.
  • Set unique OG tags per page, not site-wide defaults: Generic site-wide OG tags (same title and image on every page) produce poor share cards for individual articles, products, or resources. Set page-specific OG tags for any page you actively promote or expect to be shared — at minimum, the og:title, og:description, and og:image should be unique per page.
  • Test after setting the tags: Use the Open Graph Debugger to preview how the tags render before promoting the page. Verify the image loads at the specified URL, confirm the title and description read well at their displayed length, and check that the card looks correct on each platform tab.

Why Use an OG Meta Tag Generator Online

Writing OG and Twitter Card tags by hand requires knowing the exact property names, attribute syntax, and which tags each platform reads. Getting one attribute name wrong (property vs name, og:title vs twitter:title) produces a tag that's silently ignored. A generator eliminates syntax errors and produces the complete tag set — including the Twitter Card fallbacks — so you can focus on the content rather than the markup.

Web developers building CMS templates benefit from generating the correct tag structure once and templating it rather than writing it from memory. Content teams managing multiple pages benefit from a tool that codifies the required fields and prevents incomplete tag sets. Marketing teams creating landing pages without developer help benefit from generating the meta tags as part of their standard page creation workflow.

Frequently Asked Questions about Open Graph Generator

Paste all generated tags inside the <head> section of your HTML page, before the closing </head> tag. The position within the head matters less than being in the head at all — but conventionally, OG tags are placed after the basic meta charset and viewport tags. In WordPress, most themes have a dedicated filter for adding custom head content, or you can use an SEO plugin like Yoast or RankMath which manages OG tags through a settings interface rather than requiring manual tag insertion.

1200×630 pixels at a 1.91:1 aspect ratio is the recommended size and works across all major platforms. Facebook's minimum is 200×200 pixels, but images below 600px wide display as small thumbnails rather than the full card format. For best results, create a dedicated image for each key page rather than using your main page header image, which may be too tall, too complex, or the wrong aspect ratio for the share card format.

Open Graph tags use property attributes (e.g., <meta property="og:title">) and were developed by Facebook. Twitter Card tags use name attributes (e.g., <meta name="twitter:title">) and were developed by Twitter. Both control link preview appearance on their respective platforms. Twitter falls back to OG tags when Twitter Card tags are absent, which is why many sites only add OG tags — but having explicit Twitter tags gives more control over the Twitter card type and Twitter-specific attributes like the creator username.

The core tags (og:title, og:description, og:image, og:url) are the same for all page types. The og:type value should reflect the content: use article for blog posts and news content (which enables optional article:author and article:published_time tags on Facebook), product for e-commerce product pages, and website for general pages, landing pages, and homepages. Most platforms treat all og:type values the same for card rendering purposes — the type mainly matters for Facebook's specialized display of article and product content.

Social platforms cache OG data. After changing your tags, use Facebook's Sharing Debugger, LinkedIn's Post Inspector, or Twitter's Card Validator to force the platform to re-fetch your page and update the cached preview. Without this, platforms may continue showing the old title, description, or image for anywhere from a few hours to several days. WhatsApp doesn't have a manual cache invalidation tool — it updates automatically after the cache TTL expires.

Yes, completely free. No account, no sign-up, and no usage limits. The generator runs entirely in your browser — the tags update as you type with no server involved. You can generate tag sets for as many pages as you need.