Meta Tag Template Library

Copy-paste meta tag templates for Next.js, WordPress, Shopify, and HTML. Includes character limits and best practices.

Templates

Platforms

100%

Free

Platform

Homepage Meta Tags

Complete homepage metadata including OG tags and Twitter Cards

Next.jsPage Types

Title: max 60 chars

Description: max 160 chars

OG Title: max 60 chars

OG Description: max 200 chars

export const metadata: Metadata = {
  title: 'Your Company Name — What You Do Best',
  description: 'Brief description of your product or service. Include your main value proposition and target keywords. 150-160 characters.',
  keywords: ['primary keyword', 'secondary keyword', 'long tail keyword'],
  openGraph: {
    title: 'Your Company Name — What You Do Best',
    description: 'Brief description for social sharing',
    url: 'https://yoursite.com',
    type: 'website',
    images: [{
      url: 'https://yoursite.com/og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Your company description'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Company Name — What You Do Best',
    description: 'Brief description for Twitter',
    images: ['https://yoursite.com/twitter-image.jpg']
  },
  alternates: {
    canonical: 'https://yoursite.com'
  }
};

Blog Post Meta Tags

Article metadata with Article schema markup

Next.jsPage Types

Title: max 60 chars

Description: max 160 chars

export const metadata: Metadata = {
  title: 'Article Title — Your Brand Name',
  description: 'Compelling summary of your article. Include primary keyword and what readers will learn.',
  keywords: ['article topic', 'related keyword', 'niche keyword'],
  authors: [{ name: 'Author Name' }],
  openGraph: {
    title: 'Article Title',
    description: 'Brief article summary for social sharing',
    url: 'https://yoursite.com/blog/article-slug',
    type: 'article',
    publishedTime: '2026-02-12T00:00:00.000Z',
    authors: ['Author Name'],
    images: [{
      url: 'https://yoursite.com/blog/article-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Article image description'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Article Title',
    description: 'Brief article summary',
    images: ['https://yoursite.com/blog/article-image.jpg']
  },
  alternates: {
    canonical: 'https://yoursite.com/blog/article-slug'
  }
};

Product Page Meta Tags

E-commerce product metadata with pricing and availability

Next.jsE-commerce

Title: max 60 chars

Description: max 160 chars

export const metadata: Metadata = {
  title: 'Product Name — Category | Your Store',
  description: 'Product description including key features, benefits, and specifications. Mention price and availability.',
  keywords: ['product name', 'product category', 'brand name'],
  openGraph: {
    title: 'Product Name — Category',
    description: 'Short product pitch for social sharing',
    url: 'https://yourstore.com/products/product-slug',
    type: 'product',
    images: [{
      url: 'https://yourstore.com/products/product-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Product name - main image'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Product Name — $99',
    description: 'Short product description',
    images: ['https://yourstore.com/products/product-image.jpg']
  },
  alternates: {
    canonical: 'https://yourstore.com/products/product-slug'
  }
};

Basic HTML Meta Tags

Essential meta tags for any HTML page

HTMLPage Types

Title: max 60 chars

Description: max 160 chars

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Primary Meta Tags -->
  <title>Page Title — Your Brand Name</title>
  <meta name="title" content="Page Title — Your Brand Name">
  <meta name="description" content="Brief page description. 150-160 characters for optimal display in search results.">
  <meta name="keywords" content="primary keyword, secondary keyword, long tail keyword">
  <meta name="author" content="Your Name or Company">
  <link rel="canonical" href="https://yoursite.com/page-url">

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://yoursite.com/page-url">
  <meta property="og:title" content="Page Title — Your Brand">
  <meta property="og:description" content="Brief description for social sharing">
  <meta property="og:image" content="https://yoursite.com/og-image.jpg">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://yoursite.com/page-url">
  <meta property="twitter:title" content="Page Title — Your Brand">
  <meta property="twitter:description" content="Brief description for Twitter">
  <meta property="twitter:image" content="https://yoursite.com/twitter-image.jpg">
</head>
<body>
  <!-- Your content -->
</body>
</html>

Local Business Meta Tags

Meta tags for local businesses with geographic targeting

HTMLIndustry-Specific

Title: max 60 chars

Description: max 160 chars

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Primary Meta Tags -->
  <title>Business Name — Service in City, State | Your Brand</title>
  <meta name="description" content="Professional service in City, State. Locally owned and operated since 2010. Call (123) 456-7890 for a free quote.">
  <meta name="keywords" content="service type, city state, local business, near me">

  <!-- Geographic Meta Tags -->
  <meta name="geo.region" content="US-CA">
  <meta name="geo.placename" content="San Francisco">
  <meta name="geo.position" content="37.774929;-122.419418">
  <meta name="ICBM" content="37.774929, -122.419418">

  <!-- Open Graph -->
  <meta property="og:type" content="business.business">
  <meta property="og:title" content="Business Name — Service in City">
  <meta property="og:description" content="Locally owned service provider in City, State">
  <meta property="og:url" content="https://yourbusiness.com">
  <meta property="og:image" content="https://yourbusiness.com/storefront.jpg">
  <meta property="business:contact_data:street_address" content="123 Main Street">
  <meta property="business:contact_data:locality" content="San Francisco">
  <meta property="business:contact_data:region" content="CA">
  <meta property="business:contact_data:postal_code" content="94102">
  <meta property="business:contact_data:country_name" content="USA">

  <link rel="canonical" href="https://yourbusiness.com">
</head>

WordPress (Yoast SEO)

How to configure Yoast SEO meta tags

WordPressPage Types

SEO Title: max 60 chars

Meta Description: max 160 chars

Facebook Description: max 200 chars

// In WordPress post/page editor, configure these Yoast SEO fields:

SEO Title:
Page Title — Your Brand Name (50-60 characters)

Meta Description:
Brief description of your page content. Include primary keyword and value proposition. Aim for 150-160 characters for optimal display.

Focus Keyphrase:
primary keyword phrase

Canonical URL:
https://yoursite.com/page-slug (auto-generated, usually don't change)

// For Social (Facebook/Twitter) tab in Yoast:

Facebook Title:
Page Title — Your Brand Name

Facebook Description:
Brief description for social sharing (up to 200 characters)

Facebook Image:
Upload 1200x630px image

Twitter Title:
Page Title — Your Brand Name

Twitter Description:
Brief description for Twitter (up to 200 characters)

Twitter Image:
Upload 1200x630px image (or 1200x600px for summary_large_image)

// NOTE: Yoast automatically generates proper meta tag HTML.
// No code editing required if using Yoast SEO plugin.

Shopify Product Page

Edit meta tags in Shopify admin for product pages

ShopifyE-commerce

Page Title: max 70 chars

Meta Description: max 160 chars

// In Shopify Admin: Products → [Select Product] → Search engine listing

Page Title:
Product Name — Category | Your Store (max 70 characters)

Meta Description:
Product description with key features and benefits. Include price, availability, and shipping info. 150-160 characters.

URL Handle:
product-name-keywords (e.g., organic-cotton-t-shirt-blue)

// For advanced meta tags, edit theme.liquid or product.liquid:

<head>
  <!-- Shopify auto-generates these, but you can override in theme -->
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title }} — {{ shop.name }}">
  <meta property="og:description" content="{{ product.description | strip_html | truncate: 200 }}">
  <meta property="og:image" content="{{ product.featured_image | img_url: '1200x630', crop: 'center' }}">
  <meta property="og:price:amount" content="{{ product.price | money_without_currency }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
  <meta property="og:availability" content="{% if product.available %}instock{% else %}out of stock{% endif %}">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="{{ product.title }}">
  <meta name="twitter:description" content="{{ product.description | strip_html | truncate: 160 }}">
  <meta name="twitter:image" content="{{ product.featured_image | img_url: '1200x630' }}">
</head>

SaaS Landing Page

Meta tags optimized for SaaS product landing pages

Next.jsIndustry-Specific

Title: max 60 chars

Description: max 160 chars

export const metadata: Metadata = {
  title: 'Product Name — Solution for Target Audience | Brand',
  description: 'Product name helps you [solve specific problem]. Used by 10,000+ companies. Start free trial. No credit card required.',
  keywords: ['saas product type', 'problem solution', 'target industry'],
  openGraph: {
    title: 'Product Name — Solution for Target Audience',
    description: 'Solve [problem] in minutes. Join 10,000+ happy customers.',
    url: 'https://yourproduct.com',
    type: 'website',
    images: [{
      url: 'https://yourproduct.com/og-dashboard.jpg', // Screenshot of product
      width: 1200,
      height: 630,
      alt: 'Product Name dashboard screenshot'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Product Name — Solution for Target Audience',
    description: 'Solve [problem] in minutes. Free trial →',
    images: ['https://yourproduct.com/twitter-dashboard.jpg'],
    creator: '@yourtwitterhandle'
  },
  alternates: {
    canonical: 'https://yourproduct.com'
  },
  other: {
    'application-name': 'Product Name',
    'apple-mobile-web-app-title': 'Product Name'
  }
};

Need to Validate Your Meta Tags?

After implementing these templates, use our free Meta Tags Comparison tool to verify they're working correctly and compare against competitors.

Meta Tag Best Practices

Title Tags

• Keep under 60 characters (512px width)
• Include primary keyword near the beginning
• Use brand name at the end (e.g., "Page Title | Brand")
• Make every title unique across your site
• Write for users first, search engines second

Meta Descriptions

• Aim for 150-160 characters for desktop
• Include a call-to-action
• Match user search intent
• Use active voice and descriptive language
• Don't duplicate descriptions across pages

Open Graph Images

• Recommended size: 1200×630px
• Keep important content in the center (safe zone)
• Use high-quality images (under 1MB)
• Include text overlay for context
• Test with Facebook Debugger before publishing

Common Mistakes

• ❌ Keyword stuffing in title tags
• ❌ Using same meta description site-wide
• ❌ Forgetting to set canonical URLs
• ❌ Missing OG image (shows broken link on social)
• ❌ Not testing on mobile devices

AI Overview Tracker

Bulk URL Checker

Image Compressor

H-Tags

Meta Tags

Social Cards

Redirects

Internal Links

Schema

Page Compare

Keywords

RankSpeed

Meta Tag Template Library

Homepage Meta Tags

Blog Post Meta Tags

Product Page Meta Tags

Basic HTML Meta Tags

Local Business Meta Tags

WordPress (Yoast SEO)

Shopify Product Page

SaaS Landing Page

Need to Validate Your Meta Tags?

Meta Tag Best Practices

Title Tags

Meta Descriptions

Open Graph Images

Common Mistakes