Head and meta tags
The <head> contains metadata: <title> (browser tab), <meta charset="utf-8"> (character encoding), <meta name="viewport" content="width=device-width"> for mobile. Link to CSS with <link rel="stylesheet" href="style.css">.
Appy Says…
The <head> section of your HTML is invisible to users but incredibly important. Meta tags control how your page appears in Google search results, how it looks when shared on WhatsApp, and whether the mobile experience is good or terrible.
What are Meta Tags?
Meta tags live inside <head> and provide metadata about the page — information for browsers, search engines, and social media platforms.
- •
<meta charset="UTF-8">— character encoding (always include this first) - •
<meta name="viewport" content="width=device-width, initial-scale=1">— essential for mobile - •
<meta name="description" content="...">— shown in Google search results - •
<meta property="og:title" content="...">— Open Graph title for social sharing - •
<meta property="og:image" content="url">— thumbnail when shared on WhatsApp/Facebook - •
<title>Page Name</title>— shown in browser tab and search results - •
<link rel="icon" href="favicon.ico">— browser tab icon
Think of it like your game's app store listing
The title, description, and preview screenshot on the app store aren't inside the game — they're metadata that tells potential users what to expect. Meta tags are your webpage's app store listing for Google and social media.
How It Works
- •1. All meta tags go inside
<head></head> - •2. The viewport meta tag tells mobile browsers not to zoom out to fit a desktop layout
- •3.
og:(Open Graph) tags control the link preview card on social platforms - •4. Twitter uses its own:
<meta name="twitter:card" content="summary_large_image"> - •5.
descriptionshould be 150–160 chars — Google truncates longer ones - •6.
robotsmeta:<meta name="robots" content="noindex">tells Google not to index a page
Real-World Examples
- •Missing viewport tag → your site looks zoomed-out on iPhone
- •A good
og:imagemakes WhatsApp/Slack links show a rich preview card - •Google shows your
<title>anddescriptionas the search result snippet - •Vite's
index.htmltemplate includes charset and viewport meta by default
Key Facts
- •The
charsetmeta MUST be the first tag in<head>— otherwise encoding issues can corrupt the page - •Open Graph was created by Facebook but is now the standard for social previews across all platforms
- •Google ignores the
keywordsmeta tag — don't waste time on it - •Tools like Opengraph.xyz let you preview how your meta tags look before publishing
Watch Out!
Missing the viewport meta tag is the most common reason a site looks terrible on mobile. <meta name="viewport" content="width=device-width, initial-scale=1"> is non-negotiable for any modern website.
Remember
Every page needs: charset, viewport, title, description. Add og:title, og:description, og:image for good social sharing previews.
What You Learned
- •Meta tags in
<head>control charset, mobile layout, SEO, and social previews - •Viewport meta is essential for mobile; og: tags control social share cards
- •Unlocks: mobile-friendly sites, Google indexing, beautiful WhatsApp link previews
Key Facts
- →The
charsetmeta MUST be the first tag in<head>— otherwise encoding issues can corrupt the page - →Open Graph was created by Facebook but is now the standard for social previews across all platforms
- →Google ignores the
keywordsmeta tag — don't waste time on it - →Tools like Opengraph.xyz let you preview how your meta tags look before publishing
Real-World Examples
Remember
Every page needs: charset, viewport, title, description. Add og:title, og:description, og:image for good social sharing previews.
Quick Quiz
Where does <title> appear?