HTML Meta Tags Guide

Master the metadata that powers SEO, social sharing, and browser behavior

What Are Meta Tags?

Meta tags provide metadata about your HTML document that isn't displayed on the page itself, but is used by browsers, search engines, and social media platforms. They influence how your content appears in search results, social shares, and even how browsers render your page.

Essential Meta Tags

Character Encoding

The charset meta tag declares the document's character encoding. UTF-8 is the standard encoding for the web and supports all Unicode characters.

<!-- Always include this as the first meta tag -->
<meta charset="UTF-8">

Viewport Tag

The viewport meta tag controls layout on mobile browsers. Without it, your site may appear zoomed out on mobile devices.

Essential for responsive design
<!-- Standard responsive viewport tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Additional options -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Description & Keywords

The description meta tag provides a brief summary of your page's content, often used as the preview text in search results.

Important for SEO and click-through rates
<!-- Description (150-160 characters ideal) -->
<meta name="description" content="Learn about HTML meta tags and their importance for SEO and web development">

<!-- Keywords (less important today) -->
<meta name="keywords" content="HTML, meta tags, SEO, web development">

SEO Meta Tags

Robots Meta Tag

The robots meta tag controls how search engines index and follow links on your page.

  • index/noindex: Allow/prevent indexing
  • follow/nofollow: Control link following
  • noarchive: Prevent cached copies
  • nosnippet: Prevent snippets in results
<!-- Allow indexing and link following (default) -->
<meta name="robots" content="index,follow">

<!-- Prevent indexing but allow link following -->
<meta name="robots" content="noindex,follow">

<!-- Allow indexing but prevent link following -->
<meta name="robots" content="index,nofollow">

<!-- Prevent both indexing and link following -->
<meta name="robots" content="noindex,nofollow">

Canonical URLs

The canonical link tag helps prevent duplicate content issues by specifying the "master" version of a page.

Important: Use when you have multiple URLs that show the same content.

<!-- Specify the preferred version of this page -->
<link rel="canonical" href="https://example.com/preferred-url">

<!-- Dynamic canonical URL example -->
<link rel="canonical" href="<?php echo $canonicalUrl; ?>">

Social Media Meta Tags

Open Graph (Facebook)

Open Graph tags control how your content appears when shared on Facebook, LinkedIn, and other platforms.

  • og:title: The title of your content
  • og:description: A brief description
  • og:image: The image to display
  • og:url: The canonical URL
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your engaging description">
<meta property="og:image" content="https://example.com/image.jpg">

<!-- Image dimensions (recommended) -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Twitter Cards

Twitter Card tags enhance how your content appears in tweets. Twitter will fall back to Open Graph tags if these aren't present.

  • twitter:card: Type of card (summary, summary_large_image, etc.)
  • twitter:site: Your Twitter @username
  • twitter:creator: Content creator's @username
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@contentcreator">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your engaging description">
<meta name="twitter:image" content="https://example.com/image.jpg">

Complete Examples

Basic Meta Tags

Essential meta tags every HTML document should have

Social Media Meta Tags

Open Graph and Twitter Card tags for rich social sharing

Advanced Meta Tags

Specialized meta tags for browsers and search engines

Meta Tag Best Practices

Do's:

  • Always include charset and viewport tags
  • Write unique, compelling meta descriptions
  • Use social meta tags for better sharing
  • Specify canonical URLs for duplicate content
  • Test with Facebook Sharing Debugger and Twitter Validator

Don'ts:

  • Don't stuff keywords in meta tags
  • Avoid duplicate meta descriptions
  • Don't use misleading titles or descriptions
  • Avoid noindex unless absolutely necessary
  • Don't forget to update when content changes

Try Our HTML Editor

Experiment with meta tags in our interactive editor:

  • Test different meta tag combinations
  • See how they affect search results and social sharing
  • Practice with Open Graph and Twitter Cards
  • Learn through hands-on experimentation
Launch HTML Editor
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn about HTML meta tags">
  
  <!-- Open Graph -->
  <meta property="og:title" content="HTML Meta Tags Guide">
  <meta property="og:description" content="Learn about HTML meta tags">
  <meta property="og:image" content="image.jpg">
  
  <title>Meta Tags Playground</title>
</head>
<body>
  <h1>Experiment with Meta Tags</h1>
</body>
</html>
< Previous (HTML Head)Next (Semantic HTML) >