← Back to All Tags

<meta>

Specifies document meta information

Void Element

Definition and Usage

The <meta> element establishes metadata about an HTML document. Metadata is data (information) about data.

<meta> tags always go inside the <head> element and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page but is machine parsable and used by:

  • Browsers (how to display content or reload page)
  • Search engines (keywords and description)
  • Other web services (social media previews)
Important: The <meta> tag is a void element (self-closing) and must be placed in the <head> section.
SEO Tip: Always include charset and viewport meta tags. The description meta tag is crucial for search engine rankings.

Browser Support

The <meta> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
charset character_set Specifies the character encoding for the HTML document (e.g., UTF-8)
name application-name
author
description
generator
keywords
viewport		 Specifies a name for the metadata
content text Specifies the value associated with the name or http-equiv attribute
http-equiv content-security-policy
content-type
default-style
refresh		 Provides an HTTP header for the information/value of the content attribute
property og:title
og:description
og:image
og:url		 Used for Open Graph metadata (social media sharing)

Examples

Character Encoding (Required)

Specify the character encoding for the HTML document:

Example

<meta charset="UTF-8">
Best Practice: Always include this as the first <meta> tag in your <head> to ensure proper character rendering.

Viewport for Responsive Design (Required)

Define the viewport for responsive web design:

Example

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

Page Description (SEO)

Provide a description that appears in search engine results:

Example

<meta name="description" content="Learn HTML with free tutorials, examples, and interactive code playground. Perfect for beginners and advanced developers.">

Keywords (SEO)

Define keywords for search engines:

Example

<meta name="keywords" content="HTML, tutorial, web development, coding, programming">

Author Information

Specify the author of the document:

Example

<meta name="author" content="John Doe">

Open Graph Tags (Social Media)

Define how content appears when shared on social media:

Example

<meta property="og:title" content="HTML Tutorial - Learn Web Development">
<meta property="og:description" content="Free HTML tutorials with interactive examples">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/tutorial.html">
<meta property="og:type" content="website">

Twitter Card Tags

Optimize content preview for Twitter:

Example

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Tutorial - Learn Web Development">
<meta name="twitter:description" content="Free HTML tutorials with interactive examples">
<meta name="twitter:image" content="https://example.com/preview.jpg">

Robots Meta Tag

Control search engine crawling and indexing:

Example

<!-- Allow indexing and following links -->
<meta name="robots" content="index, follow">

<!-- Prevent indexing -->
<meta name="robots" content="noindex, nofollow">

Page Refresh/Redirect

Refresh or redirect the page after a specified time:

Example

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

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

Theme Color (Mobile Browsers)

Set the browser theme color on mobile devices:

Example

<meta name="theme-color" content="#745af2">

Complete Head Section Example

A comprehensive example with all essential meta tags:

Example

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML with free tutorials and examples">
  <meta name="keywords" content="HTML, tutorial, web development">
  <meta name="author" content="HTML Free Codes">
  <meta name="robots" content="index, follow">

  <!-- Open Graph -->
  <meta property="og:title" content="HTML Tutorial">
  <meta property="og:description" content="Learn HTML with free tutorials">
  <meta property="og:image" content="https://example.com/preview.jpg">
  <meta property="og:url" content="https://example.com">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML Tutorial">

  <title>HTML Tutorial - Learn Web Development</title>
</head>

Common Meta Tags Reference

Meta Tag Purpose
charset Defines character encoding (always use UTF-8)
viewport Essential for responsive design on mobile devices
description Summary shown in search results (150-160 characters recommended)
keywords Search keywords (less important for modern SEO)
author Author of the document
robots Controls search engine crawling (index, noindex, follow, nofollow)
og:* (Open Graph) Controls how content appears on Facebook, LinkedIn, etc.
twitter:* Controls how content appears on Twitter/X
theme-color Sets browser toolbar color on mobile devices

Try it Yourself

Interactive Example

Meta tags are in the document head and won't be visible on the page, but you can inspect this page to see examples of meta tags in action.

This page includes:

  • Character encoding (UTF-8)
  • Viewport for responsive design
  • Page description for SEO
  • Keywords for search engines
  • Canonical URL

SEO Importance

  • Description Meta Tag: Directly affects click-through rates from search results. Keep it concise (150-160 characters) and compelling.
  • Viewport Meta Tag: Critical for mobile SEO. Google prioritizes mobile-friendly websites.
  • Charset Meta Tag: Ensures proper text rendering across all devices and browsers.
  • Robots Meta Tag: Controls which pages search engines should index.
  • Open Graph Tags: Improves social media sharing, which can drive traffic and improve SEO.
  • Keywords Meta Tag: Less important for modern SEO but still used by some search engines.

Social Media Meta Tags

Open Graph Protocol (Facebook, LinkedIn)

  • og:title - The title of your content
  • og:description - A brief description of the content
  • og:image - Image URL that appears when sharing (1200x630px recommended)
  • og:url - The canonical URL of the page
  • og:type - The type of content (website, article, video, etc.)

Twitter Card

  • twitter:card - Card type (summary, summary_large_image, app, player)
  • twitter:title - Title of content (max 70 characters)
  • twitter:description - Description (max 200 characters)
  • twitter:image - Image URL for the card
  • twitter:site - Twitter username of website (@username)

Best Practices

  • Always include <meta charset="UTF-8"> as the first element in <head>
  • Always include viewport meta tag for responsive design
  • Write compelling descriptions (150-160 characters) that encourage clicks
  • Use Open Graph tags for better social media sharing
  • Include Twitter Card tags if you share content on Twitter
  • Use descriptive, relevant keywords (but don't keyword stuff)
  • Set appropriate robots meta tags for pages you don't want indexed
  • Keep meta descriptions unique for each page
  • Use HTTPS URLs in Open Graph image tags
  • Test social media previews using Facebook Debugger and Twitter Card Validator

Related Tags

  • <head>

    Contains metadata and links

  • <link>

    Links external resources

  • <title>

    Defines the document title

  • <base>

    Specifies base URL for links

  • <style>

    Defines style information

  • <script>

    Defines client-side scripts