Meta Tag Generator
Fill in the fields below to generate SEO meta tags, Open Graph and
Twitter Card tags — ready to paste into your <head>. Live SERP
and social previews update as you type. Nothing is sent to any server.
Basic
Open Graph & Twitter
SERP Preview (how Google may display this page)
https://example.com/my-page/
My Awesome Page — Great Tool for Everyone
A clear, compelling summary of this page in under 160 characters. This text appears in Google search results.
Social Card Preview (Open Graph)
No image URL entered
example.com
My Awesome Page
A clear, compelling summary of this page.
Generated Tags
Standard / SEO
Open Graph
Twitter Card
Meta tag reference
| Tag | Purpose |
|---|---|
<meta charset="UTF-8"> | Declares the character encoding. Required on every page. |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Enables proper rendering on mobile devices. |
<title> | The page title shown in the browser tab and in Google search results (blue headline). |
<meta name="description"> | The snippet shown under the title in search results. Affects click-through rate. |
<meta name="robots"> | Controls whether search engines index the page and follow its links. |
og:title / og:description / og:image | Open Graph — controls how the page looks when shared on social platforms. |
twitter:card / twitter:title / twitter:image | Twitter-specific social share appearance. |
Worked example
For a blog post titled "10 Tips for Better Sleep" at
https://example.com/blog/10-tips-better-sleep/:
<!-- In your <head> -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>10 Tips for Better Sleep — Sleep Well Tonight</title>
<meta name="description" content="Backed by sleep science: 10 actionable tips that help you fall asleep faster and wake up refreshed. No supplements, no gadgets." />
<link rel="canonical" href="https://example.com/blog/10-tips-better-sleep/" />
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/10-tips-better-sleep/" />
<meta property="og:title" content="10 Tips for Better Sleep" />
<meta property="og:description" content="Backed by sleep science: 10 actionable tips that help you fall asleep faster and wake up refreshed." />
<meta property="og:image" content="https://example.com/images/sleep-tips-og.jpg" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Tips for Better Sleep" />
<meta name="twitter:description" content="Backed by sleep science: 10 actionable tips that help you fall asleep faster." />
<meta name="twitter:image" content="https://example.com/images/sleep-tips-og.jpg" />Frequently asked questions
- What meta tags should every page have?
- At minimum: <meta charset>, <meta name="viewport">, <title>, and <meta name="description">. For social sharing add Open Graph (og:title, og:description, og:image, og:url) and Twitter Card tags. For crawl control add a robots meta tag.
- How long should a meta description be?
- Google typically displays up to 160 characters, though it sometimes shortens or rewrites the snippet. Keep your description under 160 characters, make it accurate and compelling — it directly affects click-through rate even though it does not influence rankings.
- Do keywords meta tags help SEO?
- No. Google, Bing and most major search engines have ignored the keywords meta tag for over a decade. It is harmless to include but provides no ranking benefit. Focus on relevant, natural use of keywords in your visible page content instead.
- What is the difference between og:title and the page title tag?
- The <title> tag controls the text in the browser tab and the blue headline in Google Search results. og:title controls the headline shown when someone shares your page on Facebook, LinkedIn, Slack, and other platforms that read Open Graph data. You can — and usually should — write them independently for each context.
- What Twitter Card type should I use?
- Use summary_large_image when you have a high-quality image (at least 1200×630 px) and want it to appear prominently. Use summary for pages without a strong image — it shows a small thumbnail instead. The app and player types are for specific use cases (mobile apps and embedded media).