jsschools
Head Meta Tags

`<title>`, `<meta>`, OG, Favicon — Everything in `<head>`

Head Meta Tags

The `<head>` controls title, description, social previews, the favicon, and more. A good baseline goes a long way.

4 min read Level 1/5 #html#head#meta
What you'll learn
  • Set title and description
  • Add Open Graph tags for social previews
  • Wire up favicons

The <head> is where you tell the browser, search engines, and social platforms about the page.

A Sensible Baseline

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>Page Title — Site Name</title>
  <meta name="description" content="A one-sentence summary for search engines." />

  <link rel="canonical" href="https://example.com/this-page" />
  <link rel="icon" href="/favicon.svg" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

  <!-- Open Graph (Facebook, LinkedIn, etc.) -->
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="A one-sentence summary." />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:url" content="https://example.com/this-page" />
  <meta property="og:type" content="article" />

  <!-- Twitter / X -->
  <meta name="twitter:card" content="summary_large_image" />

  <link rel="stylesheet" href="/styles.css" />
</head>

Title — Most Important

The <title> shows in:

  • Browser tab
  • Search results (Google’s blue link text)
  • Social shares (when OG is missing)
  • Browser history

Aim for ~50–60 characters. Put the most unique part first.

Description

Doesn’t directly affect ranking, but search engines often display it as the snippet under the link. ~150 characters.

Open Graph

When someone shares your URL on a social platform, OG tags control:

  • The title text in the card
  • The description
  • The preview image (1200×630 is the standard)

og:image is the highest-impact tag for social engagement.

Favicons

<link rel="icon" href="/favicon.svg" /> — modern browsers prefer SVG. Fallback to .ico or .png for older clients.

apple-touch-icon is for iOS home-screen bookmarks.

Theme Color

<meta name="theme-color" content="#6360ff" />

Color the browser chrome on mobile (Chrome on Android, iOS PWA).

Multiple og:* Per Page

Set OG dynamically per page — the blog index has different OG than each post. Frameworks (Astro, Next, etc.) make this a per-page data thing.

End of Chapter

That wraps HTML. The rest of the course is CSS — selectors, the box model, layout, styling, modern features, and accessibility.

CSS Intro →