Head & Meta Tags
Overview
The `<head>` section is the 'brain' of your HTML document. Everything inside the `<head>` is completely invisible to the user viewing your website.
Instead, the head contains Metadata (data about data). It talks directly to the browser, telling it what character set to use, how to scale on mobile devices, what CSS files to load, and what to tell Google's search engine about your page.
Syntax
The `<title>` tag is the text that appears on the browser tab.
The `charset` meta tag tells the browser to use UTF-8 encoding (which supports all languages and emojis).
The `viewport` meta tag is absolutely CRITICAL for mobile responsiveness. Without it, your website will look like a tiny desktop site on a phone screen.
<head>
<!-- Ensures emojis and foreign languages display correctly -->
<meta charset="UTF-8" />
<!-- CRITICAL: Makes the website responsive on mobile phones -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- The name on the browser tab -->
<title>Kartik's Portfolio</title>
</head>To rank well on Google, you need a meta `description`. This is the short paragraph that shows up under your blue link in search results.
To make your links look beautiful with an image when shared on WhatsApp, Twitter, or LinkedIn, you use Open Graph (`og:`) and Twitter Card meta tags.
<head>
<!-- Shows up in Google Search Results -->
<meta name="description" content="Learn HTML in 30 days — free tutorial for beginners." />
<!-- Open Graph: Controls how links look when shared on WhatsApp/Facebook -->
<meta property="og:title" content="HTML Tutorial" />
<meta property="og:description" content="Learn HTML step by step" />
<meta property="og:image" content="https://example.com/cover-image.jpg" />
</head>Common Pitfalls
- The <meta charset='UTF-8'> tag must be the very FIRST meta tag inside the <head>. If it's loaded late, the browser might have already tried reading the page incorrectly.
- Keep your meta description under 160 characters. Google will truncate (cut off) anything longer with '...'
Real-World Example
A fully optimized head section for a production website:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Hooks Complete Guide | DevNotes</title>
<meta name="description" content="Learn React Hooks from scratch with real examples. Covers useState, useEffect, useContext, and custom hooks." />
<!-- Social Media Previews -->
<meta property="og:type" content="article" />
<meta property="og:title" content="React Hooks Complete Guide" />
<meta property="og:image" content="https://devnotes.in/og/react-hooks.jpg" />
<!-- Link to external CSS stylesheet -->
<link rel="stylesheet" href="/styles/main.css" />
</head>