HTML Meta Tags Table
| Tag | Controls | Field note |
|---|---|---|
charset="utf-8" | Character encoding | First line in head - wrong or late charset means mojibake |
name="viewport" | Mobile scaling | width=device-width, initial-scale=1 makes responsive work; never user-scalable=no |
name="description" | Search snippet copy | Not a ranking factor - but it IS the ad text Google may show |
name="robots" | Crawler instructions | noindex removes from search; nofollow only affects links ON this page |
property="og:*" | Social card preview | og:title/og:image drive link unfurls in chat apps - no image, no card |
name="theme-color" | Browser chrome tint | Colors the mobile address bar - cheap brand win |
http-equiv="refresh" | Timed reload / redirect | SEO-hostile for redirects - a real 301 beats meta refresh every time |
link rel="canonical" | The preferred URL | Technically a link tag doing meta work - merges duplicate URLs for search |
Meta tags are the page's metadata API for machines: search crawlers, chat apps generating link previews, and mobile browsers all read the head before a single pixel renders. The visible page is for people; the meta head is the same page described for software.
Bottom line: three tags are non-negotiable on every page - charset (without it, non-ASCII text garbles), viewport (without it, phones render a zoomed-out desktop layout), and description (the organic ad copy search engines may show). Everything else is situational, and the situational ones decide clicks: og:image is what your shared link looks like in a chat window.
The honest part: meta is NOT a ranking lever. description does not boost rankings; robots can only withhold. The tags that earn their keep work by removal of breakage (charset, viewport) or by presentation (description, og:, theme-color) - none of them substitute for content.
How to use
- Start every page with the same three lines: charset utf-8, viewport width=device-width initial-scale=1, then description under 160 characters.
- Add og:title, og:description and og:image (1200x630) to any page likely to be shared - chat apps unfurl cards from these, not from your page design.
- De-index with meta name=robots content=noindex on thin utility pages you want crawled-but-unlisted - the header equivalent (X-Robots-Tag) covers non-HTML files.
Frequently asked questions
Does the meta description affect search rankings?
Not directly - Google has confirmed the description is not a ranking factor, and often rewrites it anyway to match the query. What it does control: when the query matches and Google keeps your text, that snippet is your advertisement on the results page - a specific, benefit-led description lifts click-through at the same ranking position. Write it like ad copy (what the user gets, in under 160 characters), not like a keyword list, and accept that Google may substitute its own extraction regardless.
What is the difference between meta robots and a robots.txt file?
robots.txt gates CRAWLING (whether the bot may fetch the URL at all); meta robots gates INDEXING (whether a fetched page may appear in results). The trap: blocking a URL in robots.txt does NOT remove it from search results - Google can list the URL with no snippet because it never read the page. To de-index, let crawlers fetch the page and use meta name=robots content=noindex, or return X-Robots-Tag: noindex as a header for non-HTML resources.
Why is my shared link showing the wrong preview image?
Chat and social apps build cards exclusively from Open Graph tags - og:title, og:description, og:image - and cache them aggressively. Wrong image usually means: no og:image (the app guessed), an image below the size minimum, or a STALE cache from before you fixed the tags. The fixes: 1200x630 or larger og:image with an absolute URL, then run the page through the platform's card debugger (Facebook Sharing Debugger, Twitter card validator) to force a re-scrape - without that, the old preview persists for days.
Is meta refresh still a valid redirect?
It works, but it is the worst option on the menu. Search engines treat meta refresh redirects as suspect (a legacy spam pattern), the delay flashes intermediate content to users, and the back-button behavior confuses browsers. Server-side 301 (permanent) or 302 (temporary) headers are the correct tool - they carry SEO signals and never render. Meta refresh remains acceptable for one narrow case: a timed auto-reload of a page that legitimately updates itself (a scoreboard), not for navigation.