Meta Tags & SEO

Difficulty: Beginner

Question

What are meta tags? How do they affect SEO and social sharing?

Answer

Meta tags provide metadata about the HTML document. They don't display on the page but are read by browsers, search engines, and social platforms.

Key meta tags: 1. charset - character encoding (always UTF-8) 2. viewport - mobile rendering control 3. description - search result snippet (150-160 chars) 4. robots - control indexing/following 5. Open Graph (og:) - social media previews 6. Twitter Card - Twitter-specific previews

SEO best practices: unique title/description per page, proper heading hierarchy, semantic HTML, fast loading.

Code examples

Essential Meta Tags

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8" />

  <!-- Viewport for mobile -->
  <meta name="viewport"
        content="width=device-width, initial-scale=1" />

  <!-- SEO -->
  <title>Best Coding Bootcamps 2025 | LearnCode</title>
  <meta name="description"
        content="Compare top coding bootcamps.
        Find the best program for your career goals." />

  <!-- Robots -->
  <meta name="robots" content="index, follow" />
  <!-- noindex: don't show in search results -->
  <!-- nofollow: don't follow links on this page -->

  <!-- Canonical URL (avoid duplicate content) -->
  <link rel="canonical"
        href="https://example.com/bootcamps" />

  <!-- Language alternatives -->
  <link rel="alternate" hreflang="es"
        href="https://example.com/es/bootcamps" />
</head>

Every page needs charset, viewport, title, and description. Canonical URLs prevent duplicate content penalties when the same content has multiple URLs.

Open Graph & Twitter Cards

<!-- Open Graph (Facebook, LinkedIn, etc.) -->
<meta property="og:title"
      content="Best Coding Bootcamps 2025" />
<meta property="og:description"
      content="Compare top coding bootcamps." />
<meta property="og:image"
      content="https://example.com/og-image.jpg" />
<meta property="og:url"
      content="https://example.com/bootcamps" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="LearnCode" />

<!-- Twitter Card -->
<meta name="twitter:card"
      content="summary_large_image" />
<meta name="twitter:title"
      content="Best Coding Bootcamps 2025" />
<meta name="twitter:description"
      content="Compare top coding bootcamps." />
<meta name="twitter:image"
      content="https://example.com/twitter-card.jpg" />

<!-- OG image should be 1200x630px
     Twitter image should be 1200x600px -->

Open Graph controls how your page appears when shared on social media. Without these tags, platforms guess from page content, often with poor results.

Structured Data (JSON-LD)

<!-- JSON-LD structured data for rich snippets -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Best Coding Bootcamps 2025",
  "author": {
    "@type": "Person",
    "name": "Jane Smith"
  },
  "datePublished": "2025-01-15",
  "image": "https://example.com/article-image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "LearnCode",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

<!-- Other types: Product, FAQ, Event,
     BreadcrumbList, JobPosting, etc. -->

Structured data helps Google show rich snippets (stars, prices, FAQs) in search results. JSON-LD is the recommended format by Google.

Key points

Title should be 50-60 characters, description 150-160 characters
Each page should have a unique title and description
Test Open Graph tags with Facebook Sharing Debugger or Twitter Card Validator

Concepts covered

Meta Tags, SEO, Open Graph, Structured Data, Social Sharing