HTML Meta Tags

Meta tags are small but mighty! They don’t appear on the web page visually, but they give browsers and search engines key info about your page.

Meta tags are always placed inside the <head> section of an HTML document.

🧩 What Are Meta Tags?

Meta tags are used to define things like:

The character encoding of your content
How the page behaves on mobile
A description for search engines
Social media previews (via Open Graph)

🔤 Common HTML Meta Tags

✅ `charset` – Character Encoding

Tells the browser what character set to use (typically UTF-8).

<meta charset="UTF-8">

This should always be the first meta tag inside <head>.

✅ `viewport` – Responsive Design

Essential for making your website mobile-friendly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this, your page might zoom out and look broken on mobile devices.

✅ `description` – Search Engine Summary

This gives search engines a summary of your page. It often appears in Google search results.

<meta name="description" content="Learn the most important HTML meta tags for SEO, social media, and mobile-friendly design.">

Best Practices:

Keep it under 160 characters
Use natural keywords
Write for humans, not bots

✅ `robots` – Indexing Control

Tells search engines what to do with your page.

<meta name="robots" content="index, follow">

Option	Meaning
`index`	Allow indexing
`noindex`	Don’t show in search results
`follow`	Follow links on the page
`nofollow`	Don’t follow any links

🎯 SEO-Related Meta Example:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A beginner-friendly tutorial on essential HTML meta tags.">
  <meta name="robots" content="index, follow">
  <title>HTML Meta Tags Tutorial</title>
</head>

📱 Open Graph Meta Tags (Optional for Social Sharing)

Want your page to look great when shared on Facebook, WhatsApp, or LinkedIn?

Use Open Graph tags. These are NOT standard HTML tags but are widely used by social media platforms.

<meta property="og:title" content="HTML Meta Tags Tutorial">
<meta property="og:description" content="Learn how to use HTML meta tags for SEO and social media.">
<meta property="og:image" content="https://example.com/meta-preview.jpg">
<meta property="og:url" content="https://example.com/html-meta-tags">

Common OG Tags:

Property	What It Controls
`og:title`	Title shown on social platforms
`og:description`	Short summary
`og:image`	Thumbnail image shown when shared
`og:url`	Canonical URL of the page
`og:type`	`website`, `article`, etc.

🔐 Other Optional Meta Tags

Tag	Purpose
`author`	Name of the content author
`theme-color`	Browser UI color on mobile
`refresh`	Refreshes or redirects page
`copyright`	Rights info (rarely used)

⚠️ Common Mistakes to Avoid

Don’t over-optimize meta descriptions with keywords
Always include viewport for mobile-friendliness
Don’t forget charset="UTF-8" at the top of <head>

✅ Summary

Meta tags = behind-the-scenes MVPs of SEO, accessibility, and performance.

Use them to:

Tell search engines what your page is about
Control how your site looks on mobile
Improve link sharing on social platforms

📘 Next Topic: HTML Accessibility (ARIA, Labels, Roles)