Open Graph Tag Generator
Generate Open Graph and Twitter card meta tags.
When you share a link on Facebook, LinkedIn, Slack, KakaoTalk or X (Twitter), the platform reads the Open Graph (og:) and Twitter Card (twitter:) meta tags inside your page's <head> to build the preview card — title, description and thumbnail. Without these tags the title and image may be guessed incorrectly, or the card may render empty.
This generator turns a few fields — title, description, URL, image and more — into a ready-to-paste block of meta tags. Everything runs in your browser and nothing you type is sent to a server. After adding the tags to your page's <head>, verify the result with each platform's official debugger.
<meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
What each tag does
A social preview is usually built from these fields. Empty values are omitted from the output automatically.
- og:title — the bold headline on the card. Keep it under ~50-60 characters to avoid truncation.
- og:description — the supporting line below the title. Around 110 characters works well.
- og:url — the canonical, absolute URL of the content being shared.
- og:image — the absolute URL of the thumbnail; it largely decides preview quality.
- og:type — the page type. Use
websitefor generic pages,articlefor posts/news. - og:site_name — the name of your site or brand.
- twitter:card — the X card shape:
summary_large_imagefor a big image,summaryfor a small thumbnail.
Recommended image: 1200×630
Most platforms render large cards at a 1.91:1 aspect ratio. The standard recommended size is 1200×630, and you generally need at least 600×315 to qualify for a large card. Use an absolute image URL (starting with https://) and keep files under ~5MB as JPG or PNG. If you place text in the image, keep it centered because the edges can be cropped.
Cache busting: scrapers remember the old result
Social platform scrapers cache the metadata they fetch for several days, so editing your tags often leaves the preview looking unchanged. When that happens, force a re-fetch with each platform's official debugger.
- Facebook: paste the URL into the Sharing Debugger and click "Scrape Again".
- X (Twitter): re-check the URL in the Card Validator.
- LinkedIn: clear the cache with the Post Inspector.
- KakaoTalk: caching is slow, so appending a query like
?v=2to create a fresh URL is a common workaround.
After adding the tags, check how the live share card looks with the Open Graph preview. Title and description length also affect search snippets, so review your meta description length too.
Platforms read different tags
It is tempting to assume "just add the og: tags and you're done," but each platform has its own priority order and fallback rules. The table below shows which tags the major platforms actually consult.
| Platform | Title / description from | Image priority | Notes |
|---|---|---|---|
og:title / og:description | og:image | fb:app_id enables Insights. Declaring og:image:width/height speeds up first render. | |
| X (Twitter) | twitter:title → falls back to og:title | twitter:image → falls back to og:image | Card shape is set ONLY by twitter:card; without it you get no large-image card. |
og:title / og:description | og:image | Stickiest cache; refresh only via Post Inspector. Prefers 1200×627. | |
| KakaoTalk | og:title / og:description | og:image | Ignores twitter:. No cache-refresh tool — bust with a query string. |
| Slack / Discord | og:title / og:description | og:image (Discord also reads twitter:image) | theme-color sets the colored sidebar of a Discord embed. |
Worked example: a blog post
Entering title "The Complete 2026 OG Tag Guide", description "7 checks that keep your social previews from breaking", URL https://example.com/blog/og-guide, image https://example.com/og/og-guide.png and type article produces the block below. Paste it verbatim inside <head>.
<meta property="og:title" content="The Complete 2026 OG Tag Guide" />
<meta property="og:description" content="7 checks that keep your social previews from breaking" />
<meta property="og:url" content="https://example.com/blog/og-guide" />
<meta property="og:image" content="https://example.com/og/og-guide.png" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Blog" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="The Complete 2026 OG Tag Guide" />Note that og:* tags use the property attribute while twitter:* tags use name. Swap them and some scrapers will silently ignore the tag.
Common pitfall
- property vs name mix-up: writing an og tag as
name="og:title"means Facebook's official parser won't see it — it must beproperty="og:title". - Image blocked by robots/firewall: even with correct tags, if the scraper bot (e.g. facebookexternalhit) can't reach the image URL the thumbnail comes up blank. Avoid images behind login gates or restrictive CDNs.
- Client-only injection in SPAs: tags injected at runtime via JavaScript are invisible to scrapers, which don't execute JS. Render the
og:tags into the initial HTML via SSR/SSG.
Frequently asked questions
Can og:image be a relative path?
If I omit the twitter tags, will the card break on X?
I edited the tags but the preview is unchanged.
Is my input sent to a server?
What should I set og:type to?
Related guides
- Link Previews Not Showing (Kakao, Slack, X)? Fixing OG TagsWhy link previews are missing or stale when sharing, and how to fix OG tags and scraper caches.