The Head, CSS/JS & Standards›Extra· 35 min read

The Head: Meta Tags, Favicon & SEO

The hidden head tags that decide how Google lists your page, how it looks on the browser tab, and how it appears when shared.

What you will learn

Add the essential meta tags
Add a favicon and a good page title
Add a description and social-share preview

What lives in the head?

The <head> holds information about the page: the <title>, <meta> tags, the favicon <link>, and links to CSS and JS. None of it shows in the page body — but it matters enormously.

The head tags every page needs

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodingClave — Learn Web Development</title>
  <meta name="description" content="Job-ready web development training. HTML, CSS, JavaScript, MERN and Laravel.">
  <link rel="icon" href="favicon.ico">
</head>

None of these show in the page body, but each has a job: meta charset picks the character set, meta viewport makes the page fit phones, <title> sets the tab and Google heading, meta description writes the grey summary under your Google result, and link rel="icon" sets the little tab icon (favicon). The table below sums up why each matters.

Tag	Why it matters
`<title>`	Shown on the browser tab and as the blue link in Google
`meta description`	The grey summary under your Google result
`meta viewport`	Makes the page fit phone screens (essential!)
`link rel="icon"`	The little favicon on the browser tab
`meta charset`	Correct characters and emoji

Social sharing preview

When someone shares your link, Open Graph tags decide the title, text and image of the preview card.

Open Graph tags for share previews

<meta property="og:title" content="CodingClave Training">
<meta property="og:description" content="Become a job-ready developer.">
<meta property="og:image" content="https://trainingatcodingclave.com/preview.jpg">

These three Open Graph (og:) tags control the preview card when your link is pasted into WhatsApp, Facebook or Slack: og:title is the bold headline, og:description is the small text, and og:image is the picture shown. Without them, the platform guesses — often poorly.

Watch out: Never ship a page without the viewport meta tag — without it your page looks tiny and zoomed-out on phones.

Q. Where do meta tags, the title and the favicon live?

Answer: All page metadata — title, meta tags, favicon, CSS/JS links — lives in the <head>.

✍️ Practice

Add a viewport tag, a description and a favicon link to a page.
Write three different description texts for the same page and discuss which earns the most clicks.

🏠 Homework

Add Open Graph tags to your homepage and test the preview by sharing the link in a chat with yourself.