Generated Meta Tags
How to use the Meta Tag Generator
Modern pages need a dozen meta tags to render correctly across search results, social shares, and mobile devices. This generator outputs the full block in one click.
Enter your basics
Add your page title, meta description, and canonical URL. These three power the search snippet and feed into the social tags below.
Add Open Graph fields
Set og:type (website or article), og:image (1200 × 630 recommended), and og:site_name. Facebook, LinkedIn, Slack, and Discord all read these tags.
Configure Twitter cards
Choose summary or summary_large_image. Twitter falls back to Open Graph if Twitter-specific tags are missing, but explicit twitter:* tags give you full control.
Copy the generated block
Paste the output directly inside your <head>. The tags are ordered the way Google and social validators expect.
Why a complete meta tag block matters
Your meta tags are the bridge between your page and every place it gets surfaced — Google's SERP, a Slack link unfurl, a LinkedIn share preview. Missing one tag often means a broken preview that quietly tanks click-through.
The four tag families every page needs
A production-ready meta block has four clusters, each owned by a different consumer:
- Search — title, description, canonical, robots. These power Google's snippet.
- Open Graph — og:title, og:description, og:image, og:url, og:type. Used by Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp.
- Twitter cards — twitter:card, twitter:title, twitter:description, twitter:image. X (Twitter) prefers these over og: tags.
- Mobile + theme — viewport, theme-color, apple-touch-icon. These control mobile rendering and PWA install prompts.
Image dimensions that survive every platform
The single image dimension that works everywhere is 1200 × 630 pixels (1.91:1). Facebook, LinkedIn, X, Slack, and Discord all crop or letterbox to this ratio. Smaller images get rejected on Facebook (under 200 × 200) and look pixelated on retina screens.
Common failure modes
- og:url missing → Facebook caches the request URL, breaking analytics on shared links.
- twitter:image too small → X (Twitter) silently drops the image and shows a text-only card.
- Mismatched og:title vs <title> → Google sometimes substitutes the og:title in the SERP, surprising you with a different snippet.
- Missing canonical → social shares of UTM-tagged URLs create duplicate entries in Facebook's index.
Frequently asked questions
What meta tags does every page need?
At minimum: title, meta description, viewport, canonical, and one image (og:image). For pages you expect to be shared, add the full Open Graph block (og:title, og:description, og:type, og:url, og:image) plus Twitter card tags (twitter:card, twitter:title, twitter:description, twitter:image). For PWAs, add theme-color and apple-touch-icon.
Do I need both Open Graph and Twitter card tags?
Twitter falls back to Open Graph tags when twitter:* tags are missing, so you can ship Open Graph alone and X (Twitter) will render a card. The reason to add explicit twitter:* tags is that they let you customize the card type (summary vs summary_large_image) and use a different image for X than for Facebook.
What size should og:image be?
1200 × 630 pixels at 1.91:1 ratio is the universal target. Facebook requires images at least 600 × 315; LinkedIn auto-crops anything else; X (Twitter) accepts up to 4096 × 4096 but renders most cards at 1.91:1. Stay under 5 MB. PNG and JPG both work.
Where do I put the generated meta tags?
Inside the <head> element of your HTML, ideally near the top before any external scripts. Order matters less than presence — Facebook, X, and Google all parse the entire head, but putting meta tags before scripts keeps the page parseable even if a script blocks.
Why does my Open Graph image not appear?
Three common causes: (1) the image URL is relative not absolute — og:image must be a full https URL; (2) the image is behind authentication or blocked by robots.txt; (3) Facebook has cached an older version — re-scrape via the Facebook Sharing Debugger to refresh.