Open Graph Generator
Quick Access to SEO Tools
Go straight to the SEO utility you need.
How to Use the Open Graph Generator
Enter the page URL or details
Enter the page URL or details.
Set the title, description, and image
Set the title, description, and image.
Copy the generated Open Graph meta tags
Copy the generated Open Graph meta tags.
Open Graph Generator — Create Social Media Preview Tags for Any Page
You've probably seen it happen: someone shares a link in a group chat and the preview shows a random image, half a navigation menu as the title, and a description that reads like a database error. That's what happens when Open Graph tags are missing or wrong. The Open Graph protocol — originally created by Facebook in 2010 — lets you define exactly what every platform should display when your page gets shared. Today, it's supported by Facebook, LinkedIn, Discord, Slack, Twitter/X, WhatsApp, Telegram, and hundreds of other apps and services.
Think of OG tags as the presentation layer for your links. You could have the best article on the internet, but if the preview shows a broken image and a truncated title, most people won't click. This tool generates both Open Graph and Twitter Card tags in one output — fill in the fields, copy the code, and your shared links start looking like you hired a designer.
The OG Protocol — How It Actually Works
Open Graph tags live in your page's <head> as standard HTML <meta> elements with the property attribute (not name, which is a common mistake). When a platform encounters a link to your page, its crawler fetches the HTML, looks for og: prefixed properties, and uses them to build the preview card.
The four required properties per the OG specification are og:title, og:type, og:image, and og:url. In practice, og:description is equally essential since most platforms display it prominently. If any required property is missing, the platform falls back to scraping your HTML — which leads to the inconsistent, broken previews you've probably seen.
One subtle detail: Open Graph uses the property attribute, not name. Writing <meta name="og:title" ...> instead of <meta property="og:title" ...> won't work reliably. Facebook's crawler specifically looks for the property attribute. This generator uses the correct attribute, but it's worth double-checking if you're writing tags by hand.
og:image — The Property That Moves the Needle
The image is the single most impactful Open Graph property for engagement. Social platforms display it at prominent size, and posts with images consistently get 2–3 times more engagement than text-only previews. A few practical guidelines that go beyond "use 1200×630":
Keep the image readable at thumbnail size. When someone shares your link on mobile, the image gets scaled down to roughly 300×160 pixels. Complex charts or dense text become illegible at that size. Use bold, simple visuals — a product photo, a striking illustration, or a clean branded graphic with minimal text.
Use an absolute URL. <meta property="og:image" content="/images/og.jpg"> will fail. The platform fetching your tags is on a different domain and can't resolve relative paths. Always use the full URL: https://yoursite.com/images/og.jpg.
Avoid reusing the same image everywhere. If every page on your blog uses the same OG image, shares will look identical in feeds, which reduces recognition and click-through. Create a unique image for each page or at least each category.
Include og:image:width and og:image:height. These optional properties tell the platform the image dimensions in advance, so it can reserve the correct layout space without having to download and analyze the image first. This prevents your preview from briefly showing a collapsed or blank card before the image loads.
Platform-Specific Behavior You Should Know About
Not every platform interprets Open Graph tags identically. Here's what to watch for:
Facebook/Meta: Uses Open Graph as its primary protocol. The Sharing Debugger at developers.facebook.com/tools/debug is essential for testing. Facebook aggressively caches OG data — even after you update your tags, you may need to hit "Scrape Again" in the debugger to force a refresh. It also reads og:video for video content and applies special handling for og:type=article (showing author and publisher info).
LinkedIn: Strictly follows Open Graph. LinkedIn prefers landscape images and will crop vertical images aggressively. The og:type must be article for blog posts and news content — using website may cause LinkedIn to suppress the author attribution. LinkedIn's Post Inspector (linkedin.com/post-inspector) lets you test how your link will render.
Discord: Renders large, prominent embeds that take up significant chat space. Discord reads og:image and displays it at full width. It also reads og:site_name and shows it as a label above the title. Keep your OG descriptions concise — Discord truncates around 200 characters. One quirk: Discord caches OG data aggressively, and there's no manual cache-busting tool, so changes can take 15–30 minutes to appear.
Slack: Slack unfurls links into rich previews using Open Graph. It reads og:title, og:description, and og:image. If you set og:video or og:audio, Slack may embed a media player. Slack respects twitter:card as a fallback if OG tags are missing.
Twitter/X: Twitter reads its own twitter: tags first, then falls back to Open Graph. The only strictly required Twitter tag is twitter:card. If you set twitter:card=summary_large_image, Twitter uses a large landscape image. If you set twitter:card=summary, it uses a small square thumbnail. For most content, summary_large_image gets more engagement.
Testing and Debugging Your OG Tags
Never assume your OG tags are working correctly. The only way to know is to test them in each platform's validator tool. Here's a checklist:
Facebook Sharing Debugger: Paste your URL, check for errors, and review the preview. If the wrong image appears or the description is cut off, update your tags and hit "Scrape Again." This tool also shows you any warnings about missing recommended properties.
LinkedIn Post Inspector: Paste your URL and LinkedIn will show you exactly what the shared preview looks like. Pay attention to whether the image renders at the correct aspect ratio — LinkedIn is particular about this.
Twitter Card Validator: Enter your URL and Twitter will validate your card markup and show a preview. This is the only reliable way to test Twitter-specific tags.
Discord: Paste your link in a private Discord channel. There's no validator tool — you see the live preview immediately. Changes may take a few minutes to update due to caching.
Frequently Asked Questions About Open Graph Tags
twitter:card because Twitter/X doesn't default to a specific card type without it. Beyond that, if your Open Graph tags are solid, Twitter will use them as fallbacks for title, description, and image. However, if you want a different image or headline on Twitter than on Facebook, you'll need the explicit twitter:title, twitter:description, and twitter:image tags. Many brands do this — a more casual, punchy headline for Twitter, a more professional one for LinkedIn.
og:image, Facebook may still be serving the old cached version. Go to the Sharing Debugger, enter your URL, and click "Scrape Again" to force a refresh. Also verify that your image is accessible via a public absolute URL (not behind authentication or a robots.txt block), is at least 200×200 pixels, and isn't served over HTTP (must be HTTPS).
og:url doesn't directly impact search rankings, but it consolidates social engagement data. Without it, if your page is accessible at both example.com/page and example.com/page?utm_source=twitter, Facebook counts likes and shares separately for each URL. Setting og:url to your canonical URL ensures all engagement metrics roll up to one address.
website for most general pages (homepages, landing pages, about pages). Use article for blog posts, news articles, and any time-based content — this enables additional properties like article:published_time and article:author. Use product for e-commerce product pages. The type tells platforms which template to apply and which additional properties are relevant. If you're unsure, website is always a safe default.
og:title targets social media users and can be more engaging or conversational. For example, an HTML title of "Keyword Density Checker — Free Tool" might become an og:title of "Is Your Content Over-Optimized? Check It Free." The social version can be longer (up to ~70 characters before truncation) and more attention-grabbing.
og:image to the article's featured image. If your CMS generates these automatically, make sure the fallback image exists for any page where a specific image isn't available. A shared link with no og:image at all looks broken in most feeds, and you'll lose engagement. Tools like Canva or Figma make creating branded OG templates fast.