Meta Descriptions

Understanding Meta Descriptions

A meta description provides a short summary of a webpage that search engines can use when creating the descriptive text shown with a search result.

The description is placed inside a <meta> element in the document's <head>. It is not normally displayed as part of the visible webpage, but a clear and accurate description can help people understand what the page offers before they visit it.

The Meta Description Element

A meta description uses the <meta> element with the name="description" attribute and a content attribute containing the page summary.

<head>
  <meta name="description" content="Learn HTML basics, including document structure, headings, links, images, and accessibility.">
</head>

The description belongs inside the document's <head>. The value of the content attribute contains the actual description.

A page should normally have no more than one standard meta description.

How Search Engines Use Descriptions

Search engines can use a meta description when creating the snippet displayed beneath a page's title in search results.

The meta description does not guarantee exactly what will appear. A search engine may instead select visible text from the webpage when that text provides a better description for a particular search.

This means the same webpage can sometimes appear with different descriptive text for different searches. The meta description should still provide a useful general summary of the page.

Write Useful Descriptions

A useful meta description tells a potential visitor what the page contains and gives enough information to decide whether the page is relevant.

A vague description provides little useful information:

<meta name="description" content="This page has lots of useful information. Learn more here.">

A more descriptive version explains the actual content:

<meta name="description" content="Learn how to add responsive images to HTML, including file formats, alt text, dimensions, and performance.">

Write the description as a natural summary rather than a collection of search terms.

Use Unique Descriptions

Important pages should generally have descriptions that reflect their individual content. Reusing the same description throughout a website makes it less useful for distinguishing one page from another.

For example, separate tutorial pages could use descriptions such as:

<meta name="description" content="Learn HTML basics, including document structure, headings, links, images, and accessibility.">

<meta name="description" content="Learn CSS basics, including selectors, colors, spacing, typography, and responsive styling.">

The descriptions follow a consistent style while still explaining what makes each page different.

Meta Description Length

HTML does not define a required character length for a meta description, and there is no universal character count that guarantees the complete description will appear in search results.

Search engines display snippets within a limited amount of space and may shorten them according to the device, search query, and result layout. For that reason, the most useful information should appear early in the description.

Many descriptions are written as one or two concise sentences, but clarity and accuracy are more important than reaching an exact number of characters.

Avoid making descriptions unnecessarily long simply to include additional keywords or promotional wording.

Use Relevant Words Naturally

The meta description should naturally contain words that accurately describe the page's subject. These words can help people recognize that the result relates to what they are looking for.

<meta name="description" content="Learn how to write useful image alt text, including descriptions, decorative images, and accessibility.">

Do not turn the description into a list of repeated words or slight variations of the same phrase.

<meta name="description" content="HTML Image optimizing images, content HTML pages, optimizing images HTML images, HTML image content tips, best image alt text.">

A description written for people is easier to understand and more accurately represents the page.

Match the Page Content

The meta description should accurately summarize the content visitors will find after opening the page.

A misleading description may attract a click, but visitors are unlikely to stay if the page does not provide what the description promised. Search engines may also choose not to use a description that poorly represents the visible content.

A strong description works together with the page title, main heading, and visible content to communicate the same general subject.

Missing Meta Descriptions

A webpage can still be discovered and indexed without a meta description. When no description is provided, a search engine can generate a snippet from visible text on the page.

For important pages, writing a useful description gives you an opportunity to provide a concise summary that may be used in search results.

On very large websites where every description cannot reasonably be written by hand, descriptions may be generated from accurate page-specific information. Generated descriptions should still be meaningful and should not simply repeat the same generic wording on every page.

Quotes and Special Characters

Because the description is stored inside an HTML attribute, quotation marks must be handled correctly so they do not accidentally end the content attribute.

For example, an apostrophe does not cause a problem when the attribute value uses double quotation marks:

<meta name="description" content="Learn practical techniques for creating responsive images in HTML.">

If double quotation marks need to appear inside a double-quoted attribute value, use the appropriate character reference:

<meta name="description" content="Learn why web designers call this variety &quot;the perfect website HTML image&quot; and how to develop it.">

Always check the completed markup to make sure the description remains entirely inside the content attribute.

Common Meta Description Miheadings

Meta Description Examples

The following examples show descriptions for several different pages on the same tutorial website.

Each description identifies the specific page while giving visitors a concise preview of the information they can expect to find.

Best Practices

• Add a useful meta description to important webpages.
• Place the description inside the document's <head>.
• Accurately summarize the visible content of the page.
• Write descriptions for people rather than creating lists of keywords.
• Give important pages descriptions that distinguish them from one another.
• Put the most useful information near the beginning.
• Keep descriptions concise without relying on an arbitrary character limit.
• Avoid misleading claims or descriptions unrelated to the page content.
• Use valid HTML when quotation marks or other special characters appear in attribute values.
• Remember that search engines may generate their own snippet instead of displaying the meta description.