Goal
You’ll be able to write the meta tags that genuinely matter for a real production page, understanding what each one actually controls rather than copy-pasting a generic boilerplate without knowing why.
Learn
Beyond the basic charset and title covered in Part 1, several meta tags genuinely affect how a page behaves and appears, both to users and to search engines/social platforms:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This is genuinely essential for any responsive page — without it, mobile browsers render the page at a desktop-width scale and then shrink it to fit, making text tiny and unreadable rather than actually adapting the layout responsively.
<meta name="description" content="A clear, specific summary of this page's content, under about 160 characters.">
This description is frequently what search engines display directly beneath a page’s title in search results — a genuinely well-written one can meaningfully affect whether someone clicks through, distinct from the page’s actual ranking position.
<meta property="og:title" content="Page Title"> <meta property="og:description" content="Description for social sharing"> <meta property="og:image" content="https://example.com/preview.jpg">
These “Open Graph” tags control how a link appears when shared on social platforms like Facebook or LinkedIn — the preview title, description, and image shown. Without them, a shared link often displays an unpredictable, sometimes unflattering auto-generated preview instead of a deliberately chosen one.
The genuinely important mindset shift here: the <head> isn’t just administrative boilerplate to copy-paste once and forget — several of these tags directly affect real-world outcomes like mobile usability, search click-through rates, and how professional a shared link looks.
Decision Task
A page looks correctly designed on a desktop browser, but on mobile, all text appears tiny and users need to pinch-zoom constantly to read anything. Before reading on: which specific meta tag is almost certainly missing, and why does its absence cause exactly this symptom?
Show Answer
The viewport meta tag. Without it, mobile browsers assume the page was built for desktop width and render it at that scale, then shrink the whole thing to fit the phone screen — making everything, including text, tiny — rather than allowing the page’s actual responsive CSS to take effect at the phone’s real width.
Common Mistake
Treating meta description as purely optional or skippable, leaving it blank. Search engines will often auto-generate a snippet from the page’s visible content instead, which is frequently awkward, oddly cut off mid-sentence, or not actually representative of the page’s real value — a deliberately written description under 160 characters gives control over this important first impression in search results.
Practice Questions
1. Write the viewport meta tag needed for a genuinely responsive mobile experience.
Show Answer
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. What real practical outcome does a well-written meta description affect, distinct from a page’s actual search ranking position?
Show Answer
Click-through rate — how likely someone is to actually click the result, based on the snippet shown beneath the title, independent of where the page ranks.
3. What happens if Open Graph tags are missing when a page link is shared on social media?
Show Answer
The platform often displays an unpredictable, auto-generated preview instead, which can look unprofessional or fail to represent the page well, since there’s no deliberately chosen title/description/image to use instead.
4. True or False: the head element is purely administrative boilerplate with no real effect on user-facing outcomes.
Show Answer
False — several head elements, like viewport and meta description, directly affect real outcomes like mobile usability and search click-through rates, not just internal technical setup.
5. Roughly what character length should a meta description stay under, and why does this limit exist practically?
Show Answer
Around 160 characters — search engines typically truncate longer descriptions in results display, so exceeding this risks the description being cut off mid-sentence in an unpolished way.
Try It Yourself
Without looking back, write a meta description for a fictional bakery’s homepage, staying under roughly 160 characters, genuinely describing what the page offers rather than being vague.
Show Answer
Answers will vary, but should be a specific, genuine description under ~160 characters — for example: “Fresh artisan bread and pastries baked daily in downtown Springfield. Order online for pickup or local delivery.” (~110 characters, specific and clear, not vague filler.)
Quick Check
1. What does the viewport meta tag control?
Show Answer
How the page scales and adapts on mobile devices, essential for genuine responsive behavior.
2. Where does the meta description commonly appear to users?
Show Answer
Beneath a page’s title in search engine results.
3. What do Open Graph meta tags control?
Show Answer
How a link appears when shared on social platforms — the preview title, description, and image shown.
4. What happens on mobile if the viewport meta tag is missing?
Show Answer
The browser renders the page at desktop width then shrinks it to fit, making text and content tiny rather than genuinely responsive.
5. Why shouldn’t meta description be left blank on a real production page?
Show Answer
Search engines will auto-generate a snippet instead, which is often awkwardly cut off or unrepresentative, losing control over an important first impression in search results.