This tool generates Open Graph meta tags for the <head> of a page. Open Graph is the protocol behind almost every link-preview card you’ve ever seen — when someone pastes a URL into Slack or iMessage and a thumbnail and description appear, the platform read those from the page’s Open Graph tags.
The four that matter
<meta property="og:title" content="Page title">
<meta property="og:description" content="A 1–2 sentence description.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/canonical-page-url">
These are the four tags every page should have:
og:title— the title of the preview card. Usually similar to the<title>of the page but can be tuned for social sharing (<title>is for SEO,og:titleis for social).og:description— the description text under the title in the card. 1–2 sentences. Shorter is better; cards truncate.og:image— the thumbnail. The most important tag. A card without an image is far less compelling.og:url— the canonical URL of the page. Useful when the page has multiple URLs (UTM params, redirects); the canonical is what gets cached and shared.
Image specifications
Open Graph image specs:
- Aspect ratio: 1.91:1 (close to 1200:630). Most platforms render in this ratio.
- Resolution: 1200×630 pixels. Smaller images are upscaled (blurry); much larger may be rejected.
- File size: Under 5 MB (some platforms enforce). Compress aggressively.
- Format: JPEG or PNG. WebP works on modern platforms but isn’t universally supported in card renderers.
Under-spec images (smaller than 600×315) often render as small thumbnails next to the text instead of as a hero image. Over-spec doesn’t help — the card scales the image.
Optional but useful
<meta property="og:type" content="website">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<meta property="og:image:alt" content="Alt text for the OG image">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
og:typeiswebsitefor most pages,articlefor blog posts,video.movie/video.episode/profile/etc. for specific content types. Most platforms only differentiatearticlefrom everything else; default towebsiteunless your CMS does something specific with article types.og:site_nameis your site’s name (e.g., “The New York Times”). Some platforms display it above the card title.og:localeis the language/region (e.g.,en_US,pt_BR). Used by some translation-aware platforms.og:image:altdescribes the image for accessibility. Often skipped; should be included.og:image:widthandog:image:heightallow the platform to lay out the card before downloading the image. Helpful but not required.
Twitter Cards
Twitter has its own meta tag namespace, but it falls back to Open Graph when Twitter-specific tags aren’t present. For most sites, Open Graph alone is enough.
If you want Twitter-specific behavior (a different image, a different card type):
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter-specific title">
<meta name="twitter:description" content="Twitter-specific description">
<meta name="twitter:image" content="https://example.com/twitter-image.png">
<meta name="twitter:site" content="@yourhandle">
<meta name="twitter:creator" content="@authorhandle">
twitter:card types:
summary— small thumbnail, text on the right.summary_large_image— large hero image. The modern default.app— for mobile app cards.player— for video/audio players inline in the timeline.
For most pages, summary_large_image is what you want.
Article-specific tags
For blog posts, Open Graph defines additional tags:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-04-30T08:00:00Z">
<meta property="article:modified_time" content="2026-04-30T10:30:00Z">
<meta property="article:author" content="Author Name">
<meta property="article:section" content="Technology">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="css">
Some platforms display the author and date on the card. Most don’t; they’re worth including for the platforms that do.
Caching and refresh
Once a platform has crawled your page and cached the Open Graph data, changes to the tags don’t show up until the cache expires. Cache lifetimes:
- Facebook/Meta — typically a week. Refresh via Facebook’s Sharing Debugger.
- Twitter/X — typically days. Refresh via Twitter’s Card Validator (login required).
- LinkedIn — refresh via LinkedIn’s Post Inspector.
- Slack/Discord — usually a few hours. Re-paste the URL after the cache expires.
After major content changes, run the URL through the relevant debuggers to refresh.
What the tool generates
The tool above takes inputs (title, description, image URL, type, etc.) and produces the corresponding meta tags, plus the basic title, description and viewport tags. With an image URL it also writes og:image:width 1200 and og:image:height 630 — correct those if your image is another size. The player and app Twitter card types need extra tags (player URL and size, app IDs) that the form doesn’t collect; add them by hand.
Common pitfalls
- Missing
og:image. The single most impactful tag. Without it, link previews are text-only and look unfinished. - Wrong image size. Below ~600×315, the platform falls back to a small thumbnail card. Use 1200×630.
- Relative URLs.
og:image="/og.png"doesn’t work — Open Graph requires absolute URLs. Use the fullhttps://...form. - HTTP for
og:image. Some platforms (Facebook in particular) require HTTPS images. - Outdated cached previews. After changing OG tags, use the platform debuggers to refresh.
- Generic OG image for every page. Custom per-page images convert better in social. Use a server-side image generator or a build-time tool to create per-page OG images.
- Description duplicating title. The card has both; redundancy makes the card less compelling. The description should add to the title, not repeat it.
For the broader meta-tag set, see meta tag generator. For favicons (which appear in some preview contexts), favicon generator.