HtmlHow-ToBeginner · 3 min read

How to Add Meta Description in HTML for Better SEO

To add a meta description in HTML, include a <meta name="description" content="Your description here"> tag inside the <head> section of your HTML document. This tag provides a brief summary of your page for search engines and browsers.

📐

Syntax

The meta description tag uses the <meta> element with two main attributes:

name="description": Specifies that this meta tag is for the page description.
content="...": Contains the actual description text shown in search results.

This tag must be placed inside the <head> section of your HTML document.

html

<meta name="description" content="Your page description here">

💻

Example

This example shows a complete HTML page with a meta description added inside the <head>. The description summarizes the page content for search engines.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn how to add a meta description tag in HTML to improve SEO and page summaries.">
  <title>Meta Description Example</title>
</head>
<body>
  <h1>Welcome to Meta Description Demo</h1>
  <p>This page shows how to add a meta description in HTML.</p>
</body>
</html>

Output

A webpage with a heading 'Welcome to Meta Description Demo' and a paragraph below it.

⚠️

Common Pitfalls

Common mistakes when adding meta descriptions include:

Placing the meta description outside the <head> section, which browsers and search engines may ignore.
Using very long descriptions; keep it under 160 characters for best display in search results.
Leaving the content attribute empty or missing, which defeats the purpose.
Duplicating meta descriptions across multiple pages, which can confuse search engines.

html

<!-- Wrong: meta description outside head -->
<html>
<head></head>
<body>
  <meta name="description" content="Wrong placement">
  <h1>Page Title</h1>
</body>
</html>

<!-- Right: meta description inside head -->
<html>
<head>
  <meta name="description" content="Correct placement">
</head>
<body>
  <h1>Page Title</h1>
</body>
</html>

📊

Quick Reference

Attribute	Purpose	Example
name	Specifies the meta tag type	description
content	Text shown as page summary	Learn HTML basics here
placement	Must be inside	Between and tags

✅

Key Takeaways

Always place the meta description tag inside the section of your HTML.

Keep the description concise, ideally under 160 characters for best search engine display.

Use the tag to provide a summary of your page.

Avoid duplicate meta descriptions across different pages to improve SEO.

A well-written meta description helps users understand your page in search results.