Create Open Graph meta tags for social media sharing. Generate Facebook, Twitter, LinkedIn preview cards.
60-95 characters recommended
0/200 characters (recommended)
1200x630px recommended (1.91:1 ratio)
Full support for all OG tags
Uses OG tags, supports Twitter Cards
Full Open Graph support
Uses OG tags for link previews
Fill in the title, description, image and URL you want to appear when someone shares your page, and get the complete Open Graph and Twitter Card block to paste into your head. Two live previews show how the share is likely to render on Facebook or LinkedIn and on X, so you can see a truncated headline before your audience does.
Runs in your browser. This tool runs entirely in your browser using JavaScript. Nothing you enter or open here is uploaded to our servers.
These can differ from your search-engine title and description, and often should: a share headline can be more conversational than a title tag.
Use an absolute URL — https://example.com/image.jpg, not /image.jpg. Relative paths are the most common reason a preview shows no image at all.
og:url should be the clean, canonical address of the page. Platforms use it to group shares of the same page together.
Website for most pages, article for blog posts and news. Choosing article reveals the published time, author, section and tag fields.
Paste the whole block inside <head>. Then re-share the link and check the preview — platforms cache aggressively, so use their debugging tools to force a refresh after a change.
Real input and the output this tool produces for it.
| Example | Input | Result |
|---|---|---|
| Share title | How we cut our build time by 70% |
<meta property="og:title" content="How we cut our build time by 70%"> |
| Share image | https://example.com/og/build-time.png |
<meta property="og:image" content="https://example.com/og/build-time.png"> |
| Large Twitter card | Any generated block |
<meta name="twitter:card" content="summary_large_image"> |
| Article metadata | Type: Article, published 2026-09-05 |
<meta property="article:published_time" content="2026-09-05"> |
Open Graph is a small set of meta tags that tell any platform showing a link preview what to display. Facebook introduced it, and LinkedIn, WhatsApp, Slack, Discord, Signal, Teams and X all read it now.
Without these tags, platforms guess: they take whatever text they find near the top of the page and whatever image seems largest. The result is often a navigation menu as the description and a logo or a random thumbnail as the image. The tags exist so you decide instead.
Four tags carry almost all the weight; the rest are refinements.
| Tag | What it controls | Required? |
|---|---|---|
og:title |
The headline of the preview card | Yes |
og:description |
The supporting line under it | Yes in practice |
og:image |
The picture — the single biggest driver of engagement | Yes in practice |
og:url |
The canonical URL the share is attributed to | Yes |
og:type |
website, article, video and so on | Recommended |
og:site_name |
Your site's name beside the preview | Recommended |
og:locale |
The language and region of the content | Optional |
twitter:card |
Whether X shows a small or a large image | Recommended |
The image is what people notice, and it is where most previews go wrong.
Every major platform caches link previews, often for a long time. Changing the tags does not retroactively change a share that has already been posted, and pasting the link again usually serves the cached version.
Each platform provides a tool that fetches the page fresh and rebuilds its cache — Facebook's Sharing Debugger, LinkedIn's Post Inspector, X's Card Validator. Run the URL through the relevant one after any change, then paste the link again.
If a preview is still wrong after that, check that the page returns a 200 to a crawler that is not logged in, that the image URL is absolute and public, and that the tags are inside <head> rather than in the body.
X reads its own twitter: tags first and falls back to Open Graph for anything missing, which is why the generated block includes both. Setting twitter:card to summary_large_image is what turns a small thumbnail into a full-width image.
None of these tags affect search rankings — they are read by social platforms, not by search crawlers. Your <title>, meta description and canonical are a separate set, and the meta tag generator produces those. A complete head has both.
Set an article-type block with the published time and author so shares render as an article rather than a bare link.
Control exactly what appears when the page is shared into Slack, WhatsApp or LinkedIn.
When a link shows a menu as its description and a logo as its image, these are the tags that were missing.
Check the headline and image in the preview before the campaign goes out, not after.
Generate a reference block that developers can template across every page type.
Set og:locale so the preview declares the right language and region.
The search-engine half of the head block: title, description, robots and canonical.
Meta Tag Generator →Get the OG image to the exact dimensions platforms render best.
Image Resizer →See what a URL is currently sending before you replace it.
Meta Tags Analyzer →Keep the fetch fast so crawlers do not time out.
Image Compressor (JPG) →og:url reads better when the path is readable.
Slug Generator →The other machine-readable layer on the same page.
Structured Data Validator →Help others discover this tool by sharing it on social media
Paste this iframe into your own page to give your readers the working tool without sending them away. The embed carries a "Powered by TechBelievers" link and needs no API key.
<iframe src="https://techbelievers.com/tools/open-graph-generator/embed?theme=light" width="100%" height="600px" title="Open Graph Generator by TechBelievers" style="border:1px solid #e2e8f0;border-radius:0.5rem"></iframe>