What are meta tags in HTML?
Meta tags (<meta>) are elements inside the <head> block that contain metadata, service information about the page: encoding, description, author, keywords, responsiveness settings, instructions for search bots, and so on.
They are not shown to the user, but play a key role in the site's SEO, indexing, rendering, and technical correctness.
1. Where meta tags are placed
All meta tags are always located inside <head>, for example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Buy Nike sneakers with nationwide delivery">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>2. Main types of meta tags
1. Page encoding
<meta charset="UTF-8">Tells the browser what encoding the document is written in. Without it, characters may display as corrupted, unreadable symbols.
2. Page description (for SEO)
<meta name="description" content="Online store of sports footwear. Nationwide delivery.">This is a short page description that search engines often show in the snippet below the title. It should be unique and 140-160 characters long.
3. Keywords (deprecated tag)
<meta name="keywords" content="footwear, sneakers, Nike, Adidas">It used to be used by search engines to analyze the page's topic, but now it does not affect SEO. It can be used for internal analytics.
4. Responsiveness settings (viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">Makes the site responsive on mobile devices:
width=device-width: the page width equals the screen width,initial-scale=1.0: 100% scale.
Without this, the site will "shrink" on phones.
5. Author and rights
<meta name="author" content="Jane Doe">
<meta name="copyright" content="© 2025 Oleh Design">Allow you to specify the site's owner or developer.
6. Controlling search bot behavior
<meta name="robots" content="index, follow">Instructs search engines:
index: index the page,follow: follow links,noindex/nofollow: forbid.
Example:
<meta name="robots" content="noindex, nofollow">Completely excludes the page from indexing.
7. Tags for social networks (Open Graph, Twitter Cards)
Allow social networks (Facebook, Telegram, Twitter) to correctly display the link preview.
<meta property="og:title" content="My blog about psychology">
<meta property="og:description" content="Honest writing about relationships and self-esteem.">
<meta property="og:image" content="https://site.com/preview.jpg">
<meta property="og:url" content="https://site.com">3. How browsers and search engines use meta tags
- Browser: for correctly rendering text, scaling, icons, language.
- Search engines: for analyzing the topic, description, and ranking.
- Social networks: for creating the link preview (title, image, description).
Summary:
| Meta tag | Purpose |
|---|---|
<meta charset> | Text encoding |
<meta name="description"> | Page description (for SEO) |
<meta name="viewport"> | Responsiveness for mobile devices |
<meta name="robots"> | Controls indexing |
<meta name="author"> | Page author |
<meta property="og:*"> | Preview for social networks |
In simple terms: Meta tags are the "page's passport": they tell the browser and search engines what kind of document this is, how to display it, and who needs it. Without them, a page can be unclear to search engines and inconvenient for users.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.