Meta Tags Explained: The Complete Guide to Open Graph, Twitter Cards, and SEO Tags
Meta tags control how your pages appear in search results and social media shares. This guide covers every important meta tag with copy-paste examples and a free generator.
Meta Tags Explained: The Complete Guide to Open Graph, Twitter Cards, and SEO Tags
Meta tags are invisible to visitors but visible to search engines and social platforms. They control how your pages appear in Google results, how they look when shared on Twitter, and whether Facebook shows a preview image.
Get them right, and you get more clicks. Get them wrong, and your links look broken. This guide covers every important meta tag you need — from essential SEO tags to Open Graph, Twitter Cards, structured data, and performance hints — with copy-paste examples for each.
The Three Types of Meta Tags
| Type | Controls | Used By |
|---|---|---|
| SEO meta tags | Search engine results | Google, Bing |
| Open Graph tags | Social media previews | Facebook, LinkedIn, Slack |
| Twitter Card tags | Twitter previews | Twitter/X |
Essential SEO Meta Tags
These go in your <head> section:
<!-- Page title — the most important SEO tag -->
<title>Your Page Title | Brand Name</title>
<!-- Description — shown in search results -->
<meta name="description" content="A compelling 150-160 character description that makes people want to click." />
<!-- Canonical URL — prevents duplicate content issues -->
<link rel="canonical" href="https://www.example.com/page/" />
<!-- Viewport — required for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Robots — control crawling -->
<meta name="robots" content="index, follow" />
Title Tag Best Practices
- Length: 50-60 characters
- Format: Primary Keyword - Secondary Keyword | Brand
- Include your main keyword near the beginning
<!-- Good -->
<title>Mortgage Calculator: Estimate Monthly Payments | JotTool</title>
<!-- Bad — too generic -->
<title>Calculator</title>
<!-- Bad — too long (gets truncated) -->
<title>Free Online Mortgage Calculator With Extra Features And More Stuff That Nobody Will Ever Read</title>
Description Tag Best Practices
- Length: 150-160 characters (anything longer gets cut off)
- Include a call to action
- Use your target keyword naturally
<!-- Good -->
<meta name="description" content="Calculate your monthly mortgage payment instantly. Understand principal, interest, taxes, and insurance with our free mortgage calculator." />
<!-- Bad — too short, no value -->
<meta name="description" content="A mortgage calculator." />
Open Graph Tags
Open Graph (OG) controls how your page looks when shared on Facebook, LinkedIn, Slack, Discord, and many other platforms.
<!-- Required OG tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description" />
<meta property="og:url" content="https://www.example.com/page/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.example.com/images/preview.jpg" />
<!-- Recommended additions -->
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />
OG Image Specifications
| Platform | Recommended Size | Aspect Ratio |
|---|---|---|
| 1200 × 630 px | 1.91:1 | |
| 1200 × 627 px | 1.91:1 | |
| Twitter (summary) | 1200 × 628 px | 1.91:1 |
| Twitter (large) | 1200 × 600 px | 2:1 |
Universal safe size: 1200 × 630 px
OG Type Values
<!-- Standard pages -->
<meta property="og:type" content="website" />
<!-- Blog posts, articles -->
<meta property="og:type" content="article" />
<!-- Video pages -->
<meta property="og:type" content="video.other" />
Twitter Card Tags
Twitter Cards control how your links appear when shared on Twitter/X.
<!-- Card type: summary, summary_large_image, app, player -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description" />
<meta name="twitter:image" content="https://www.example.com/images/preview.jpg" />
<!-- Optional: attribute the content creator -->
<meta name="twitter:creator" content="@yourhandle" />
<meta name="twitter:site" content="@yoursite" />
Twitter Card Types
| Type | Preview | Best For |
|---|---|---|
summary |
Small square image + text | Product pages, tools |
summary_large_image |
Large banner image | Blog posts, articles |
app |
App install prompt | Mobile apps |
player |
Embedded video player | Video content |
The Complete Meta Tag Template
Here's everything you need for a typical page:
<head>
<!-- Essential SEO -->
<title>Page Title | Brand</title>
<meta name="description" content="150-160 char description" />
<link rel="canonical" href="https://www.example.com/page/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Open Graph -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="150-160 char description" />
<meta property="og:url" content="https://www.example.com/page/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.example.com/og-image.jpg" />
<meta property="og:site_name" content="Brand" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="150-160 char description" />
<meta name="twitter:image" content="https://www.example.com/og-image.jpg" />
</head>
Next.js Implementation
In Next.js App Router, use the Metadata API:
// app/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Page Title | Brand',
description: '150-160 char description',
alternates: {
canonical: 'https://www.example.com/page/',
},
openGraph: {
title: 'Page Title',
description: '150-160 char description',
url: 'https://www.example.com/page/',
type: 'website',
images: [
{
url: '/og-image.jpg',
width: 1200,
height: 630,
alt: 'Page preview',
},
],
siteName: 'Brand',
},
twitter: {
card: 'summary_large_image',
title: 'Page Title',
description: '150-160 char description',
images: ['/og-image.jpg'],
},
};
Structured Data (JSON-LD)
Beyond traditional meta tags, structured data helps search engines understand your content and display rich results:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebPage",
"name": "Page Title",
"description": "Page description",
"url": "https://www.example.com/page/",
"publisher": {
"@type": "Organization",
"name": "Brand",
"logo": {
"@type": "ImageObject",
"url": "https://www.example.com/logo.png"
}
}
}
</script>
Common schema types:
| Type | Use Case | Rich Result |
|---|---|---|
Article |
Blog posts | Headline, image, date in search |
Product |
E-commerce | Price, rating, availability |
FAQPage |
FAQ sections | Expandable questions in search |
HowTo |
Tutorials | Step-by-step in search |
LocalBusiness |
Business pages | Address, hours, phone |
BreadcrumbList |
Navigation | Breadcrumb trail in search |
Performance Meta Tags
Speed up your site with resource hints:
<!-- Preconnect to important origins -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://www.google-analytics.com" />
<!-- DNS prefetch for third-party origins -->
<link rel="dns-prefetch" href="https://cdn.example.com" />
<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/images/hero.jpg" as="image" />
<!-- Prefetch next page (instant navigation) -->
<link rel="prefetch" href="/about/" />
Hreflang Tags for International Sites
If your site serves multiple languages or regions:
<!-- English version -->
<link rel="alternate" hreflang="en" href="https://www.example.com/page/" />
<!-- Spanish version -->
<link rel="alternate" hreflang="es" href="https://www.example.com/es/page/" />
<!-- Default (fallback) -->
<link rel="alternate" hreflang="x-default" href="https://www.example.com/page/" />
Hreflang tags prevent duplicate content issues across language versions and ensure users see the right language in search results.
Testing Your Meta Tags
After adding meta tags, verify them:
- Facebook: Sharing Debugger
- Twitter: Card Validator
- LinkedIn: Post Inspector
- General: Meta Tag Inspector
Common Mistakes
Missing OG Image
Without an OG image, your shared link shows no preview — dramatically reducing clicks.
Wrong Image Size
Images that are too small get stretched or cropped. Always use at least 1200×630px.
Duplicate Title/Description
Every page should have unique meta tags. Duplicate tags across pages hurt SEO.
Forgetting Dynamic Pages
Blog posts and tool pages need dynamic meta tags that reflect their specific content.
Try It Yourself
Generate perfect meta tags for any page with our Meta Tag Generator — just fill in the fields and get copy-paste ready HTML for SEO, Open Graph, and Twitter Cards.
Summary
- Title + description are the minimum for SEO
- Open Graph controls social previews on Facebook, LinkedIn, Slack
- Twitter Cards control Twitter/X previews
- OG image should be 1200×630px — the single most impactful tag for social shares
- Structured data enables rich results in Google
- Performance hints (preconnect, preload) speed up your site
- Hreflang prevents duplicate content for multilingual sites
- Test before deploying — use platform-specific debuggers
- Automate with Next.js Metadata API — no manual
<meta>tags needed
Meta tags take 5 minutes to set up but impact every share and search result forever.
Generate perfect meta tags for any page with our Meta Tag Generator — just fill in the fields and get copy-paste ready HTML for SEO, Open Graph, and Twitter Cards.
Try It Yourself
Put what you've learned into practice with our free online tools.