In short
Ever shared a link on WhatsApp and it showed a nice preview with an image? That came from meta tags sitting quietly in the <head> of the page.
`<meta>` elements in the `<head>` that describe a page to browsers and crawlers — charset, viewport, description, and Open Graph tags for social sharing. Some metadata affects search presentation, while other metadata primarily controls browser behavior or social previews, so each tag should have a clear purpose.
Think of it like this
The luggage tag at the airport
Nobody opens your bag to know whose it is. The tag outside says your name and destination. Meta tags are the page's luggage tag: browsers, Google and WhatsApp read them without showing them on the page.
Watch it happen
How a WhatsApp preview is built
paste aman.dev
1/6You paste your portfolio link into a chat.
The big ideas
What you need to know
charset first
<meta charset="utf-8"> makes Hindi, emojis and ₹ symbols show correctly. Put it near the top of <head>.
viewport for mobile
Without the viewport tag, phones render your page like a tiny desktop site and users have to pinch-zoom.
description for search
The meta description is often the grey text under your link in Google results. Keep it short and clear.
Open Graph for sharing
og:title, og:description and og:image control the preview card on WhatsApp, LinkedIn and others.
See it in code
Walk through the code
1<head>2 <meta charset="utf-8" />3 <meta name="viewport" content="width=device-width, initial-scale=1" />4 <title>Aman Gupta | Frontend Developer</title>5 <meta name="description" content="I build fast, accessible websites. See my projects." />6 7 <!-- Link previews -->8 <meta property="og:title" content="Aman Gupta | Frontend Developer" />9 <meta property="og:description" content="Projects, resume and contact." />10 <meta property="og:image" content="https://aman.dev/og.png" />11 <meta property="og:url" content="https://aman.dev" />12 <meta name="twitter:card" content="summary_large_image" />13</head>1/4charset makes symbols like ₹ show correctly. viewport makes phones use their real width.
og:image needs a full URL, not a relative path, because the app fetching the preview isn't on your site.
Save yourself the pain
Common mistakes
Oops
Forgetting the viewport tag and then fighting media queries for hours.
Do this instead
Add the viewport meta tag first. Media queries only behave on phones once it's there.
Oops
Using a relative path like /og.png for og:image.
Do this instead
Use the full https:// URL so WhatsApp and LinkedIn can fetch it.
Your mission
Make your link look good on WhatsApp
Quick check
Your site looks zoomed out and tiny on phones even though you wrote media queries. What's most likely missing?
Go deeper
- 1Add a proper `viewport`, `description` and Open Graph tags to a page. Test the result on both a successful path and an invalid or unexpected input.
- 2Test how your page preview looks when shared using a social debugger tool. Validate your understanding by applying it in a small practical example.
- 3Learn the difference between SEO meta tags and social-sharing meta tags.
More topics at this stop
Semantic tags
Forms
Input types
Validation
Tables
Accessibility (ARIA)
Audio
Video
SVG
Canvas
SEO basics
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
