SEO Meta Tags: The Complete Guide to Title, Description, and Open Graph

Everything you need to know about SEO meta tags — how to write perfect titles and descriptions, Open Graph for social sharing, Twitter Cards, and structured data for rich search results.

DevToolsHub TeamApril 10, 202622 min read1,185 words

What Are Meta Tags?

Meta tags are HTML elements that provide metadata about a web page. They don't appear on the page itself but are read by search engines, social media platforms, and browsers to understand your content.

The most important meta tags for SEO are:

<head>
  <title>Page Title — Up to 60 Characters</title>
  <meta name="description" content="Page description up to 160 characters..." />
  <meta name="robots" content="index, follow" />
  <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/image.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Page Title" />
  <meta name="twitter:description" content="Description" />
  <meta name="twitter:image" content="https://example.com/image.jpg" />
</head>

Generate all these tags instantly with our Meta Tag Generator tool.

The Title Tag

The title tag is the single most important on-page SEO element. It appears in:

Browser tabs
Search engine results (the blue clickable link)
Social media shares (if no OG title is set)
Bookmarks

Title Tag Best Practices

Length: 50-60 characters. Google displays up to ~600 pixels wide, which is roughly 60 characters. Titles longer than this get truncated with "...".

Format: Primary Keyword — Secondary Keyword | Brand Name

Examples:

Good:  JSON Formatter Online — Free JSON Beautifier | DevToolsHub
Good:  How to Resize Images Without Losing Quality (2024 Guide)
Good:  CSS Flexbox Complete Guide: Every Property Explained

Bad:   Home Page (too generic)
Bad:   Best Amazing Incredible JSON Formatter Tool Free Online (keyword stuffing)
Bad:   DevToolsHub | Tools | JSON | Formatter | Online (pipe spam)

Title Tag Rules

Every page needs a unique title — No two pages should share the same title
Put the primary keyword first — Front-loading keywords has a slight SEO benefit
Include your brand name — Usually at the end, separated by | or —
Write for humans — The title is what people click on. Make it compelling.
Match search intent — If someone searches "json formatter", they want a tool, not an article about JSON

The Meta Description

The meta description appears below the title in search results. It doesn't directly affect rankings, but it dramatically affects click-through rate (CTR).

Meta Description Best Practices

Length: 150-160 characters. Google truncates at ~920 pixels wide.

Include:

Primary keyword (Google bolds matching terms)
A clear value proposition
A call to action

Examples:

Good:  Free online JSON formatter and validator. Beautify, minify, and
       validate JSON data instantly. No signup required. All processing
       happens in your browser.

Good:  Learn everything about CSS Flexbox: every property explained with
       visual examples, common layout patterns, and a printable cheat sheet.

Bad:   Welcome to our website. We have many tools. Please visit us.
Bad:   JSON JSON formatter JSON beautifier JSON validator JSON online free

When Google Ignores Your Meta Description

Google rewrites meta descriptions about 63% of the time. It generates its own snippet when:

The meta description doesn't match the search query
The description is too short or generic
Page content has a better matching passage

Tip: Write descriptions that match the most common search queries for that page.

Open Graph Tags

Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, Slack, Discord, and other platforms.

Essential OG Tags

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description" />
<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="website" />
<meta property="og:site_name" content="Your Site Name" />

OG Image Requirements

Platform	Recommended Size	Min Size	Aspect Ratio
Facebook	1200×630	600×315	1.91:1
LinkedIn	1200×627	1200×627	1.91:1
Slack	1200×630	250×250	1.91:1
Discord	1200×630	256×256	1.91:1

Tip: Create OG images at 1200×630px to work everywhere. Use our Image Resizer to resize images to the perfect OG dimensions.

Preview how your links will look when shared with our Open Graph Preview tool.

Twitter Card Tags

Twitter (X) uses its own meta tags, falling back to OG tags if Twitter-specific ones aren't present.

Card Types

summary — Small square image with title and description

<meta name="twitter:card" content="summary" />

summary_large_image — Large image above title and description (recommended)

<meta name="twitter:card" content="summary_large_image" />

Complete Twitter Card

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourusername" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Description" />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
<meta name="twitter:image:alt" content="Image description for accessibility" />

Canonical Tags

The canonical tag tells search engines which URL is the "official" version of a page. This prevents duplicate content issues.

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

When to Use Canonical Tags

URL parameters: ?sort=price and ?sort=date show the same content
HTTP vs HTTPS: Both versions are accessible
www vs non-www: Both resolve to the same page
Trailing slashes: /page and /page/ show the same content
Syndicated content: Your article is republished on another site

Robots Meta Tag

Controls how search engines index and follow links on your page:

<!-- Default (index and follow all links) -->
<meta name="robots" content="index, follow" />

<!-- Don't index this page -->
<meta name="robots" content="noindex" />

<!-- Don't follow links on this page -->
<meta name="robots" content="nofollow" />

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

<!-- Don't show a cached version -->
<meta name="robots" content="noarchive" />

<!-- Don't show a snippet in search results -->
<meta name="robots" content="nosnippet" />

Use noindex for:

Admin pages
Thank you / confirmation pages
Search results pages
Paginated archives (use rel="next" and rel="prev" instead)
Staging/development environments

Structured Data (JSON-LD)

Structured data helps search engines understand your content and can enable rich results (star ratings, FAQs, how-tos, etc.).

Article Schema

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "description": "Article description",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "image": "https://example.com/image.jpg"
}

FAQ Schema

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is JSON?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON is a lightweight data interchange format..."
      }
    }
  ]
}

Generate structured data with our Schema Markup Generator tool.

Meta Tags Checklist

Use this checklist for every page on your site:

Unique, descriptive title (50-60 characters)
Compelling meta description (150-160 characters)
Canonical URL set
OG title, description, image, and URL
Twitter card type and image
Robots tag (if non-default)
Structured data (JSON-LD) where applicable
Favicon in all sizes — use our Favicon Generator

Generate all your meta tags in one place with our Meta Tag Generator, preview your Google listing with our Google SERP Preview, and check your existing tags with our SEO Meta Tag Analyzer.

meta tagsseotitle tagmeta descriptionopen graphtwitter cardcanonical urlstructured dataschema markup

All articles

Practice with free tools

200+ free developer tools that run in your browser.

Browse all tools →