What are meta tags — and why search sees them but your page doesn't
Drop any link into Telegram. A second later a card pops up under it: a title, a description, an image. Where did the messenger get all that, if none of it is on the page?
The answer is meta tags. They're short labels in a page's code — invisible to a visitor, but read by every machine: search engines, messengers, social networks. The strange and important part: meta tags are the first (and often only) thing a person learns about your page before they ever open it. So empty tags are missed visitors.
Where they live
Meta tags sit at the top of the HTML, inside <head> — the page's utility header. The user never sees it; it doesn't render on screen. It looks roughly like this:
<title>Water tracker — a glass of water every hour</title>
<meta name="description" content="A free drink-water reminder. Set a goal — the app pings you until you've had it.">
title is the blue link in Google and the browser tab title. description is the grey text under the link. That's it. These two lines decide whether a person clicks or scrolls past.
The two key pairs
There are many tags, but a beginner needs two sets.
For search — title and description. They power SEO: Google uses them to grasp the page topic and build the snippet in results.
For link previews — Open Graph (og:title, og:description, og:image). This draws the nice card when someone shares your link in Telegram, Slack, or anywhere. Without og:image your link looks bare and grey — and gets opened less.
Good news: title/description and the og: tags often duplicate each other, so you write two texts and cover both fronts.
How to write them so people click
This isn't about SEO incantations — it's about an honest promise. A few rules:
title— up to ~60 characters. Longer and Google cuts it with "…". Put the key word (what people search) near the front.description— 120–160 characters. Not a place for fluff: one sentence that says "here's what you get if you come in."- One per page. A single
titlefor the whole site is a common mistake. "About" and "Pricing" are searched with different words. og:image— a simple picture with large text. People see it small, in a feed; fine detail won't read.
Make meta tags for my siteSee the difference? The weak prompt gives generic stubs. The strong one sets lengths, the keyword, and the tone — and you get tags that actually work.
FAQ
Do meta tags affect search ranking?
title — yes, noticeably: it's one of the strongest signals of a page's topic. description barely affects rank directly, but it affects click-through — which Google does factor in. og: tags don't affect search; they're for link previews.
Do I still need the keywords tag?
No. Search engines have ignored the keywords meta tag for over a decade — people once stuffed junk into it, so it stopped counting. Don't waste time on it.
Do I have to write them by hand?
Depends on the tool. Site builders have "title" and "description" fields — those are it. In frameworks (Next.js and similar) tags are set in code. But the point is the same: every page gets a meaningful title and description.
When you deploy the site, check title and og:image before publishing — you can fix them later, but the first impression in search is already formed. It's part of the pre-launch checklist.
Short story-lessons, an agent simulator and daily practice — in our mobile app. Free.
Read next
What is the DOM — and why the page's 'source code' lies to you
What is a REST API — and why the server forgets you every time
What is React — and why you stop touching the page by hand
What is CORS — and why that console error is protection, not a bug
What is a JWT — and why the server doesn't remember you but lets you in anyway
