DevTools

Meta Tags for SEO: Complete Guide

Meta tags provide information about your webpage to search engines and social media platforms. Proper meta tags improve SEO, click-through rates, and social sharing appearance.

What are Meta Tags?

Meta tags are HTML elements in the <head> section that describe page content:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Learn web development">
  <meta property="og:title" content="My Website">
</head>

Essential Meta Tags

Title Tag

<title>Your Page Title | Brand Name</title>
  • 50-60 characters recommended
  • Include primary keyword
  • Unique for each page

Meta Description

<meta name="description" content="Brief description of your page content. Keep it under 160 characters for best results.">
  • 150-160 characters
  • Include relevant keywords naturally
  • Write compelling, actionable text

Viewport

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

Essential for responsive design on mobile devices.

Charset

<meta charset="UTF-8">

Ensures proper character encoding.

Using Our Meta Tag Generator

Our Meta Tag Generator creates all essential tags:

  1. Fill in your page details in the form
  2. Add Open Graph tags for social sharing
  3. Configure Twitter Cards for Twitter
  4. Copy the generated HTML to your page

Open Graph Tags

Open Graph (og:) tags control how your content appears when shared on Facebook, LinkedIn, and other platforms:

<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">

Image Guidelines

  • Recommended size: 1200x630 pixels
  • Minimum: 200x200 pixels
  • Use absolute URLs
  • Image should be relevant and high quality

Twitter Cards

Twitter Cards make your tweets more engaging:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/image.jpg">

Card Types

  • summary: Title, description, thumbnail
  • summary_large_image: Title, description, large image

Robots Meta Tag

Control search engine behavior:

<!-- Allow indexing and following links -->
<meta name="robots" content="index, follow">

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

<!-- Index but don't follow links -->
<meta name="robots" content="index, nofollow">

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

Canonical URL

Prevent duplicate content issues:

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

Always use absolute URLs for canonical tags.

Code Examples

Complete Head Section

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title | Brand Name</title>
  <meta name="description" content="Your page description here.">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <meta name="author" content="Author Name">
  <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">
  <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 -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@username">
  <meta name="twitter:title" content="Page Title">
  <meta name="twitter:description" content="Description">
  <meta name="twitter:image" content="https://example.com/image.jpg">
</head>

Best Practices

Title Best Practices

  1. Put important keywords first
  2. Include brand name at the end
  3. Use pipes (|) or dashes (-) as separators
  4. Make each title unique

Description Best Practices

  1. Include primary keyword
  2. Write for humans, not just search engines
  3. Include a call to action when appropriate
  4. Match page content

Image Best Practices

  1. Use high-quality images
  2. Test how they appear on social platforms
  3. Keep images under 5MB
  4. Use 1.91:1 aspect ratio for og:image

Testing Your Meta Tags

Facebook Sharing Debugger

https://developers.facebook.com/tools/debug/

Twitter Card Validator

https://cards-dev.twitter.com/validator

LinkedIn Post Inspector

https://www.linkedin.com/post-inspector/

Google Rich Results Test

https://search.google.com/test/rich-results

Common Mistakes

1. Duplicate Titles/Descriptions

Each page should have unique meta tags.

2. Too Long or Too Short

  • Title: 50-60 characters
  • Description: 150-160 characters

3. Missing Open Graph Images

Always include og:image for better social sharing.

4. Incorrect Canonical URLs

Point to the preferred URL, not a redirect.

Conclusion

Meta tags are essential for SEO and social media sharing. Use our Meta Tag Generator to create complete, optimized meta tags for your website.

Well-crafted meta tags improve your visibility in search results and make your content more attractive when shared on social media.