Open Graph and SEO Meta Tags Explained

When you share a link on Facebook, WhatsApp, or LinkedIn, the preview card (image, title, description) is generated from Open Graph meta tags, not the actual page's visible content.

<head>
  <title>HTML Fundamentals — Free Beginner Notebook</title>

  <!-- Open Graph (Facebook, LinkedIn, WhatsApp, etc.) -->
  <meta property="og:title" content="HTML Fundamentals">
  <meta property="og:description" content="Learn HTML from scratch with hands-on examples.">
  <meta property="og:image" content="https://example.com/cover.png">
  <meta property="og:url" content="https://example.com/notebooks/html-fundamentals">
  <meta property="og:type" content="article">

  <!-- Twitter/X card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML Fundamentals">
  <meta name="twitter:description" content="Learn HTML from scratch with hands-on examples.">
</head>

Without these tags, most platforms fall back to guessing — often grabbing a random image or the wrong text — which makes shared links look broken or unappealing.

Basic SEO checklist for any page:

A unique, descriptive <title> per page (ideally under ~60 characters so it doesn't get cut off in search results).
A unique meta description per page — don't reuse the same one across every page of a site.
Exactly one <h1> that matches the page's actual topic.
Descriptive alt text on meaningful images (this also helps image search).
A canonical URL tag (<link rel="canonical" href="...">) if the same content is reachable at multiple URLs, to avoid duplicate-content confusion.

SEO meta tags don't guarantee ranking — search engines weigh many other factors like content quality and backlinks — but missing or wrong metadata actively hurts how a page is represented and shared, regardless of how good the content is.