<meta>

Since:		HTML 4（1997）

The <meta> tag specifies metadata about the document — such as character encoding, description, and viewport settings. Place it inside <head>. It does not affect what is directly displayed on the page, but it influences how browsers and search engines behave.

Syntax

<!-- Specify character encoding -->
<meta charset="UTF-8">

<!-- Combination of name and content attributes -->
<meta name="description" content="A description of the page.">

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

<!-- http-equiv attribute -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Attribute List

Attribute	Description
charset	Specifies the character encoding of the document. Use `UTF-8` for modern web pages.
name	Specifies the type of metadata. Common values include `description`, `keywords`, and `viewport`.
content	Specifies the value corresponding to the `name` or `http-equiv` attribute.
http-equiv	Specifies information equivalent to an HTTP header. Common values include `X-UA-Compatible`.
property	Used with extended metadata such as OGP (Open Graph Protocol).

Common name Values

name value	Description
description	A description of the page. May appear in search engine results.
keywords	Keywords for the page. Largely ignored by major modern search engines.
viewport	Controls the display settings on mobile devices such as smartphones.
robots	Provides instructions to search engine crawlers. Values include `noindex` and `nofollow`.
author	Specifies the author of the page.

Sample Code

sample_meta.html

<head>
  <!-- Character encoding: always place this first inside <head> -->
  <meta charset="UTF-8">

  <!-- Viewport: required for smartphone support -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Page description (shown in search results) -->
  <meta name="description" content="A beginner-friendly guide to using HTML.">

  <!-- Crawler control: prevent search engines from indexing this page -->
  <meta name="robots" content="noindex, nofollow">

  <!-- Theme color for the browser UI on smartphones -->
  <meta name="theme-color" content="#3498db">

  <!-- OGP (controls how the page appears when shared on social media) -->
  <meta property="og:title" content="Page Title">
  <meta property="og:description" content="A description of the page.">
  <meta property="og:image" content="https://example.com/ogp.png">
  <meta property="og:url" content="https://example.com/page/">
  <meta property="og:type" content="website">

  <!-- http-equiv: redirect to another page after 3 seconds -->
  <!-- <meta http-equiv="refresh" content="3; url=https://example.com/"> -->
</head>

Result

The code above does not produce any visible output on the page, but it communicates page information to browsers, social media platforms, and search engines. On smartphones, the viewport setting ensures the page is displayed at the appropriate width. The robots tag instructs crawlers not to index the page, and theme-color tints the browser UI in browsers like Chrome on Android.

View sample page

Notes

Always place <meta charset="UTF-8"> at the very beginning of <head>. If the character encoding declaration appears too late, the browser may misidentify the encoding and display garbled text.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> is required for responsive design on smartphones. Without it, smartphones will render the page at a desktop width and scale it down.

OGP (property="og:...") is a mechanism that controls the title, description, and image displayed when a URL is shared on social media such as Facebook or X (formerly Twitter). It is a good idea to configure this when publishing a website.

Practical meta Tag Settings

Commonly used <meta> tags organized by purpose.

Robots control

<!-- Prevent indexing and block crawlers from following links -->
<meta name="robots" content="noindex, nofollow">

<!-- Allow indexing but suppress snippets (prevents content from appearing in SERPs) -->
<meta name="robots" content="index, nosnippet">

<!-- Target only Googlebot -->
<meta name="googlebot" content="noindex">

Mobile & PWA

<!-- Change the browser UI color on mobile -->
<meta name="theme-color" content="#3498db">

<!-- Switch color based on dark/light mode -->
<meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">

<!-- PWA: launch in standalone mode (hide browser UI when opened from home screen) -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

Redirect (http-equiv)

<!-- Redirect to another page after 3 seconds -->
<meta http-equiv="refresh" content="3; url=https://example.com/new-page/">

<!-- Force IE to use the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Content Security Policy via head (same effect as a server header) -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

Dynamically Manipulating meta Tags with JavaScript

// Read the description
var desc = document.querySelector('meta[name="description"]');
console.log(desc.getAttribute("content"));

// Change og:image dynamically (useful in SPAs during route changes)
var ogImage = document.querySelector('meta[property="og:image"]');
if (ogImage) {
  ogImage.setAttribute("content", "https://example.com/img/new-page.png");
}

// Add a robots meta tag to noindex the page
var robots = document.createElement("meta");
robots.name = "robots";
robots.content = "noindex";
document.head.appendChild(robots);