How to optimize meta tags for SEO in HTML

· Category: HTML & CSS

Short answer

SEO-friendly meta tags include a concise <title>, a compelling meta name="description", a viewport tag for mobile, and Open Graph tags for social sharing.

Steps

  1. Place a unique <title> inside <head>; limit it to roughly 50-60 characters.
  2. Add <meta name="description" content="..."> with a 150-160 character summary.
  3. Include <meta name="viewport" content="width=device-width, initial-scale=1"> for responsive behavior.
  4. Add Open Graph tags (og:title, og:description, og:image) to control social previews.
  5. Use canonical URLs and structured data (JSON-LD) when appropriate.

Example

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>How to Bake Sourdough - My Bakery</title>
  <meta name="description" content="Learn the art of sourdough baking with our step-by-step guide. Perfect crust, airy crumb, and deep flavor." />
  <meta property="og:title" content="How to Bake Sourdough" />
  <meta property="og:image" content="https://example.com/bread.jpg" />
</head>

Tips

  • Avoid duplicate titles and descriptions across pages.
  • Keep descriptions actionable and relevant to the page content.
  • Verify social previews with Facebook Sharing Debugger and Twitter Card Validator.