How to Generate Open Graph Meta Tags for Website

Searching for "how to generate open graph meta tags for website"? Add four og: meta tags to your page's <head>: og:title, og:type, og:image, and og:url. These tags tell Facebook, LinkedIn, and messaging apps which title, image, and description to show. Build the full set in seconds with ToolNest's free meta tag generator.

What Open Graph tags do — and why link previews break

When you paste a link into Facebook, LinkedIn, Slack, Discord, iMessage, or WhatsApp, the app does not guess what to show — it fetches your page and reads the <head> for Open Graph meta tags. With no tags and no instructions, the platform falls back to scraping whatever it finds first, which is exactly why broken previews show a random banner image, a stale headline, or a gray placeholder box. Open Graph is a protocol Meta introduced in 2010 (originally to power the Like button) that turns any web page into a structured object with a defined title, type, image, and URL. Today nearly every major platform reads og: tags — LinkedIn, Slack, Discord, Telegram, Pinterest, and even X fall back to them when their own card tags are missing. The stakes are concrete: posts with a proper preview image earn far higher click-through than bare URLs, and a single bad og:image can make a polished article look broken everywhere it is shared. The most common breakage pattern is deceptively simple — the tags exist in the page you see, but the crawler saw something else: a cached copy, a login wall, or a relative image URL it could not resolve. Understanding that gap — your browser versus the platform's scraper — is the key to every fix in this guide.

The Open Graph tags list: 4 required + 6 recommended

Meta's documentation names four tags as the required core — everything else is enhancement. og:title sets the headline shown in the preview (keep it under about 60 characters so it does not truncate). og:type declares what the page is — usually website for homepages and article for blog posts and news. og:image is the preview image URL, and it must be an absolute URL starting with https://. og:url is the canonical URL of the page, which stops likes and shares from splitting across http, https, www, and non-www variants. Six recommended tags complete a professional setup in full: og:description (one or two sentences, the same text that works as your meta description that gets clicks), og:site_name (your brand, e.g. ToolNest), og:image:width and og:image:height (help crawlers reserve layout space so the preview renders faster), og:image:alt (accessibility text for the image), and og:locale (e.g. en_US). A complete minimal block looks like this: <meta property="og:title" content="Your Page Title"> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/page/"> <meta property="og:image" content="https://example.com/images/preview.jpg"> <meta property="og:description" content="One clear sentence about the page."> — placed inside <head>, before any render-blocking scripts so crawlers find them immediately.

Open Graph vs Twitter Cards: what is the difference?

Open Graph and Twitter Cards solve the same problem — controlling link previews — but they come from different companies, so the tag vocabularies differ. Open Graph (og: tags) is Meta's protocol and the universal fallback: Facebook, LinkedIn, Slack, Discord, Telegram, and Pinterest all read it. Twitter Cards (twitter: tags) are X's own layer, and the key difference is the twitter:card tag, which chooses the layout: summary (small thumbnail on the side) or summary_large_image (the big full-width image). Here is the practical rule: if twitter: tags are present, X uses them; if they are absent, X falls back to your og: tags — so a page with only Open Graph tags still gets a decent preview on X, just without layout control. The image ratios differ slightly: Open Graph's standard is 1200×630 (1.91:1), while Twitter's large card is 1200×628 (2:1) — close enough that one 1200×630 image serves both. A complete setup includes both families: keep your og: block, then add <meta name="twitter:card" content="summary_large_image">, <meta name="twitter:title" content="...">, and <meta name="twitter:image" content="https://..."> — or simply let the twitter: title and description inherit from og: by omitting them, which X handles gracefully. Note that X retired its public Card Validator, so for X you now verify by posting to a private or test account, while Meta and LinkedIn still offer proper debugging tools (covered below).

og:image size and image rules

The preview image carries the whole card, so its specs matter more than any other tag. The recommended size is 1200 × 630 pixels at a 1.91:1 aspect ratio — large enough to look sharp on high-density displays. Facebook's documented minimum is 200 × 200 pixels, but images under about 600 × 315 render as small thumbnails instead of the full-width card, so treat 1200 × 630 as the real target. Keep the file under 8 MB (Facebook's stated limit), use JPG for photographs and PNG for graphics with text, and never use SVG or animated GIFs — crawlers will not reliably render them. The URL must be absolute and https: og:image content="https://yoursite.com/img/preview.jpg", never /img/preview.jpg, because the scraper has no page context to resolve a relative path. Add og:image:width and og:image:height matching the actual file so the crawler can lay out the card without downloading first. Two design rules from experience: keep important text and faces away from the edges, because platforms crop differently on mobile versus desktop, and test how the image looks at small sizes — a detailed infographic that is legible at 1200 px wide becomes gray mush at 300 px. One image, sized right and referenced absolutely, fixes the majority of 'broken preview' complaints on its own.

5 mistakes that break link previews

1. Relative image URLs. og:image content="/images/preview.jpg" works in your browser but means nothing to a scraper fetching your page cold — it cannot resolve the path, so the card renders imageless. Always use the full https:// URL. 2. Missing og:url. Without a canonical URL, Facebook treats https://site.com/page, https://www.site.com/page, and http://site.com/page as three different objects — likes, shares, and comment counts split across them, and each variant can cache a different preview. Set og:url to the single canonical address. 3. Cache staleness. Platforms cache the first scrape of your page, sometimes for days. You fix the tags, re-share, and the old broken preview appears — because the platform never re-fetched. The fix is forcing a re-scrape in the debugger (next section), not editing the tags a fifth time. 4. Wrong og:type. Using website on a blog post is harmless, but using article unlocks article:published_time, article:author, and article:section, which news aggregators use — and some templates set og:type to product or video on plain articles, confusing crawlers. Match the type to the content. 5. HTTP/HTTPS mismatch. An og:image served over http:// on an https:// page gets blocked as mixed content by strict scrapers — the tag is technically present and the image technically exists, yet the preview shows nothing. Serve every og: URL over https, and check that your special characters are properly encoded in tag attributes so quotes or ampersands in titles do not truncate the content value mid-string.

How to test your tags and bust the cache

Never ship tags blind — every major platform gives you a way to see exactly what its scraper sees. Meta Sharing Debugger (search 'Facebook Sharing Debugger') is the essential one: paste your URL, and it shows the scraped title, description, and image plus a list of warnings (missing tags, image too small, redirect chains). Click 'Scrape Again' to force Facebook and Instagram to discard the cached version and re-fetch — this is the cure for the 'I fixed it but the old preview still shows' problem. LinkedIn Post Inspector does the same for LinkedIn, which otherwise caches previews for roughly a week; if the inspector still shows stale data, appending a harmless query parameter (yourpage/?v=2) gives the crawler a 'new' URL to fetch. For a quick manual check, view your page source (Ctrl+U) and search for 'og:' — the tags must appear in the raw HTML, not injected by JavaScript after load, because most scrapers do not execute JavaScript. If your site is a single-page app that renders tags client-side, that is your bug: move tag rendering server-side or use pre-rendering. For X, with no validator available, post the link from a private test account and check the card. Work through the debuggers in this order — source check, Meta debugger with re-scrape, LinkedIn inspector — and you will resolve effectively every preview failure, since they all reduce to 'the scraper saw something different from what you see.'

Generate the full tag set in one click

Hand-writing ten meta tags per page is slow and typo-prone — one unencoded ampersand in og:title can silently truncate your headline. ToolNest's free meta tag generator builds the complete set for you: standard SEO meta tags, the full Open Graph block, and Twitter Card tags, with a live preview showing how your link will look on Google and social feeds as you type. Everything runs in your browser — no signup, no server upload. Pair it with the rest of the on-page checklist: write meta descriptions that get clicks for the og:description text, use SEO-friendly URL slugs for the og:url value, and encode HTML special characters in any tag content containing quotes or symbols. Get the tags right once per template, verify with the Sharing Debugger, and every future share of every page renders the preview you intended. One more habit: re-run the Sharing Debugger after every template change, not just on launch day. Tag regressions creep in through CMS updates and theme switches — a quarterly five-minute check of your most-shared pages catches them before your audience does.