Open Graph & Twitter Card Generator
An open graph generator creates the meta tags that control how your page looks when shared on Facebook, LinkedIn, X, Slack, and Discord — the title, description, and preview image in the link card. Fill in the fields, preview the card, and paste the generated tags into your page's <head>. Good tags are the difference between a link people click and one they scroll past.
Preview
Generated tags
What the tags do
The generator outputs both Open Graph and Twitter Card tags from your five fields. og:type is fixed to website — the safe default — and the Twitter card type comes from the dropdown:
| Tag | What it does |
|---|---|
og:title | Card headline — keep it under ~60 characters |
og:description | One-to-two-sentence summary, ~150–200 characters |
og:type | Fixed to website (safe default; change to article by hand for blog posts) |
og:url | Canonical URL of the page — must be absolute |
og:image | Preview image — must be an absolute HTTPS URL |
og:site_name | Your brand name, shown above the headline |
twitter:card | summary_large_image (big preview) or summary (small thumbnail) |
twitter:title / twitter:description / twitter:image | X-specific copies of the same content |
Example output for a typical page:
<meta property="og:type" content="website">
<meta property="og:title" content="How to Structure an AI Prompt">
<meta property="og:description" content="Role, task, context, constraints: the six blocks that turn messy prompts into reliable ones.">
<meta property="og:url" content="https://example.com/blog/ai-prompt-structure">
<meta property="og:image" content="https://example.com/img/ai-prompt-structure.png">
<meta property="og:site_name" content="Example Blog">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Structure an AI Prompt">
<meta name="twitter:description" content="Role, task, context, constraints: the six blocks that turn messy prompts into reliable ones.">
<meta name="twitter:image" content="https://example.com/img/ai-prompt-structure.png">Image rules: why link previews break
Most broken link cards are broken images. Follow these rules:
- Size: 1200×630 pixels (a 1.91:1 ratio) renders well on Facebook, LinkedIn, and X. The minimum is 200×200 — anything smaller may be ignored.
- Absolute HTTPS URL: scrapers won't resolve relative paths.
- Publicly accessible: no login walls, and no hotlink protection blocking the scraper.
- Keep text large: the image often displays only a few hundred pixels wide — small text becomes unreadable.
Optional refinements you can add by hand after copying: og:image:width and og:image:height help platforms reserve layout space, og:image:alt adds accessibility, and og:locale declares the content language.
Per-platform notes
- Facebook and LinkedIn read Open Graph tags directly.
- X (Twitter) falls back to Open Graph for title, description, and image — but you still need
<meta name="twitter:card" content="summary_large_image">for the large-image card layout. Without it you get a small thumbnail. - Slack and Discord read Open Graph tags; Discord also honors
theme-colorfor the embed sidebar.
How to use it
- Fill in the fields — title, site name, description, page URL, and image URL. The preview and generated tags update live.
- Pick the Twitter card type:
summary_large_imagefor a big preview,summaryfor a small thumbnail. - Copy the tags into your page's
<head>— scrapers read raw HTML, so the tags must be present before any JavaScript runs. - After publishing, re-check with each platform's own debugger to clear its cache (checklist below).
Debugging checklist
- View the page source and confirm the tags are in the raw HTML
<head>— scrapers don't run JavaScript. - Open the
og:imageURL in a private window to confirm it's public. - Paste the URL into Facebook's Sharing Debugger, X's Card Validator, or LinkedIn's Post Inspector and trigger a fresh scrape — all three cache previews aggressively.
- If the image still won't update, change the image filename (not just the file contents) to bust every layer of cache.
Frequently asked questions
- Is this preview exactly what Facebook or X will show?
- It's a close approximation of the layout, not a pixel-perfect reproduction — each platform renders slightly differently and caches the result. Always test with each platform's own debugger after publishing.
- What size should my image be?
- 1200×630 pixels works well for both a Facebook-style summary card and a Twitter "summary_large_image" card.
- Do I need both Open Graph and Twitter tags?
- Twitter/X falls back to Open Graph tags if its own twitter: tags are missing, but including both gives you more predictable control over how the card looks.
- Why isn't my updated image showing after I changed it?
- Social platforms cache link previews. Use that platform's own debugging/refresh tool (like Facebook's Sharing Debugger) to force it to re-fetch your page.
- Do I need Twitter card tags if I already have Open Graph tags?
- Mostly no — X reads og:title, og:description, and og:image as fallbacks. The one tag you still need is twitter:card: set it to summary_large_image for the big preview layout, otherwise X shows a small thumbnail card. This generator includes the twitter: tags alongside the Open Graph ones, so you get both from one form.
- Should og:title match my page's <title> tag?
- They can differ, and often should. The <title> tag serves search results; og:title serves social feeds, where you compete with photos and videos rather than blue links. Keep both accurate, but feel free to make og:title punchier and more self-contained — feed readers see it without your headline, subhead, or branding around it.
- What is og:type, and which value should I use?
- The og:type property tells platforms what kind of content the page is. Use website for homepages, landing pages, and tool pages; use article for blog posts and news — article unlocks extra properties like article:published_time and article:author. This generator always emits og:type=website, which is the safe default; if you need article, change that one tag by hand after copying.
- Can og:image use a relative URL?
- No. Scrapers fetch your page's HTML and read the tags in isolation — they have no base-URL context to resolve /img/card.png against. Always use the full absolute URL: https://example.com/img/card.png. The same applies to og:url. Relative URLs are the single most common reason preview images silently fail.