Adding Meta Tags to Your HTML Pages
The <head> of every HTML page is where you tell search engines and social platforms what the page is. Visitors don't see this section, but Google reads it before anything else. Here's the minimum every page should have.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page-specific title under 60 characters</title> <meta name="description" content="A clear, accurate summary of the page, under 155 characters."> </head>
What each tag does
charset tells browsers how to interpret the text. Without it, special characters can render as garbled symbols. Always UTF-8.
viewport makes the page responsive on mobile. Without it, your website looks broken on phones, which kills your mobile ranking. Non-negotiable.
title is the blue link in search results and the text in the browser tab. Two rules: write it for humans first, and make it unique to that page. "Home" is a bad title. "Sara's Pottery Studio: Handmade Mugs from Portland" is a good one.
description is the gray snippet below the link in search results. Google sometimes uses it, sometimes writes its own. Write one anyway, because when Google uses yours, you get more clicks. Describe what the page actually contains, not what you wish it contained.
Social media tags
When someone shares your page on Twitter, LinkedIn, Slack, WhatsApp, or anywhere else, those platforms read special tags to build the preview card. Without them, the preview is blank or shows the wrong image. Add these:
<meta property="og:title" content="Sara's Pottery Studio"> <meta property="og:description" content="Handmade ceramic mugs and bowls from Portland."> <meta property="og:image" content="https://yoursite.com/images/share-card.jpg"> <meta property="og:url" content="https://yoursite.com/"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image">
The image (og:image ) should be at least 1200x630 pixels. This is the picture that appears when your link gets shared. Use an absolute URL (starting with https:// ), not a relative one.
The big mistake: copy-pasting the head
Every page on your website needs its own title and description (covered in depth in Writing Titles and Meta Descriptions That Get Clicked). If your about page, your shop page, and your contact page all have the same title, Google can't tell them apart, and they compete with each other in search results. Open each HTML file from the Pages section of your dashboard, use the built-in code editor to fix the head, and save. Five minutes per page.
Bad:
<title>Sara's Pottery Studio</title> <!-- on every page -->
Better:
<!-- index.html --> <title>Sara's Pottery Studio: Handmade Mugs from Portland</title> <!-- about.html --> <title>About Sara: Twenty Years of Wheel-Thrown Pottery</title> <!-- shop.html --> <title>Shop: Ceramic Mugs, Bowls, and Planters | Sara's Pottery</title>
The other mistake: the keywords tag
You'll see <meta name="keywords"> in old tutorials and on legacy websites. Skip it. Google announced over a decade ago that they ignore it. Adding it doesn't help and clutters your head section.
Testing your tags
Open your live page in a browser, right-click anywhere, and choose View page source. The <head> section appears at the top. Read it like you're seeing the page for the first time. Does the title tell you what the page is? Does the description make you want to click? If not, rewrite.
For social previews, paste your URL into:
- Meta Sharing Debugger for Facebook/Instagram/WhatsApp previews
- LinkedIn Post Inspector for LinkedIn previews
- Or just paste the URL into a Slack DM to yourself and see what shows up
One title and description per page. Always.
This is the single most-skipped task on static websites, and the single biggest easy win. Five minutes per page, applied across your whole website, often moves rankings within a few weeks.