Meta and the head
Artifact: Title + description that show up in the tab and OG previews
1. Principle
The <head> contains everything the browser and external services need to know about your page that isn't the rendered content. Eight tags do the heavy lifting:
<meta charset="utf-8"> ← character encoding
<meta name="viewport" ...> ← mobile rendering
<title>...</title> ← browser tab + Google result
<meta name="description" ...> ← Google snippet (~155 chars)
<meta property="og:title" ...> ← title in social previews
<meta property="og:description" ...> ← description in social previews
<meta property="og:image" ...> ← image in social previews
<link rel="icon" ...> ← favicon (browser tab icon)
The first three are mandatory for every page. The rest become important when other people share your page on Slack, Twitter, LinkedIn, or anywhere with link previews.
2. Do (you try)
Update your <head> to include everything below. Customize the values to your name and details.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Name — Portfolio</title>
<meta name="description" content="Portfolio of Your Name. Developer building things on the web.">
<!-- OpenGraph (Facebook, LinkedIn, Slack, Discord, etc.) -->
<meta property="og:type" content="website">
<meta property="og:title" content="Your Name — Portfolio">
<meta property="og:description" content="Portfolio of Your Name. Developer building things on the web.">
<!-- Twitter card -->
<meta name="twitter:card" content="summary">
</head>Save and refresh.
3. Verify (how you know)
Tab title: Look at the browser tab. It should now say Your Name — Portfolio.
Google preview (simulated): Open a tool like opengraph.dev. Type file:///...index.html won't work (only public URLs do) — but you can preview by viewing source and confirming all the meta tags are present.
Manual check in DevTools: Right-click → Inspect → Elements tab → click the <head> element to expand. You should see every meta tag you added.
We'll see this really working in Chapter 6 when your page has a public URL and you paste it into Slack — a preview with title, description, and (if you add an image) thumbnail.
4. Reference
Locked. Try it yourself first.