—HTML Series · Post 14: HTML Meta Tags & SEO
Meta Tags & SEO:
The Invisible Power of <head>
Users never see these tags. Search engines and social media live by them. Here's every meta tag you need to understand — and why each one matters.
Everything inside the <head> tag is invisible to your visitors. They don't see it. They don't interact with it. But it's the most powerful section of your HTML — because it controls how search engines, social media platforms, and browsers understand your page.
Your meta tags determine whether Google shows your page for the right search queries. They control what appears when someone shares your link on Twitter or LinkedIn. They tell the browser how to render your text and how to scale your page on mobile devices.
If your HTML content is the product, your meta tags are the packaging, the shelf placement, and the back-of-the-box description all in one.
The Six Meta Tags You Need to Know
1. Character Set — charset
This should be the very first tag inside your <head>. It tells the browser how to decode the text on your page.
UTF-8 supports virtually every character in every language — English, Spanish, Japanese, Arabic, emoji, mathematical symbols, all of it. There's no reason to use anything else. Put it first, always.
Without a charset declaration, the browser has to guess how to decode your text. Accented characters turn into question marks. Curly quotes become garbled symbols. Emoji break. It's subtle enough that you might not notice in English — but the moment you have international content or special characters, everything falls apart.
2. Viewport — The Mobile Essential
This single tag is what makes your website responsive. Without it, mobile browsers assume your page was designed for a desktop and zoom out to fit the whole thing on screen — making everything tiny and unreadable.
width=device-width tells the browser to match the page width to the device's screen width. initial-scale=1.0 sets the initial zoom level to 100%. Together, they let your CSS media queries actually work and your responsive design actually respond.
If you're building anything that anyone will ever view on a phone (so, everything), this tag must be present. It's part of every HTML boilerplate for a reason. Skip it and your entire mobile experience breaks — regardless of how good your CSS is.
3. Description — Your Google Elevator Pitch
The meta description is the text that appears under your page title in search results. It's your chance to convince someone to click your link instead of the other nine results on the page.
Keep it between 150-160 characters. Lead with the most compelling information. Include your target keyword naturally. Write it like you're explaining to a friend what this page is about in one sentence. And never duplicate descriptions across pages — every page should have a unique one.
4 & 5. Keywords and Author
Let's be honest about keywords: Google doesn't use them for ranking. They stopped relying on the keywords meta tag years ago because people abused it — stuffing hundreds of irrelevant keywords to game search results.
That said, some smaller search engines and internal site search tools still reference them. They take two seconds to add, so there's no harm in including them.
The author tag is more useful for personal branding. If you're building a portfolio or a blog, it credits you as the creator. Some CMS tools and browser extensions surface this information. It's a small detail that reinforces your identity on everything you build.
6. Open Graph — Owning Your Social Previews
This is the one most beginners miss — and it's the one that makes the biggest visible difference. Open Graph tags control what your link looks like when someone shares it on Twitter, LinkedIn, Facebook, Slack, Discord, iMessage, and basically everywhere else.
Without them, platforms try to guess your title and pull a random image from your page. It almost always looks terrible.
What This Looks Like When Shared
With proper Open Graph tags, here's what your link preview looks like on social media:
Without OG tags, that same link might show up as a tiny text link with no image, a generic title pulled from your <title> tag, and a random sentence from your page as the description. Not the look you want when you're sharing your work.
The recommended image size for Open Graph is 1200 × 630 pixels. Use a clean, branded design — your logo, a bold headline, and your brand colors work great. Test your previews using free tools like opengraph.xyz or LinkedIn's Post Inspector. And always use an absolute URL (full https:// path) for the image — relative paths don't work here.
Putting It All Together — The Complete <head>
Here's what a fully configured <head> looks like for a real project. Copy this as your starting template:
Charset goes first (so the browser knows how to read everything after it). Viewport goes second. Title and description come next for SEO. Open Graph follows. Then your favicon and stylesheets. This ordering is a convention — but it's a good one that keeps your head section readable and logical.
I shared my portfolio link on LinkedIn for the first time and the preview looked like garbage. No image. The title said "Document." The description pulled a random sentence from my footer.
I had spent weeks perfecting the design and didn't spend five minutes on Open Graph tags. The irony of building a beautiful site that looks terrible the moment someone shares it was not lost on me.
Twenty minutes later I had OG tags, a branded banner image, and a link preview that actually represented my work. Should've been there from day one. 🤦♀️
🔨 Mini Build: Optimize Your Portfolio's <head>
Open your portfolio project and upgrade the <head> with proper meta and OG tags:
The Bottom Line
Meta tags are invisible to your visitors but essential for everything that happens before someone lands on your page. charset makes your text readable. viewport makes your site mobile-friendly. description sells your page in search results. And Open Graph tags make your links look professional when shared.
Every page you build from this point forward should have a fully configured <head>. It takes five minutes to set up and makes every other part of your site work better — from Google rankings to social sharing to mobile rendering. The invisible code is just as important as the code people see.
