DM2: Page-level SEO: intent, titles, structure and structured data

Lesson 4 of 5 · reading 15–25 minutes; practice and project time is on the module page

Images, alt text and pages in more than one language

🎯You'll be able to

Describe images with useful alt text, size them so pages don't jump, and mark pages in different languages so each reaches its readers.

🏠The everyday picture

If you describe a photo to a friend on the phone, you say what matters: "a small clay pot hanging from a jute rope", not "image 1".

📘What it really is

Alt text (alt="…") describes an image for screen reader users and for search engines, and is shown if the image fails to load.
Content images: say what's shown and what matters ("Six small unglazed clay cups in a row").
Decorative images: alt="" so screen readers skip them.
Don't stuff keywords or start with "image of".
File names help a little: clay-tawa.svg beats IMG_2201.jpg.
width and height on every image let the browser keep space for it before it loads, so the layout doesn't jump (CLS, DM3).
Image search brings visitors for products such as pottery, where people want to see the item first.
More than one language: if MittiMart had Hindi and Odia pages, each would have its own address (for example /hi/ and /or/), a lang attribute, and hreflang links naming every version: <link rel="alternate" hreflang="hi-IN" href="https://www.mittimart.example/hi/product/tawa.html">, plus hreflang="x-default" for the fallback. Translate the content properly; automatic translation without review reads badly and can mislead.

📝A worked example

Input: starter product cards use <img src="img/products/planter.svg">.

Steps:

Add descriptive alt text and the image's size: <img src="img/products/planter.svg" alt="A small clay pot hanging from a jute rope" width="320" height="240">.
Give the home page's decorative hero alt="" and size it too.
Run npm run test:seo.

Expected output: test 7 passes once every image has an alt attribute, product images are described, and every image has a width and height.

🌍Where it's used

Shops describe product photos for image search and accessibility.
News sites write alt text for every news photo.
Government portals publish in several Indian languages with hreflang links between versions.

📝Case scenario

A handloom cooperative's photos had alt text like "saree1" to "saree400". Image search sent almost no visitors. After a volunteer wrote short descriptions ("Red Sambalpuri ikat cotton saree with temple border"), image search visits rose, and blind customers wrote to say they could finally shop on their own.

🖱️Try it

Find five images on a site you use and read their alt text with your browser's inspector. Rewrite one that's missing or unhelpful. Success: your text describes what matters about the image in under 15 words.

⚠️Common mistakes

Missing or keyword-stuffed alt text. Sign: alt="clay pot clay pot buy clay pot". Fix: one plain description.
Describing decorations. Sign: screen readers reading "decorative swirl". Fix: alt="" for pure decoration.
Images without size. Sign: text jumps when images load. Fix: width and height attributes.

🛠️For your project

Project 3's test 7 checks alt text and sizes on every image in site/.

✅Quick check

What alt text should a purely decorative image have?

Show the answer

An empty one, alt="".

What does hreflang tell search engines?

Show the answer

Which language (and region) each version of a page is for, so the right one is shown.