HTML Head, Meta & SEO Basics
The <head> holds information about the page that is not shown in the page itself.
What Goes in the Head?
| Element | Purpose |
|---|---|
<title> | The text in the browser tab and the blue headline in Google |
<meta charset="UTF-8"> | Lets the page show every language and symbol correctly |
<meta name="viewport"> | Makes the page fit phone screens |
<meta name="description"> | A short summary Google may show under the title |
<link rel="stylesheet"> | Connects a CSS file |
<link rel="icon"> | The small icon in the browser tab (favicon) |
<style> | CSS written inside the page |
<script> | JavaScript |
A Complete Head
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ayesha's Bakery | Fresh Cakes in Karachi</title>
<meta name="description" content="Fresh cakes, cupcakes and cookies baked daily in Gulshan, Karachi. Order online for home delivery.">
<style>
body { font-family: Arial, sans-serif; }
</style>
</head>
<body>
<h1>Ayesha's Bakery</h1>
<p>Look at the browser tab to see the title.</p>
</body>
</html>The charset and viewport Lines
Put <meta charset="UTF-8"> first in the head. Without it, letters like "é" or Urdu text can turn into strange symbols.
The viewport line tells phones to use the real screen width. Without it, a phone shows a tiny zoomed-out desktop page.
Example
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Add the charset and viewport lines to every page you make. Most code editors add them for you when you create a new HTML file.
Linking CSS and a Favicon
Example
html
<head>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
</head>SEO Basics with HTML
SEO (Search Engine Optimisation) means helping Google understand and show your page. Good HTML is the base of it:
- Write a unique, clear title for every page, around 50 to 60 characters, with the main words people search for.
- Write a meta description of about 150 characters that makes people want to click.
- Use one `<h1>` with the main topic, then
<h2>and<h3>in order. - Add `alt` text to every meaningful image.
- Use descriptive link text, not "click here".
- Use semantic tags like
<header>,<main>,<article>and<footer>. - Set the language with
<html lang="en">. - Make it mobile friendly with the viewport line and responsive CSS.
Social Sharing Tags
When someone shares your page on WhatsApp or Facebook, these tags choose the preview title, text and picture:
Example
html
<meta property="og:title" content="Ayesha's Bakery">
<meta property="og:description" content="Fresh cakes baked daily in Karachi.">
<meta property="og:image" content="https://example.com/images/cake.jpg">Exercise
Exercise
Which line makes a page fit correctly on phone screens?