Path // www.yourhtmlsource.com → Reference → <meta>

<meta>

by Ross Shannon

The <meta> element provides metadata about the HTML document. This includes information like character encoding, page descriptions for search engines, viewport settings for responsive design, and social media sharing information. Meta elements are void elements (self-closing) that are typically placed in the <head> section. However, when used with the itemprop attribute for Microdata, they can also appear in the <body>.

Clock This page was last updated on 2025-11-27


Syntax

<meta name="description" content="Page description here">

or

<meta charset="UTF-8">

Attributes

  • charset - Character encoding for the document (usually "UTF-8")
  • name - Name of the metadata. Common values:
    • description - Page summary for search engines
    • keywords - Relevant keywords (less important for SEO now)
    • author - Document author
    • viewport - Controls layout on mobile devices
    • robots - Instructions for search engine crawlers
  • content - Value associated with the name or http-equiv attribute
  • http-equiv - HTTP header equivalent. Common values:
    • content-type - Content type and character set
    • refresh - Auto-refresh or redirect
    • content-security-policy - Security restrictions
  • property - Used for Open Graph (social media) metadata

Examples

Essential meta tags for every page:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A concise description of the page content">

SEO and search engine control:

<meta name="description" content="Learn HTML with practical examples and tutorials">
<meta name="keywords" content="HTML, tutorial, web development, coding">
<meta name="author" content="John Doe">
<meta name="robots" content="index, follow">

Social media sharing (Open Graph):

<meta property="og:title" content="Article Title">
<meta property="og:description" content="Brief article summary">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">

Twitter Card metadata:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Article Title">
<meta name="twitter:description" content="Article description">
<meta name="twitter:image" content="https://example.com/image.jpg">

Page refresh and redirect:

<!-- Refresh every 30 seconds -->
<meta http-equiv="refresh" content="30">

<!-- Redirect after 5 seconds -->
<meta http-equiv="refresh" content="5;url=https://newsite.com">

When to Use

Meta elements serve several critical purposes:

  • Character encoding - Always declare with <meta charset="UTF-8"> as the first element in <head>
  • Responsive design - The viewport meta tag is essential for mobile-friendly sites
  • Search engine optimization - Descriptions appear in search results
  • Social sharing - Control how your pages look when shared on social media
  • Browser behavior - Compatibility modes, refresh rates, security policies

Best practices:

  • Always include charset declaration first in the <head>
  • Include viewport meta tag for responsive design: width=device-width, initial-scale=1.0
  • Write unique, compelling descriptions for each page (150-160 characters)
  • Add Open Graph tags for better social media sharing
  • Use robots meta tag to control search engine indexing
  • Don't rely on keyword meta tags for SEO (search engines largely ignore them)
  • Avoid auto-refresh/redirect meta tags when possible; use server-side redirects instead
  • Test social sharing with Facebook's Sharing Debugger and Twitter's Card Validator

Related Elements

  • <head> - The container where <meta> must be placed
  • <title> - The page title, another crucial SEO element
  • <link> - For linking to external resources and canonical URLs
  • <base> - Sets the base URL for the document