HTML Metadata and Meta Tags: Syntax and Examples

HTML metadata is data about a web page. It sits in the <head> section and isn't shown on the page, but browsers, search engines, and social platforms read it. You write it mainly with <meta> tags, plus elements like <title>, which sets the document title.

Most meta tags are a name and content pair: name identifies the field and content holds its value, as in <meta name="description" content="A short summary of the page.">. Meta tags with charset or http-equiv use a different form. Open Graph tags use property instead of name.

How to Use HTML Metadata

To add HTML metadata, use <meta> tags and other elements inside the <head> section. Here’s an example:

<head>
  <meta charset="UTF-8">
  <meta
    name="description"
    content="Learn about HTML metadata and how it helps your website."
  >
  <meta
    name="keywords"
    content="HTML, metadata, SEO, web development"
  >
  <meta
    name="author"
    content="John Doe"
  >
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>HTML Metadata Guide</title>
</head>

• <meta charset="UTF-8"> defines the document’s character encoding.
• <meta name="description"> provides a short summary for search engines.
• <meta name="keywords"> lists relevant terms (Google ignores it for ranking).
• <meta name="author"> specifies the content’s creator.
• <meta name="viewport"> controls the viewport width and scaling on mobile devices. Responsive layouts also need CSS.

When to Use HTML Metadata

Developers use metadata to structure web pages properly. It improves:

1. Search Engine Optimization (SEO)

Metadata affects how search engines display a webpage in search results. The meta description helps search engines and users understand the page content.

<meta
  name="description"
  content="A complete guide to HTML metadata for beginners and developers."
>

2. Social Media Sharing

Metadata tags like Open Graph (og:) and Twitter Cards define how a webpage appears when shared on social platforms.

<meta
  property="og:title"
  content="HTML Metadata Guide"
>
<meta
  property="og:description"
  content="Everything you need to know about metadata in HTML."
>
<meta
  property="og:image"
  content="https://example.com/metadata-guide.jpg"
>

3. Mobile Responsiveness

The viewport meta tag sets the viewport so the page can scale to the device width.

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
>

Examples of HTML Metadata

Example 1: Basic SEO Metadata

This example sets the title and description that search engines can show in results.

<head>
  <title>What is Metadata in HTML?</title>
  <meta
    name="description"
    content="A guide to HTML metadata, including its syntax and best practices."
  >
  <meta
    name="keywords"
    content="HTML metadata, metadata in HTML, what is metadata in HTML"
  >
</head>

Example 2: Social Media Metadata

Open Graph metadata ensures that a webpage looks appealing when shared on Facebook and LinkedIn.

<meta
  property="og:title"
  content="HTML Metadata Explained"
>
<meta
  property="og:description"
  content="Learn how metadata in HTML affects SEO and social media previews."
>
<meta
  property="og:image"
  content="https://example.com/html-metadata.jpg"
>
<meta
  property="og:url"
  content="https://example.com/html-metadata"
>

Example 3: Preventing Search Engine Indexing

To prevent search engines from indexing a page, use the robots meta tag.

<meta name="robots" content="noindex">

Search engines can only see noindex if the page is crawlable, so don't block it in robots.txt. Add nofollow only if you also want crawlers to ignore the page's links.

Learn More About HTML Metadata

1. Metadata Keywords in HTML

Google ignores <meta name="keywords"> for ranking because of past keyword stuffing. Some internal site search tools can still read it. Its content value is a comma-separated list of terms.

2. Metadata Tags in HTML

Metadata tags go beyond descriptions and keywords. Additional metadata tags include:

• <meta http-equiv="refresh" content="5; URL=https://example.com"> (Redirects after 5 seconds)
• <meta name="theme-color" content="#000000"> (Suggests a color for the browser UI, such as the toolbar on mobile)

3. Caching: HTTP Headers, Not Meta Tags

Browsers ignore <meta http-equiv="cache-control">. To control caching, set the HTTP Cache-Control response header on the server:

Cache-Control: no-cache

Correct metadata helps browsers render the page, shapes how search results and social previews describe it, and, together with CSS, helps the page display well on mobile.