Meta Tags That Matter: Title, Description, Canonical and Open Graph
Which head tags affect how a page appears in search and when shared, how long they should be, and which old tags you can ignore.
Title and description
The title tag is the clickable headline in search results and the label of a browser tab. Keep it near 50 to 60 characters so it is not cut off, put the main topic first, and make each page title unique.
The meta description is the summary shown under the title. About 150 to 160 characters fits on most screens. It is not a direct ranking factor, but a clear description earns more clicks. Google sometimes rewrites it to match the query, so write it to stand on its own.
Canonical and robots
A canonical link tells search engines which URL is the preferred version of a page when several addresses show the same content, such as versions with tracking parameters or with and without a trailing slash.
The robots meta tag controls indexing. Use noindex for pages you do not want in search results. Do not combine noindex with a robots.txt block, because a blocked page cannot be crawled and its noindex tag will never be seen.
Viewport
The viewport tag, width=device-width, initial-scale=1, makes a page scale correctly on phones. A page without it is treated as a desktop page and shrunk, which hurts mobile usability.
Worked example: a complete head
Here is a minimal head for a page, in order, with the reason for each line. The title below is 53 characters and the description is 93 characters, so both fit in search results.
- Title: Free CIDR Calculator and Subnet Guide | Example Tools. The main topic comes first and the site name comes last.
- Description: Convert CIDR notation to an IP range, subnet mask and host count. Free, runs in your browser. It says what the page does in one sentence.
- Canonical: the full https address of the page, with no tracking parameters.
- Viewport: width=device-width, initial-scale=1.
- Open Graph: og:title, og:description, og:image as a full https address to a 1200 by 630 picture, og:url, and twitter:card set to summary_large_image.
Order does not matter to crawlers, but putting the charset and viewport first keeps the page rendering correctly while the rest loads.
What each tag controls
| Tag | Where it appears | If it is missing |
|---|---|---|
| title | Search result headline, browser tab, bookmarks | The search engine invents a title from the page |
| meta description | Snippet under the title | A snippet is taken from page text |
| canonical | Not visible, read by crawlers | Duplicates compete with each other |
| robots | Not visible, read by crawlers | The page is indexable by default |
| viewport | Mobile layout | Phones render a shrunk desktop page |
| og:image | Link previews in chat and social apps | The preview has no picture or a random one |
Open Graph and Twitter cards
When someone shares your link, chat apps and social networks read Open Graph tags to build the preview card.
A minimal set is:
- og:title and og:description for the text.
- og:image for the picture. 1200 by 630 pixels works well across platforms.
- og:url for the canonical address.
- twitter:card set to summary_large_image for a large preview on X.
Relative image paths fail in previews, so use a full https URL.
Tags you can ignore
The meta keywords tag has been ignored by Google for years and only exposes your target terms to competitors. Tags such as revisit-after or generator also do nothing for ranking.
The Meta Tag Generator builds a complete set with correct escaping, ready to paste into your page head.
Common mistakes and how to spot them
- The same title on every page. Search a site name with the site: operator and look for repeated titles.
- A canonical that points to a different page by accident, such as the home page on every URL. View the page source and read the canonical value.
- noindex left on after launch. A staging setting often ships to production, and the page quietly drops out of search.
- A relative og:image path. The preview works on your own site but is blank in chat apps, so use the full https address.
- A description over about 160 characters. It is cut off with an ellipsis, so put the key point first.
- A title that is too long. Search engines cut it off partway, so a brand name placed at the end may never be seen. Keep the topic first and the site name last.
- Forgetting to test after a template change. One edit to a shared layout can alter the head of every page, so check a few pages by viewing the source.
Frequently asked questions
- Do meta tags affect ranking? The title does. The meta description does not directly, though it affects clicks. Most other tags control display or crawling, not ranking.
- Why does Google show a different description from mine? Google may pick text from the page when it matches the search better. A description that answers the likely query is used more often.
- Do I need Twitter card tags if I have Open Graph tags? Open Graph covers most platforms. Adding twitter:card set to summary_large_image gives X a large image preview.
- What is the right image size for og:image? 1200 by 630 pixels works well across platforms. Keep important content away from the edges because some apps crop.
- Can I use noindex and robots.txt together? Not for the same page. A page blocked in robots.txt is never fetched, so the noindex tag is never read.