Meta tags are small pieces of HTML in a page's <head> that tell search engines and social networks what the page is, which URL is the real one and how to show it. The examples below were produced by the site's own generators, so you can reproduce them.
The tags that matter
| Tag | What it does | Typical guidance |
|---|---|---|
<title> |
The page title in results and browser tabs | About 30 to 60 characters, under about 600 px wide |
<meta name="description"> |
The summary a search engine may show under the title | About 70 to 160 characters, under about 920 px |
<link rel="canonical"> |
Names the preferred URL when several show the same content | One absolute URL per page |
<link rel="alternate" hreflang> |
Links the language and region versions of a page together | Every version lists all versions, including itself |
<meta name="robots"> |
Tells crawlers whether to index the page or follow its links | noindex keeps a page out of results |
og:* and twitter:* |
Control the title, text and image of link previews | Image about 1200 × 630 px (1.91:1) |
Search engines cut titles and descriptions by pixel width, not character count, so a title of the wrong letters can be cut early. The title Free Online Mortgage Calculator With Taxes, Insurance and Extra Payments | Example is 774 px wide against a 600 px desktop limit, so it displays as Free Online Mortgage Calculator With Taxes, Insurance and…. The SERP Snippet Preview shows exactly where the cut falls on desktop and mobile. The old keywords meta tag is ignored by Google, so skip it; if you want ideas for terms, the Keyword Generator suggests related phrases.
A complete head
The Meta Tag Generator builds a head like this, with counters that warn when a title or description is too short or too long:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mortgage Calculator: Monthly Payment, Taxes & Insurance</title>
<meta name="description" content="Estimate your monthly mortgage payment with taxes, insurance and extra payments. Free, private and instant.">
<link rel="canonical" href="https://example.com/mortgage">
<meta property="og:type" content="website">
<meta property="og:title" content="Mortgage Calculator: Monthly Payment, Taxes & Insurance">
<meta property="og:description" content="Estimate your monthly mortgage payment with taxes, insurance and extra payments. Free, private and instant.">
<meta property="og:url" content="https://example.com/mortgage">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:alt" content="Mortgage calculator">
<meta name="twitter:card" content="summary_large_image">
Canonical URLs
If the same page can be reached as /page, /page/ and /page?ref=x, search engines have to guess which to rank. A canonical link names the one to prefer. It must be an absolute URL, and every duplicate should point to the same one. Confirm what a page declares with the Canonical Tag Checker.
Language versions with hreflang
For a site in several languages, each page lists all of its versions, itself included, plus an x-default for visitors who match none. The links must be reciprocal: if the English page points to the Spanish one, the Spanish page must point back.
<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
The hreflang Tag Generator builds these and flags missing return links.
robots.txt controls crawling, not indexing
A robots.txt file at the site root tells crawlers which paths they may fetch:
User-agent: *
Disallow: /admin/
Allow: /admin/help
Sitemap: https://example.com/sitemap.xml
Note what it does not do. A blocked URL can still appear in results if other sites link to it. To keep a page out of results, leave it crawlable and add noindex in a robots meta tag, because a crawler that cannot fetch the page cannot see the tag. Build a file with the robots.txt Generator and test paths with the Robots.txt Tester. Never use robots.txt to hide anything sensitive: it is public.
Social previews
Open Graph (og:) and Twitter (twitter:) tags set the card shown when a link is shared. Use an absolute image URL about 1200 × 630 px (a 1.91:1 ratio) and add alt text. Preview the result with the Social Share Preview Generator.
Structured data with JSON-LD
Structured data labels what a page contains in a machine-readable way, which can make a page eligible for rich results. JSON-LD is the usual format, placed in a <script type="application/ld+json">. The JSON-LD Schema Generator outputs, for example, FAQ markup:
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Is it free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes."
}
}
]
}
Only mark up content that is visible on the page, and validate it before publishing. For more on the JSON syntax see How JSON Works.
Common mistakes
- Duplicate titles and descriptions across pages. Write each one for its page.
- A canonical that points somewhere else by accident. It can drop a page from results.
- Blocking a page in robots.txt and expecting it to vanish. Use
noindex. - Relative URLs in canonical and
og:tags. Use absolute URLs. - Missing return links in hreflang. Search engines ignore one-way annotations.