Suggest an editImprove this articleRefine the answer for “What are meta tags in HTML?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**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). **Key point:** They are not shown to the user, but play a key role in the site's SEO, indexing, rendering, and technical correctness.Shown above the full answer for quick recall.Answer (EN)Image**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: ```html <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** ```html <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)** ```html <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)** ```html <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)** ```html <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** ```html <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** ```html <meta name="robots" content="index, follow"> ``` Instructs search engines: - `index`: index the page, - `follow`: follow links, - `noindex` / `nofollow`: forbid. Example: ```html <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. ```html <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**.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.