What meta tags should every page have?

At minimum: , , , and . 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 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).

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

Page Title 0/60

Meta Description 0/160

Keywords (optional, comma-separated)

Author (optional)

Canonical URL

Open Graph & Twitter

OG / Twitter Image URL

Image dimensions (px)

Emitted as og:image:width / og:image:height so the very first scrape renders a large card instead of a small or blank one. Set them to your image's real size — 1200×630 is only the recommended default. Clear either box to omit both tags.

Twitter Card Type

Robots: index

Robots: follow

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" />

A short history of the meta tag

The <meta> element has been part of HTML since the mid-1990s as a place to put metadata — information about the page rather than content shown on it. In the early days of search, one meta tag in particular, <meta name="keywords">, let authors list the terms they wanted to rank for. It was abused so heavily — pages stuffed with hundreds of irrelevant keywords — that search engines stopped trusting it. Google has confirmed it does not use the keywords meta tag at all, and has not for well over a decade. What survives today is a small set of meta tags that genuinely matter: the ones that control how your page is rendered, how it is indexed, and how it looks when it appears in search results and social feeds.

The title tag: your most important snippet

The <title> element is the single most influential piece of metadata on a page. It is the clickable blue headline in Google's results, the label on the browser tab, and the default name when someone bookmarks the page. Google typically displays roughly the first 50–60 characters (more precisely, about 600 pixels' worth, since it measures width, not characters) before truncating with an ellipsis, so front-load the words that matter. Put the most important, descriptive term near the start; keep it unique on every page; and if you append a brand, do it at the end after a separator. Note that Google increasingly rewrites titles in its results when it judges yours a poor match for the query — a well-written, accurate, query-relevant title is the best way to keep your own wording.

The meta description: it doesn't rank, but it sells the click

The meta description is the grey snippet beneath the title in search results. It is not a ranking factor — writing keywords into it will not move you up the page — but it is one of your best levers on click-through rate, because it is your advertising copy right there in the results. Aim for about 150–160 characters; longer text is truncated. Make it an accurate, compelling summary that answers the searcher's likely question and gives a reason to click. Be aware that Google frequently rewrites the description too — studies repeatedly find it ignores the supplied description more than half the time, often pulling a more relevant sentence straight from the page for a given query. Writing a strong description is still worthwhile: it is the snippet you control when Google does use it.

The two tags every page must have: charset and viewport

Two meta tags are non-negotiable. <meta charset="UTF-8"> declares the character encoding; without it, accented letters, currency symbols and emoji can render as garbled "mojibake". Place it as the very first thing inside <head> so the browser knows how to read everything that follows. <meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to render the page at the device's real width instead of zooming out a desktop layout; without it a responsive design will not actually be responsive on a phone. Both are technical rather than SEO tags, but a page that gets either wrong looks broken to real users.

The robots meta tag: controlling crawl and index

The <meta name="robots"> tag tells search engines how to treat the page. index / noindex controls whether the page may appear in results; follow / nofollow controls whether its links pass authority. Further directives fine-tune the snippet: noarchive stops engines caching a copy, nosnippet suppresses the text preview, and max-snippet, max-image-preview and max-video-preview cap how much can be shown. One crucial subtlety: to keep a page out of the index you must use noindex, not just block it in robots.txt. Blocking a URL in robots.txt stops it being crawled, but Google can still index a blocked URL it discovered elsewhere — and because it cannot crawl the page, it will never see a noindex tag hidden behind the block. If you want a page gone from results, allow it to be crawled and serve noindex.

The canonical tag: pointing at the real URL

Although it is a <link> rather than a <meta>, the canonical tag — <link rel="canonical" href="…"> — belongs in the same head-section toolkit. It tells search engines which URL is the authoritative version of a page when the same or very similar content is reachable at several addresses (with and without a trailing slash, with tracking parameters, printable versions and so on). Consolidating those duplicates onto one canonical URL concentrates ranking signals instead of splitting them, and prevents the "which copy should I show?" confusion that can suppress all of them. A self-referencing canonical — a page pointing at its own clean URL — is good practice on every page.

Open Graph: how your link looks when shared

The Open Graph protocol was introduced by Facebook in 2010 and is now read by almost every platform that builds a link preview — Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage and more. When someone shares your URL, these platforms do not re-read your <title> and description; they look for og: tags. The core set is og:title, og:description, og:image, og:url and og:type, with og:site_name and og:locale as useful extras. The most important — and most often neglected — is og:image, the picture that dominates the preview card. The widely-supported standard size is 1200 × 630 pixels (a 1.91:1 ratio); use an absolute https URL, keep important text and faces near the centre to survive cropping, and supply an image on every page you expect to be shared, or your links will appear as bare, unattractive text.

Twitter / X Cards

X (formerly Twitter) uses its own twitter: tags, but with a helpful fallback: if a twitter: tag is missing, X reads the matching Open Graph tag instead, so you rarely need to duplicate everything. The one tag with no Open Graph equivalent is twitter:card, which chooses the layout: summary_large_image shows a big, edge-to-edge image and is what you want when you have a strong 1200 × 630 graphic, while summary shows a small square thumbnail beside the text for pages without a hero image. Add twitter:title, twitter:description and twitter:image only where you want them to differ from your Open Graph values; otherwise let the fallback do the work.

Structured data is a different thing

It is worth clearing up a common confusion: structured data is not a meta tag. Rich results — star ratings, FAQ drop-downs, recipe cards, breadcrumb trails — come from schema.org vocabulary, usually expressed as a block of JSON-LD in the page, not from <meta> elements. Meta tags shape the ordinary blue-link snippet and the social card; structured data unlocks the enhanced result formats above and beyond that. The two are complementary, and a well-optimised page uses both — but they live in different places and follow different rules.

A meta-tag checklist for every page

<meta charset="UTF-8"> as the first line of the head.
A responsive viewport tag.
A unique, descriptive <title> under about 60 characters, important words first.
A compelling <meta name="description"> of roughly 150–160 characters.
A self-referencing rel="canonical" link to the clean URL.
An appropriate robots directive (index, follow for most pages).
Open Graph og:title, og:description, og:image (1200 × 630), og:url and og:type.
A twitter:card value — summary_large_image when you have a good image.

Other head essentials: favicons and theme-color

A few more head tags round out a polished page. The favicon — declared with <link rel="icon"> — is the small icon in the browser tab and bookmark list, and a matching <link rel="apple-touch-icon"> supplies the icon when someone saves your site to a phone home screen. The <meta name="theme-color"> tag tints the browser's UI on mobile to match your brand. And a web app manifest, linked with <link rel="manifest">, lets a progressive web app define its name, icons and colours for installation. None of these affect ranking, but together they make the difference between a page that feels finished and one that does not.

hreflang for multilingual sites

If you publish the same page in more than one language or region, the hreflang annotation tells search engines which version to show which users. Each language variant points at all the others with <link rel="alternate" hreflang="…"> tags (for example en, en-GB, hi, and an x-default fallback). Done correctly it stops the wrong-language page appearing in results and prevents your translations from being treated as duplicate content. It is a specialised tool, but essential for any genuinely international site.

Test your tags before you ship

Because the social preview is generated by each platform from your tags, the only way to be certain it looks right is to check it. Most major platforms provide a debugger — Facebook's Sharing Debugger, LinkedIn's Post Inspector and similar tools — that fetches your URL, shows exactly how the card will render, and reveals any missing or malformed Open Graph tags. These debuggers also refresh the platform's cache, which matters because services cache your preview aggressively: if you update an og:image and still see the old one, re-scraping through the debugger forces the update. Always preview a new page's card before announcing it.

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).