Module 7: Head and Metadata · Lesson 2 of 5
Meta Viewport and Meta Description Tags Explained
All lessons in Module 7
- Title and Charset
- Viewport and Description
- Favicon and Social Previews
- Linking CSS and JavaScript
- Project: Complete Head
Goal: Make a page work on phones and give it a snippet for search results.
Learn
A lot of head tags share one pattern: <meta name="..." content="...">. The name says what kind of information it is. The content holds the value.
The viewport tag stops a phone from pretending to be a wide desktop screen and shrinking your page into tiny text:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width means "use the phone's real width" and initial-scale=1 means "start at normal zoom". Every modern page needs this line. It is step one of responsive web design (opens in a new tab).
The description is the short summary search engines often print under your title. Write one or two real sentences (about 50-160 characters) that would make you click.
The short version
<meta name="viewport" content="width=device-width, initial-scale=1">makes a phone lay the page out at its real width.- Never block zooming with
user-scalable=noormaximum-scale=1. People with low vision need it. - Write each page its own meta description: one or two real sentences, roughly 120-160 characters long.
- Search engines may use your description as the snippet, or swap in text from the page.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Hand-made sourdough, croissants and cakes, baked fresh every morning in Leeds.">
<title>Moonlight Bakery - Fresh Bread Daily</title>
</head>
<body>
<h1>Moonlight Bakery</h1>
</body>
</html>Your task
Riverside Dog Walkers looks tiny on phones and has no search snippet. Add two meta tags inside <head>:
- A viewport tag with
content="width=device-width, initial-scale=1". - A description of at least 50 characters that mentions dogs, for example Friendly daily dog walks and puppy visits along the river in Bristol.
You won't see either one in the preview; Check reads them straight from the head. Later, on your own pages, try a live preview with custom phone sizes such as HTMLPreview (opens in a new tab) to see what the viewport tag changes.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">Right
<meta name="viewport" content="width=device-width, initial-scale=1">If zoom is blocked, nobody can enlarge small text, and WCAG counts that as an accessibility failure.
Wrong
<meta name="description" content="bakery, bread, cakes, best bakery, cheap bakery Leeds">Right
<meta name="description" content="Hand-made sourdough, croissants and cakes, baked fresh every morning in Leeds.">A pile of keywords reads like spam, and search engines usually skip it and pick their own snippet.
Go deeper
Google indexes the mobile version of a page first (mobile-first indexing (opens in a new tab)), so a page that breaks on phones also does worse in search. Lighthouse in Chrome DevTools flags any page without a viewport tag. The tag only allows a responsive layout, though. The real adapting is done by CSS, with flexible widths and media queries.
The description has a second job. Many chat and social apps fall back to it when a page has no og:description (see favicon and Open Graph), so a good one also improves share previews.
The HTML SEO guide recommends one unique description per page. Ten pages with the same description look like duplicates, and search engines will usually ignore it and pull text from the page. Write it as a short answer to the searcher's question: what is here, who it is for, and one concrete detail such as a place, price or opening time.
Then read it out loud. If it sounds like a keyword list and nothing a person would say, rewrite it.
Frequently asked questions
What is meta viewport in HTML?
It is the tag that tells mobile browsers how wide to make the page layout. Leave it out and a phone pretends to be about 980 pixels wide, then shrinks the whole page to fit. The text ends up tiny. With content="width=device-width, initial-scale=1" the layout uses the phone's real width at normal zoom, and your CSS can fit the design to the screen.
How long should a meta description be?
Around 120-160 characters. Search engines cut snippets by display width, so a much longer one may end in an ellipsis on desktop, and mobile results show less still. Lead with the useful part: what the page offers and why someone should click. A shorter description carries no penalty if it is a real, specific sentence. Google's guide to controlling snippets (opens in a new tab) has more examples.
Does the meta description affect SEO ranking?
Not directly. Google has said the meta description is not a ranking factor. It still earns its place, because it often becomes the snippet under your title, and an honest, specific snippet gets more clicks. Google may also show other text from the page when that fits the search better. So the page content itself still has to answer the question.
