Meta Tags Reference

What are Meta Tags?

Meta tags are HTML elements that provide metadata about your web page. They are placed in the <head> section and are not visible to users, but they provide important information to browsers, search engines, and social media platforms.

       <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML with our comprehensive tutorial">
    <title>HTML Tutorial</title>
</head>
<body>
    <!-- Page content -->
</body>
</html>
      

Important: Meta tags are crucial for SEO, social media sharing, and proper browser behavior. They should be included in every HTML document.

Essential Meta Tags

Basic Meta Tags

charset

Specifies the character encoding for the document

viewport

Controls the page's dimensions and scaling for mobile devices

description

Provides a brief description of the page content (150-160 characters)

keywords

Lists relevant keywords (less important for modern SEO)

SEO Meta Tags

robots

Controls how search engines crawl and index the page

author

Specifies the author of the document

canonical

Prevents duplicate content issues by specifying the preferred URL

language

Specifies the language of the document content

Social Media Meta Tags

Open Graph (Facebook)

og:title

Title that appears when shared on social media

og:description

Description for social media sharing

og:image

Image that appears when shared (1200x630px recommended)

og:url

Canonical URL of the page

Twitter Cards

twitter:card

Type of Twitter card (summary, summary_large_image, etc.)

twitter:title

Title for Twitter sharing

twitter:description

Description for Twitter sharing

twitter:image

Image for Twitter sharing

Browser Behavior Meta Tags

Mobile & Performance

theme-color

Sets the browser theme color on mobile devices

apple-mobile-web-app-capable

Enables full-screen mode on iOS devices

format-detection

Controls automatic detection of phone numbers, emails, etc.

preload

Preloads critical resources for better performance

Security & Privacy

referrer

Controls how much referrer information is sent

content-security-policy

Defines security policies for content loading

x-ua-compatible

Forces Internet Explorer to use latest rendering engine

Complete Meta Tags Template

Best Practice: Use this template as a starting point for your HTML documents. Customize the content values for each page.

       <!DOCTYPE html>
<html lang="en">
<head>
    <!-- Basic Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Your page description here (150-160 characters)">
    <meta name="keywords" content="keyword1, keyword2, keyword3">
    <meta name="author" content="Your Name">
    
    <!-- SEO Meta Tags -->
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://yoursite.com/current-page">
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Your Page Title">
    <meta property="og:description" content="Your page description">
    <meta property="og:image" content="https://yoursite.com/image.jpg">
    <meta property="og:url" content="https://yoursite.com/current-page">
    <meta property="og:type" content="website">
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Your Page Title">
    <meta name="twitter:description" content="Your page description">
    <meta name="twitter:image" content="https://yoursite.com/image.jpg">
    
    <!-- Browser Behavior -->
    <meta name="theme-color" content="#3b82f6">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your page content -->
</body>
</html>
      

Meta Tags Best Practices

Important Guidelines:

Keep descriptions between 150-160 characters
Use unique meta tags for each page
Include Open Graph tags for social media
Always include viewport meta tag for mobile
Use UTF-8 character encoding

Common Mistakes to Avoid

Duplicate meta descriptions across pages
Missing or incorrect viewport settings
Too long or too short descriptions
Missing Open Graph images
Incorrect character encoding