Command Palette

Search for a command to run...

Hectal
Phase 6Intermediate7 of 8 in HTML

The Head, SEO and Sharing

Everything in the <head>: titles, descriptions, social cards, icons, the manifest, loading CSS and scripts, structured data and SEO basics.

The <head> is the part of a page nobody sees, yet it decides a lot: how the page is decoded, how it fits a phone, what the browser tab says, what Google shows in its results, what card appears when someone shares your link, which icon sits on a home screen, and how fast the page starts to paint.

In this phase you'll go through the head element by element. You'll write titles and descriptions that people click, social cards that look right on WhatsApp, LinkedIn and X, favicons and a web app manifest, and the <link> and <script> tags that control loading speed (defer, async, preload, preconnect).

Then you'll describe your page to machines with structured data (JSON-LD) and learn the SEO basics every developer should own: crawling and indexing, robots, canonical URLs, sitemaps, clean URLs, semantic HTML and hreflang. The examples are live: each one reads its own head with a little JavaScript so you can see exactly what a browser or a crawler sees.

0/7 · 0%
7 topics ~2 h 17 code blocks & diagrams
Start with the first topic
1
6.1

The Head in Depth

The head holds information about the page: how to decode it (charset), how to size it on phones (viewport), where relative links point (base), and which styles and scripts to load, and where you place each of them changes how the page behaves.

22 min 3 code practice

2
6.2

Titles and Meta Descriptions

The <title> names the page on tabs, bookmarks and search results, and the meta description is your suggested summary under it; both should be unique, specific and short enough not to be cut off.

20 min 2 code practice

3
6.3

Social Sharing Cards

Open Graph and Twitter card meta tags tell WhatsApp, LinkedIn, Facebook, X, Slack and Discord what title, description and image to show when someone shares your link.

21 min 2 code practice

4
6.4

Favicons and the Web App Manifest

A small set of icon links (an ICO, an SVG and a 180px Apple icon), a theme-color meta tag and a manifest.webmanifest file give your site its icon on tabs, bookmarks and home screens, and let it be installed like an app.

20 min 2 code practice

5
6.5

Linking CSS, Scripts and Fonts

How you link stylesheets, scripts and fonts decides how fast a page appears: defer, async and type="module" change when scripts run, and preload, preconnect and prefetch tell the browser what to fetch early.

20 min 3 code practice

6
6.6

Structured Data

Structured data is a JSON-LD block that describes the page's content in schema.org vocabulary (a product with a price, a recipe with a cooking time), so search engines can understand it exactly and may show rich results like stars and prices.

20 min 3 code practice

7
6.7

SEO Basics for Developers

Search engines crawl, render and index pages before they rank them; developers control that with robots rules, canonical URLs, sitemaps, clean URLs, semantic HTML and hreflang for other languages.

26 min 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Write a title and a description

This recipe page has an empty title and no description. Write a <title> that says what the page is (it must mention pancakes) and is at most 60 characters long.

Beginner
2

Fix a broken head

This café page has four head problems. Fix them all:

Beginner
3

Make the link look good when shared

This recipe page lives at https://ashaskitchen.example/recipes/pancakes, and its sharing image is https://ashaskitchen.example/og/pancakes.jpg (1200 × 630).

Intermediate
4

Icons, theme colour and an installable manifest

Make the Tickit to-do app installable. In the head, add: an SVG favicon link (/icon.svg, with its type), an Apple touch icon (/apple-touch-icon.png), a manifest link (/manifest.webmanifest) and a theme-color.

Intermediate
5

Describe a product with JSON-LD

Fill in the JSON-LD block so it describes the product shown on the page: a schema.org Product whose name matches the heading exactly, with an offers object (type Offer) holding the price 899, the currency INR and the availability https://schema.org/InStock.

Intermediate
6

Get a blog post ready for launch

Ravi's post is going live at https://ravi.example/en/blog/code-at-40; a Hindi version lives at https://ravi.example/hi/blog/code-at-40. The page still has problems left over from staging.

Advanced