How to Write an HTML Meta Description Tag

The basic HTML meta description is:

<meta name="description" content="A concise, accurate summary of this page.">

Put it inside the valid <head> element of the page. Treat it as a candidate summary for search snippets, not a command that forces Google to show the exact text. Google primarily creates snippets from page content and may use your description when it is a better match for the query.

Google can show different snippet text for different searches, and it can truncate displayed text to fit the device. Write the most useful information early and describe the page accurately.

1. Add the tag to an HTML page

A complete minimal document looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>How to Write an HTML Meta Description Tag</title>
  <meta name="description" content="Learn the correct HTML syntax, placement, writing process, and Google behavior for meta descriptions.">
</head>
<body>
  <h1>How to Write an HTML Meta Description Tag</h1>
  <p>Your page content starts here.</p>
</body>
</html>

The name value must be description, and the summary belongs in the content attribute. Place the element in <head>, alongside the title, charset, canonical link and other metadata.

Common placement mistakes

Putting the tag in <body>.
Using name="meta-description" or another nonstandard name.
Leaving the content attribute empty.
Outputting several competing description tags through a template or plugin.
Putting invalid elements in <head>, which can interfere with how Google reads later metadata.

Google documents supported metadata in Meta Tags and Attributes that Google Supports and valid head structure in Valid Page Metadata for Google Search.

2. Write a useful description

Identify the page’s subject. State what the reader will find on this URL.
Match the searcher’s reason for opening it. Explain the outcome, answer or resource they can expect.
Add one distinguishing detail. Mention a format, audience, example, version or task when it helps someone choose this result.
Put the key value first. Displayed text can be truncated, and Google may select a different passage.
Use natural language. Do not concatenate keyword variants or write a list that fails to summarize the page.
Keep it page-specific. Important pages should have distinct descriptions rather than repeated site-wide boilerplate.

For example, a page about resizing images could use:

<meta name="description" content="Resize PNG, JPEG and WebP images in your browser, with exact pixel dimensions and quality guidance for each format.">

This is more useful than a string such as “image resize, resize image, photo resize, image tool,” because it tells a person what the page does.

3. How long should a meta description be?

There is no fixed maximum length for the HTML tag in Google’s guidance. Google says snippets are truncated as needed, typically to fit the device width. Do not chase a supposedly guaranteed character count. Communicate the page’s main value near the beginning, then remove repetition and filler.

The supplied description can still be longer than the visible snippet. A longer source value does not make Google display all of it, and a short value does not guarantee that Google will use it unchanged.

4. Will Google show the exact text?

Not necessarily. Google says snippets are primarily created from page content itself. It may use the <meta name="description"> value when that produces a more accurate description for a search. The chosen snippet can vary by query.

Make the description and visible page copy agree. If the description promises an answer that the page does not provide, Google has a reason to replace it.

5. CMS and framework implementations

CMS

Many CMSs expose a field named SEO description, meta description or search appearance. Enter the page-specific summary there and inspect the generated HTML. The CMS field is useful only if it ultimately outputs a valid description element in the document head.

Server-rendered templates

<head>
  <title>{{ page.title }}</title>
  <meta name="description" content="{{ page.meta_description }}">
</head>

Escape attribute characters such as quotation marks and ampersands. Define a fallback only when it remains accurate; a generic description is preferable to an empty attribute but should not replace page-specific text on important URLs.

Programmatic descriptions

Large sites can generate descriptions when the output stays readable, diverse and specific to each page. Build from meaningful fields such as product name, category, use case or document type. Do not concatenate every available keyword or copy the same sentence to thousands of URLs. Google discusses programmatic descriptions in its How to Write Meta Descriptions guidance.

6. Controls for search previews

A useful description is separate from controls that restrict snippets:

nosnippet prevents a text snippet from being shown.
max-snippet sets a maximum number of characters Google may use.
data-nosnippet marks a section of visible text that should not be used in snippets.

These controls are for limiting or excluding preview text. They do not improve a description and are not substitutes for writing one. See Google’s Robots Meta Tags Specifications.

7. Validate and preview the rendered tag

Open the page’s final, publicly accessible URL.
View the rendered source or DOM and search for meta name="description".
Confirm there is one intended tag inside <head>.
Check that the value is not empty, truncated by a template variable, or filled with escaped markup.
Compare it with the visible heading and opening copy.
Check important URL variants, such as locale, pagination and product pages, for accidental duplicates.

For pages rendered by JavaScript, inspect the HTML that crawlers receive as well as the post-render DOM. A browser extension showing the DOM alone may hide a server-side template problem.

8. Troubleshooting

Symptom	Likely cause	Fix
The tag is missing	CMS field is unused, template branch is not rendered, or the tag was placed in the body.	Inspect the final HTML and emit the element inside a valid head.
Google shows different text	Google selected page content that better matches the query.	Improve the description and the page’s visible summary; do not assume exact display.
Several descriptions appear	A theme and SEO plugin both output metadata.	Disable one source and retain a single canonical value.
Descriptions are identical site-wide	A global template value is overriding page data.	Prioritize important URLs and generate readable, page-specific values.
Text contains HTML or template syntax	Attribute escaping or variable rendering failed.	Escape the value for an HTML attribute and test empty and quote-containing inputs.
The preview is cut off	Snippet display depends on device width and query.	Put the essential promise first; do not rely on a character limit.
Metadata after the description is ignored	Invalid markup in the head can disrupt parsing.	Validate the head structure and remove elements that are not allowed there.

9. Performance, reliability and maintenance

The tag is tiny and does not add a network request, so its runtime cost is negligible.
Generate it during server rendering or static builds when possible. This makes the value available without waiting for client-side JavaScript.
Keep generation deterministic: the same URL should not receive random wording between crawls.
Update descriptions when the page’s offer, instructions, supported formats or audience changes.
For catalogs, log the generated value and sample pages from each template so regressions are visible.
Do not promise that a description will increase rankings or always be displayed. Its practical job is to explain the result and help the right searcher decide.

10. Or skip the browser setup

If you need a rendered screenshot to verify how a page, CMS template or metadata change actually appears, ScreenshotNeo captures the URL through its screenshot API. Cookie and consent banners, newsletter popups and chat widgets are removed before the shot; bot checks, blank pages and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the response reports the page verdict and billing status.

See the ScreenshotNeo API documentation for all options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com/page' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

You can configure full-page capture, a viewport or device preset, retina scale, dark mode, custom CSS, waits, blocked resources and caching when you need a stable visual check. Free usage includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

11. FAQ

Is a meta description a ranking factor?

Use it to describe the page and support search-result selection. The supplied dossier does not establish a ranking benefit, so do not treat it as a ranking guarantee.

Should every page have one?

Write unique descriptions for important pages. Prioritize pages that receive search traffic or represent key journeys, then use carefully generated values for large collections.

Can I use the same description on several pages?

You can, but it gives searchers little information about which URL is relevant. Page-specific text is preferable where practical.

Does Bing use meta descriptions?

Bing’s Webmaster Guidelines include titles and meta descriptions among its guidance, but the available evidence does not establish a Bing-specific length limit or display guarantee. See the Bing Webmaster Guidelines.