</>CodeCraft Hub
🧱 HTML Basics

HTML Meta Tags for SEO: The Only List You'll Actually Need

By The CodeCraft Team··8 min read
HTML <head> with annotated meta tags

Meta tags live inside the <head> and quietly decide how search engines crawl your page and how social networks render its preview card. Skip them and you're leaving traffic on the table.

The non-negotiables

<title>Page Title — Under 60 Characters</title>
<meta name="description" content="A 150-160 character summary that earns the click.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">

Open Graph for social previews

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Short, compelling summary.">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">

Twitter / X cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Short summary.">
<meta name="twitter:image" content="https://example.com/preview.jpg">

Robots and canonical

<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">

Tags you can safely skip

  • <meta name="keywords"> — ignored by Google for years
  • Lengthy <meta http-equiv> tags — use real HTTP headers instead
  • Old IE-specific meta tags

Quick checklist

  1. Unique title and description per page
  2. Open Graph image at 1200×630
  3. Canonical URL set
  4. Viewport tag for mobile
  5. Test with Google's Rich Results Test

Frequently asked questions

What is the ideal meta description length?

Keep it between 150 and 160 characters so Google doesn't truncate it on desktop.

Do meta keywords still matter?

Not for Google. They were abused so heavily that most search engines stopped using them over a decade ago.

How big should an og:image be?

1200×630 pixels is the safe default for Facebook, LinkedIn, and Twitter large card.

Keep reading

External references

Enjoyed this article?

Share it with a fellow developer or explore more tutorials in our blog.

More articles

Related articles