Meta Tag Generator (SEO + Open Graph + Twitter)
Build the full set of SEO, Open Graph, and Twitter Card meta tags from one form. Live preview of Google, Facebook, and Twitter cards. All client-side.
<title>How to bake the perfect sourdough loaf</title> <meta name="description" content="A beginner-friendly guide to baking sourdough at home — starter, dough hydration, fermentation, and a crisp golden crust." /> <link rel="canonical" href="https://example.com/blog/perfect-sourdough" /> <meta name="robots" content="index,follow" /> <meta name="theme-color" content="#0F766E" /> <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) --> <meta property="og:title" content="How to bake the perfect sourdough loaf" /> <meta property="og:description" content="A beginner-friendly guide to baking sourdough at home — starter, dough hydration, fermentation, and a crisp golden crust." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com/blog/perfect-sourdough" /> <meta property="og:site_name" content="Example Blog" /> <meta property="og:locale" content="en_US" /> <meta property="og:image" content="https://example.com/og/sourdough.jpg" /> <meta property="og:image:alt" content="A golden sourdough loaf cooling on a wire rack." /> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="How to bake the perfect sourdough loaf" /> <meta name="twitter:description" content="A beginner-friendly guide to baking sourdough at home — starter, dough hydration, fermentation, and a crisp golden crust." /> <meta name="twitter:image" content="https://example.com/og/sourdough.jpg" /> <meta name="twitter:site" content="@example" /> <meta name="twitter:creator" content="@example" />
Use this free meta tag generator to build a complete head block — standard SEO tags, Open Graph for Facebook and LinkedIn, and Twitter Card markup — from one short form. The Google search snippet and social card previews update live so you can fine-tune the title, description, and image before shipping.
How to use it
No account, no upload — it all happens on your device.
The blocks this tool generates
What ends up in your <head> and who reads each section.
| Block | Who reads it | Why it matters |
|---|---|---|
| title + description | Google, Bing, every other search engine | Sets the blue link and snippet in search results. |
| canonical | Google + AI crawlers | Tells crawlers which URL is the primary version when the same page lives at multiple paths. |
| robots | All major crawlers | Controls whether the page can be indexed and whether links on it pass authority. |
| Open Graph (og:*) | Facebook, LinkedIn, Discord, Slack, iMessage | Builds the link preview card. og:image is the single biggest CTR lever. |
| Twitter Card (twitter:*) | Twitter / X | Renders the post preview. summary_large_image gives the big edge-to-edge image; summary is the small thumbnail variant. |
| theme-color | Mobile browsers, PWAs | Tints the browser chrome on Android Chrome and standalone PWAs. |
Why the social card image is the single biggest lever
Click-through rates on social platforms are dominated by the link preview image. A unique, high-contrast 1200×630 image — ideally with the headline rendered into the image itself — beats a thumbnail cropped from the page hero by a wide margin. Keep one purpose-builtog:image per article and serve it from a static URL on your own CDN so platforms cache it once.
Validation and testing
After you ship the tags, confirm they parse.
- Facebook Sharing Debugger — paste your URL, inspect the parsed og:* values, force a re-scrape if you change them.
- LinkedIn Post Inspector— same idea for LinkedIn's cache.
- Twitter Card Validator(now part of X's developer tools) — verifies the twitter:* set renders as summary_large_image vs summary.
- Google's URL Inspection (in Search Console) — checks the page renders the way Googlebot sees it, title and description included.
Privacy
Every field you type stays in your browser. The image preview loads directly from the URL you paste so you can see it the way Facebook will — that is a fetch your browser makes to your own image host, not to this site. Nothing about your draft is logged or sent anywhere.