HTML Head and Meta Tags: SEO, Open Graph, Favicons, Canonical

What you will learn

You already know two <meta> tags from your very first lesson: charset and viewport. The <head> of a real, professional page carries far more than that — tags that decide what shows up when your page is shared on WhatsApp or Twitter, what appears in Google’s search results, which little icon shows in the browser tab, and which URL search engines should treat as the “real” one. None of this is visible on the page itself — it all lives invisibly in <head>, doing its job behind the scenes. This lesson covers exactly that.

A quick recap: what’s already in your <head>

By now, every page you write should already start like this:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page Title</title>
</head>

• charset="UTF-8" — tells the browser how to decode the page’s text (so symbols and accented letters display correctly).
• viewport — tells mobile browsers not to zoom the page out to fit an imaginary “desktop width.”
• <title> — the page’s title, shown in the browser tab and as the main clickable headline in search results.

This lesson builds on top of these three — it does not replace them.

<title>, done properly

You’ve been writing <title> since your first lesson, but it’s worth revisiting with real standards in mind, since it’s one of the highest-impact single lines in your whole page:

<title>10 Beginner HTML Mistakes to Avoid | MyCodeNest</title>

• Keep it under roughly 60 characters — search engines truncate longer titles with “…”.
• Make every page’s title unique across your whole site — a title repeated on ten different pages tells search engines (and visitors with ten tabs open) nothing useful.
• Put the specific, most important words first, since that’s what gets read first, both by humans scanning a list of tabs and by search engines weighing relevance.
• A trailing | Site Name is a common, reasonable convention — but the specific page topic should come first, not the site name.

meta description: the search-result snippet

<meta name="description" content="Avoid these 10 common HTML mistakes beginners make, from missing alt text to broken nesting, with clear fixes for each.">

This is the short paragraph search engines often show underneath your page’s title in results — and, separately, it’s sometimes what a chat app shows as a caption when someone pastes your link.

• Aim for roughly 150–160 characters — longer gets cut off with “…”.
• Write it like real ad copy: summarise what the page actually delivers, in a way that makes someone want to click. Don’t just repeat the title.
• Every page should have its own description — a description copy-pasted across your whole site defeats the purpose entirely.
• Search engines don’t strictly guarantee they’ll show your description (they sometimes generate their own from the page content instead), but writing a good one is still worth doing — it’s the best version you can offer, and it’s used more often than not.

Open Graph tags: how your page looks when shared

Paste a link into WhatsApp, Slack, Facebook or LinkedIn, and a little preview card appears — a title, a short blurb, and an image. That card is built from Open Graph tags, a small set of <meta property="og:..."> tags almost every social platform reads:

<meta property="og:title" content="10 Beginner HTML Mistakes to Avoid">
<meta property="og:description" content="Avoid these 10 common HTML mistakes beginners make.">
<meta property="og:image" content="https://mycodenest.dev/images/html-mistakes-cover.jpg">
<meta property="og:type" content="article">
<meta property="og:url" content="https://mycodenest.dev/blog/html/10-beginner-mistakes">

Tag	Purpose
og:title	The headline shown in the preview card (can match or slightly differ from <title>)
og:description	The blurb shown under the title
og:image	The image shown in the card. Must be a full, absolute URL (not a relative path) — social platforms fetch it directly, without loading your page first
og:type	What kind of content this is: website, article, video.other, and more
og:url	The canonical URL this content should be credited to, so shares of slightly different link variations all point to the same place

Real use case: without these tags, sharing your blog post on WhatsApp shows a bare, unhelpful link with no image and a generic (or blank) description — noticeably less likely to be clicked. Adding four or five lines of Open Graph tags turns that into a proper card with a headline, summary and picture, which meaningfully increases how often people actually open the link.

Twitter Card (a small addition)

<meta name="twitter:card" content="summary_large_image">

Twitter/X reads Open Graph tags for most of the card content but needs this one extra tag to know it should show a large image preview rather than a small thumbnail. It’s a one-line addition once you already have Open Graph set up.

Favicons: the little icon in the tab

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

The favicon is the small icon shown in a browser tab, in bookmarks, and (via apple-touch-icon) as the app icon when someone adds your site to their phone’s home screen.

• A simple .ico or .png favicon at the root of your site (/favicon.ico) is often picked up automatically by browsers even with no <link> tag at all — but explicitly declaring one, at the right size, gives you control and avoids inconsistent results across browsers.
• apple-touch-icon should be a larger square image (commonly 180×180px), used specifically when the site is saved to an iOS home screen.
• You’ll see references to a manifest.json file for more advanced icon and “installable web app” setups — that’s beyond this lesson, but good to recognise if you see it in generated code later.

canonical: telling search engines which URL is the “real” one

<link rel="canonical" href="https://mycodenest.dev/blog/html/10-beginner-mistakes">

Sometimes the same content is reachable at more than one URL — with and without a trailing slash, with a tracking parameter (?ref=twitter), or duplicated across http:// and https:// during a migration. Search engines see these as technically different pages with identical content, which can dilute how they rank any single one of them.

canonical tells search engines: “whatever URL you found this page at, treat this one as the real, authoritative version.” Every page should declare its own canonical URL, pointing at itself under normal circumstances — this becomes especially important once your site has any kind of URL parameters, pagination, or duplicate content across categories.

robots: controlling indexing directly

<meta name="robots" content="noindex, nofollow">

By default, search engines are free to index a page and follow its links. Occasionally you want to say otherwise — for a staging/test page, an internal admin page, or a thank-you page after a form submission that shouldn’t show up in search results:

Value	Meaning
index	(Default) Allow this page to appear in search results
noindex	Don’t show this page in search results
follow	(Default) Allow search engines to follow this page’s links
nofollow	Don’t pass ranking credit through this page’s links

You’ll use noindex far more rarely than the other tags in this lesson — most real content pages should stay indexable — but it’s an important tool to have for the specific pages that shouldn’t be publicly discoverable.

theme-color: branding the browser UI on mobile

<meta name="theme-color" content="#ff6347">

On mobile browsers, this tints the browser’s own address bar / status bar area to match your site’s brand colour — a small, purely cosmetic touch, but a genuinely nice one that makes a site feel more polished and “app-like.”

A complete, real-world <head>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10 Beginner HTML Mistakes to Avoid | MyCodeNest</title>
  <meta name="description" content="Avoid these 10 common HTML mistakes beginners make, from missing alt text to broken nesting, with clear fixes for each.">
  <link rel="canonical" href="https://mycodenest.dev/blog/html/10-beginner-mistakes">

  <meta property="og:title" content="10 Beginner HTML Mistakes to Avoid">
  <meta property="og:description" content="Avoid these 10 common HTML mistakes beginners make.">
  <meta property="og:image" content="https://mycodenest.dev/images/html-mistakes-cover.jpg">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://mycodenest.dev/blog/html/10-beginner-mistakes">
  <meta name="twitter:card" content="summary_large_image">

  <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <meta name="theme-color" content="#ff6347">
</head>

Testing what you’ve built

You can’t easily preview most of these tags by just looking at your own page, since they’re invisible unless something specifically reads them. A few real tools worth knowing about:

• Facebook Sharing Debugger and LinkedIn Post Inspector — paste your URL to preview exactly how the Open Graph card will look, and re-fetch a cached version after you make changes.
• Search “Twitter Card Validator” for X’s equivalent tool.
• Browser DevTools (right-click → Inspect → the <head> in the Elements panel) to simply confirm your tags rendered as written.

Common mistakes

• Using a relative path for og:image, like og:image content of "/images/cover.jpg". Social platforms fetch this URL directly from their own servers, without loading your page first, so it must be a complete, absolute URL.
• Copy-pasting the same meta description across every page. Each page should describe itself.
• Forgetting canonical entirely on a site with URL parameters or duplicate paths, diluting search ranking across near-identical URLs.
• Setting noindex on pages you actually want found, or forgetting it on ones you don’t (like an internal test page accidentally left public).
• Writing an og:title wildly different from the actual page <title>, creating a confusing mismatch between what someone clicked and what they land on.
• Never testing with the actual debugging tools, and only discovering a broken share preview after publishing.

Interview-style questions

What is the difference between <title> and og:title? <title> is the browser tab title and the main clickable headline in search results. og:title is specifically the headline shown when the page is shared on social platforms — they’re often similar or identical, but controlled by separate tags.

Why must og:image be an absolute URL? Social platforms fetch the image directly from their own servers when generating a preview card, without first loading your page, so a relative path has no base URL to resolve against and will fail.

What problem does the canonical link solve? It tells search engines which URL is the authoritative version of a page’s content when the same content is reachable at more than one URL, preventing duplicate versions from diluting search ranking.

When would you use <meta name="robots" content="noindex">? On pages that shouldn’t appear in search results — like a staging page, an internal admin page, or a post-submission thank-you page.

Practice

1. Use the Practice in Editor button. Change the og:title, og:description and og:image to describe a different imaginary blog post.

2. Write a meta description for your own MyCodeNest homepage, keeping it under 160 characters and making it genuinely describe what the site offers.

3. Add a theme-color meta tag matching a colour of your choice, and explain where you’d expect to see its effect.

4. Fix this code (it has two mistakes: a relative og:image path, and a meta description that’s really just the title repeated):

   <meta property="og:image" content="/cover.jpg">
   <meta name="description" content="10 Beginner HTML Mistakes to Avoid">

Recap

• <title> and meta description drive what people see in search results — keep both unique per page and within their length limits.
• Open Graph tags (og:title, og:description, og:image, og:type, og:url) control how your page looks when shared on social platforms; og:image must be an absolute URL.
• Favicons and apple-touch-icon control the small icon shown in tabs, bookmarks and home-screen shortcuts.
• canonical tells search engines which URL is the “real” one when content is reachable at multiple URLs.
• robots (noindex/nofollow) controls whether a specific page should be discoverable by search engines at all.
• Use real tools (Facebook Sharing Debugger, Twitter Card Validator) to actually verify how your tags render, rather than guessing.