SEO

Meta Tags for SEO: The Essential Guide

Understanding HTML meta tags and how to optimize them for search engines, social sharing, and better click-through rates.

HandyUtils December 18, 2025 7 min read

Meta tags are snippets of HTML that describe your page's content. While invisible to visitors, they're crucial for search engines and social media platforms. Here's what you need to know about using them effectively.

Essential Meta Tags

Title Tag

Technically not a meta tag, but the most important element for SEO:

<title>Your Page Title | Brand Name</title>

Best practices:

  • 50-60 characters (longer gets truncated in search results)
  • Include primary keyword near the beginning
  • Make it compelling—it's your search result headline
  • Unique for every page
  • Include brand name (usually at the end)

Examples:

<!-- Good -->
<title>How to Make Sourdough Bread | Baker's Guide</title>
<title>iPhone 15 Pro Review: Worth the Upgrade? - TechReviews</title>

<!-- Bad -->
<title>Home</title>  <!-- Too vague -->
<title>Best Amazing Top Quality Products for All Your Needs...</title>  <!-- Keyword stuffing -->

Meta Description

Appears below the title in search results:

<meta name="description" content="Learn how to make artisan sourdough bread at home with this step-by-step guide. Includes starter recipe, timing tips, and troubleshooting.">

Best practices:

  • 150-160 characters
  • Include target keyword naturally
  • Write compelling copy that encourages clicks
  • Unique for every page
  • Include a call-to-action when appropriate

Note: Google may rewrite your description if it thinks something else better matches the search query.

Viewport (Mobile)

Essential for responsive design:

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

This isn't about SEO directly, but mobile-friendliness is a ranking factor.

Charset

Defines character encoding:

<meta charset="UTF-8">

Always use UTF-8 for modern websites.

Social Media Meta Tags

Open Graph (Facebook, LinkedIn)

Controls how your content appears when shared:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A compelling description of your content.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">

Image requirements:

  • Minimum 1200×630 pixels for best display
  • Facebook recommends 1.91:1 aspect ratio
  • Maximum file size: 8MB
  • Supported formats: JPEG, PNG, GIF

Twitter Cards

Twitter has its own meta tags:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yourusername">
<meta name="twitter:creator" content="@authorusername">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Description for Twitter.">
<meta name="twitter:image" content="https://example.com/image.jpg">

Card types:

  • summary: Small image, title, description
  • summary_large_image: Large image above content
  • player: Video/audio player
  • app: Mobile app download

Complete Meta Tag Template

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Basic Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page Title | Brand Name</title>
    <meta name="description" content="Compelling description in 150-160 characters.">
    
    <!-- Robots -->
    <meta name="robots" content="index, follow">
    
    <!-- Canonical URL -->
    <link rel="canonical" href="https://example.com/page">
    
    <!-- Open Graph -->
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Description for social sharing.">
    <meta property="og:image" content="https://example.com/og-image.jpg">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="Brand Name">
    <meta property="og:locale" content="en_US">
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@brandname">
    <meta name="twitter:title" content="Page Title">
    <meta name="twitter:description" content="Description for Twitter.">
    <meta name="twitter:image" content="https://example.com/twitter-image.jpg">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    
    <!-- Additional -->
    <meta name="author" content="Author Name">
    <meta name="theme-color" content="#007bff">
</head>

Robots Meta Tag

Controls search engine crawling and indexing:

<meta name="robots" content="index, follow">

Common directives:

Directive Meaning
index Allow indexing (default)
noindex Don't index this page
follow Follow links on this page (default)
nofollow Don't follow links
noarchive Don't show cached version
nosnippet Don't show snippet in results
max-snippet:n Limit snippet to n characters
max-image-preview:large Allow large image previews

Examples:

<!-- Default behavior -->
<meta name="robots" content="index, follow">

<!-- Don't index, but follow links -->
<meta name="robots" content="noindex, follow">

<!-- Don't index or follow -->
<meta name="robots" content="noindex, nofollow">

<!-- Google-specific -->
<meta name="googlebot" content="noarchive">

Canonical URL

Tells search engines which version of a page is the "official" one:

<link rel="canonical" href="https://example.com/page">

Use when:

  • Multiple URLs serve the same content
  • You have HTTP and HTTPS versions
  • You have www and non-www versions
  • You have tracking parameters in URLs
  • Content is syndicated across multiple sites
<!-- All these pages might link to one canonical -->
https://example.com/product
https://example.com/product?ref=email
https://example.com/product?utm_source=twitter
http://example.com/product
http://www.example.com/product

Structured Data (JSON-LD)

Not technically meta tags, but important for SEO:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Your Article Title",
    "author": {
        "@type": "Person",
        "name": "Author Name"
    },
    "datePublished": "2024-01-15",
    "image": "https://example.com/image.jpg",
    "publisher": {
        "@type": "Organization",
        "name": "Your Site",
        "logo": {
            "@type": "ImageObject",
            "url": "https://example.com/logo.png"
        }
    }
}
</script>

This helps search engines understand your content and can enable rich snippets in search results.

Meta Tags That Don't Matter (Anymore)

Keywords Meta Tag

Google has ignored this since 2009:

<!-- Don't bother with this -->
<meta name="keywords" content="keyword1, keyword2, keyword3">

Revisit-After

Search engines don't honor this:

<!-- Doesn't work -->
<meta name="revisit-after" content="7 days">

Rating

Not used by major search engines:

<!-- Unnecessary -->
<meta name="rating" content="general">

Testing Your Meta Tags

Tools

  • Google Search Console: See how Google views your pages
  • Facebook Sharing Debugger: Test Open Graph tags
  • Twitter Card Validator: Test Twitter cards
  • Rich Results Test: Test structured data

Common Issues

  1. Missing or duplicate titles: Every page needs a unique title
  2. Description too long/short: Aim for 150-160 characters
  3. Missing OG image: Social shares look bland without images
  4. Wrong canonical URL: Check that it points to the correct page
  5. Blocking important pages: Accidental noindex tags

JavaScript and Meta Tags

For single-page applications, ensure meta tags are:

  1. Server-side rendered for search engines
  2. Updated on navigation for social sharing
// React Helmet example
import { Helmet } from 'react-helmet';

function Page() {
    return (
        <>
            <Helmet>
                <title>Page Title | Brand</title>
                <meta name="description" content="Page description." />
                <meta property="og:title" content="Page Title" />
            </Helmet>
            <div>Page content...</div>
        </>
    );
}

Quick Reference

Tag Purpose Length
<title> Search result headline 50-60 chars
meta description Search result snippet 150-160 chars
og:title Social share title 60 chars
og:description Social share description 200 chars
og:image Social share image 1200×630 px

Summary

Must-have meta tags:

  1. ✅ Title tag (unique, compelling, 50-60 chars)
  2. ✅ Meta description (unique, compelling, 150-160 chars)
  3. ✅ Viewport for mobile
  4. ✅ Canonical URL (when needed)
  5. ✅ Open Graph tags for social sharing

Nice to have:

  • Twitter Card tags
  • Structured data (JSON-LD)
  • Favicon and touch icons (use our Favicon Generator to create all sizes from SVG)

Skip:

  • Keywords meta tag
  • Revisit-after
  • Any "SEO" meta tags from the 2000s

Well-crafted meta tags won't make bad content rank, but they will help good content perform better in search results and social shares.

Need help generating meta tags? Try our Meta Tag Generator!

Related Topics
meta tags SEO title tag meta description open graph twitter cards search optimization
Share this article
Tweet Share Share
Try These Tools
Related Articles
All Articles

Continue Reading

SEO
robots.txt: Controlling Search Engine Crawlers

A complete guide to robots.txt, including syntax, common patterns, and how to use it to control which pages search engines can access.

6 min read