📄 HTML Meta Tags - Controlling How My Page Appears in Search Engines
📅 October 8, 2025
✍️ By Evans
Hey friends! 👋
After learning how to structure my HTML and comment my code, I wanted to understand how my pages appear on Google and social media.
That’s when I discovered meta tags — small but powerful lines of code that tell browsers and search engines about your webpage.
🧠 What Are Meta Tags?
Meta tags live inside the <head> section of your HTML.
They don’t appear on your webpage, but they give important information — like your page’s description, keywords, author, and even how it should be indexed by search engines.
Here’s a simple example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML step-by-step with SwitzCodes. Beginner-friendly tutorials on web development.">
<meta name="keywords" content="HTML, web development, SwitzCodes, coding, beginner">
<meta name="author" content="Evans">
<meta name="robots" content="index, follow">
<title>HTML Meta Tags – Controlling How My Page Appears in Search Engines</title>
</head>
🏷️ What Each Meta Tag Does
Let’s break them down 👇
-
<meta charset="UTF-8">
Tells the browser how to read text on your page (UTF-8 supports most characters worldwide).
-
<meta name="description" ...>
This is what appears under your page title in search results — make it clear and catchy!
-
<meta name="keywords" ...>
Lists keywords that describe your page (not as important today, but still useful).
-
<meta name="author" ...>
Shows who created the page — that’s you!
-
<meta name="robots" content="index, follow">
Tells search engines to include your page in results and follow your links.
💡 Social Media Meta Tags
When you share your site on social media, platforms like Facebook or X (Twitter) use Open Graph and Twitter Card meta tags to display nice previews.
Example:
<meta property="og:title" content="Learn HTML with SwitzCodes">
<meta property="og:description" content="My journey learning HTML step by step.">
<meta property="og:image" content="https://switzcodes.com/images/html-banner.jpg">
<meta property="og:url" content="https://switzcodes.com/html-meta-tags.html">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learn HTML with SwitzCodes">
<meta name="twitter:description" content="HTML tutorials for beginners.">
<meta name="twitter:image" content="https://switzcodes.com/images/html-banner.jpg">
Now when someone shares your page, it looks clean and professional! 😎
💡 Pro Tips I Picked Up
- Keep your description under 160 characters — Google cuts longer ones.
- Each page should have a unique title and description.
- Use your main keywords naturally in your title and meta description.
🎯 What I Learned
Meta tags may not look fancy, but they’re super important for SEO (Search Engine Optimization). They help people find your site and make your pages look more professional in search results.
Now, whenever I create a new blog post, I always add proper meta tags — just like labeling my content for the web!
👉 What’s Next?
Next, I’ll dive into Creating Navigation Menus with HTML — because once you have multiple pages, you’ll want a smooth way to move between them! 🧭
Stay tuned, and keep building! 😊
— Evans 💻