When your page appears in search results, all anyone sees is one line of title and two lines of description. Getting those right changes how often people click. Do this before any clever tactics.
What a search result looks like
Search engines use your <title> as the headline and your meta description as the text below it.
<title>; the text below is your meta description. Those three lines are everything a searcher sees.Where they go: inside <head>
<head>
<meta charset="UTF-8">
<title>About Shima | The first website I ever built</title>
<meta name="description" content="A profile page built with nothing but HTML and CSS. The steps I followed, and the parts where I got stuck.">
</head>Write them separately for every page. If every page on your site shares a title, nobody can tell which one to open.
HTMLGet the contents of head in orderThe bigger picture of what goes in head, over in the HTML courseWriting the title
Aim for around 60 characters. Longer and it gets cut off in results.
| ✕ Nearly there | ○ Communicates |
|---|---|
Home | About Shima — illustration and web |
Untitled | Illustration portfolio | Shima |
News | News | Shima's site |
Three habits:
- Be specific about the page — “Home” tells nobody what the site is
- Put important words first — the meaning survives truncation
- Site name last, after a separator —
Page name | Site nameis the standard shape
Writing the description
Aim for 120 to 160 characters. It doesn’t lift your ranking on its own, but it decides whether people click.
- Lead with what the page gives them
- Include something concrete (a number, a conclusion, who it’s for)
- Don’t reuse one description across the site
<!-- ✕ Says nothing -->
<meta name="description" content="Welcome. This is my site.">
<!-- ○ Says what's inside -->
<meta name="description" content="A record of building a profile page with only HTML and CSS: the tags I used, the three places I got stuck, and how long it took.">The quiet things that also matter
Use heading tags properly
One <h1> for the page’s subject, then <h2> for its topics and <h3> beneath those, without skipping levels. Headings are how a search engine reads your page’s structure.
Write alt text on images
<img src="shima.png" alt="A snowy long-tailed tit perched on a branch">The description feeds image search and reaches people using screen readers. Never skip it.
Keep file and folder names simple
A path like /profile/ tells you what’s inside just by looking. Names with spaces or non-Latin characters turn into unreadable strings once encoded into a URL.
Make it work on phones
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without this line, phones shrink the whole page to fit. Search engines judge your site by how it behaves on a phone, so it’s mandatory.
Social sharing is configured separately
The card shown when someone shares your link is controlled by separate og: tags. Title and description alone won’t produce a thumbnail.
Then check that it’s being picked up
Changes take time to appear in search results. To see whether your page is recognized, use Google’s free tool.
TipsSeeing how search views your site with Search ConsoleHow to see the way search engines view your siteSummary
- Search results are your title and description. Write them per page
- Titles: around 60 characters, important words first. Descriptions: 120–160, leading with what’s inside
- Back them with heading order, image alt text, and the viewport tag
Spreading these basics across every page beats any clever tactic.