Suggest an edit

Improve this article

Refine the answer for “Essential meta tags in HTML”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Meta tags** are HTML elements placed in `<head>` that send page information to browsers, search engines, and social platforms without displaying anything on the page.

## Theory

### TL;DR

- Meta tags are like shipping labels: they tell handlers (browsers, crawlers, social platforms) how to process the page, not the user
- Three tags you need on every page: `charset` (encoding), `viewport` (mobile display), `description` (search snippet)
- `og:` tags control what your link looks like when shared on social media
- `robots` controls whether search engines index a page at all

### Quick example

```html
<head>
  <meta charset="UTF-8" />

These four handle encoding, mobile display, SEO, and social sharing. That covers 90% of real-world cases.

### What meta tags actually do

The browser parses `<head>` before rendering anything. `charset` tells it how to decode the raw bytes of the file. `viewport` adjusts the rendering width. `description` gets stored but not shown to the user - search engines pick it up when they crawl the page separately.

Open Graph tags work differently. When someone shares a link, Facebook or LinkedIn makes an HTTP request to your page, reads the `<head>`, and uses `og:` values to build a preview card. The browser does not execute meta tags. It reads them as configuration.

### When to use each tag

- `charset="UTF-8"` - every page, always. Prevents character encoding bugs with non-ASCII text.
- `viewport` - every page that needs to work on mobile (that is almost everything, since mobile accounts for 60%+ of web traffic).
- `description` - every page. Shows in search results and affects click-through rate.
- `og:title`, `og:image`, `og:url` - whenever content might be shared on Facebook, LinkedIn, or similar platforms.
- `twitter:card` - same idea, Twitter's own format.
- `robots` - staging environments, admin pages, or any content you want excluded from Google.

### Comparison table

| Tag | Purpose | When to use |
|-----|---------|-------------|
| `charset="UTF-8"` | Character encoding | Every page |
| `viewport` | Mobile display | Every responsive page |
| `description` | Search result snippet | Every page |
| `og:title`, `og:image` | Social media preview card | Shareable content |
| `robots` | Search engine behavior | Staging, private pages |
| `theme-color` | Browser UI color on mobile | Branded mobile apps |

### Common mistakes

**Missing the viewport tag**

```html

<head>
  <meta charset="UTF-8" />
  <title>My Site</title>
</head>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
```

Without viewport, mobile browsers assume the page is 980px wide and scale it down. Users see a compressed layout that requires pinch-to-zoom. More than once I have seen this bug survive local testing only to appear on real phones in QA. Google's mobile-first indexing penalizes it too.

**Charset not at the top**

```html

<head>
  <title>My Site</title>
  <meta charset="UTF-8" />
</head>

<head>
  <meta charset="UTF-8" />
  <title>My Site</title>
</head>
```

The HTML spec requires charset in the first 1024 bytes. If the browser hits non-ASCII characters before reading it, it guesses the encoding. Usually wrong.

**Using keywords expecting SEO benefit**

```html

<meta name="keywords" content="headphones, wireless, audio" />

<meta name="description" content="Wireless headphones with active noise cancellation" />
```

Google dropped the keywords tag around 2009 because of spam abuse. Adding it today has zero effect on ranking. Focus on `description` and actual page content.

**Missing og:image dimensions**

```html

<meta property="og:image" content="https://example.com/image.jpg" />

<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
```

1200x630 is the standard ratio for social cards. Without dimensions, Facebook and LinkedIn may crop your image in odd ways.

### Real-world usage

- React/Next.js - use `next/head` or `react-helmet` to set unique meta tags per route (product pages get unique `og:image` and `description` based on route data)
- Express/Node.js - server renders meta tags in the HTML template based on the current route
- Static site generators (Hugo, Jekyll) - front matter defines meta values, the generator injects them into `<head>` at build time
- Staging environments - `<meta name="robots" content="noindex" />` keeps test URLs out of Google

### Follow-up questions

**Q:** Why does charset need to be in the first 1024 bytes?
**A:** The browser starts decoding bytes immediately while downloading. If it hits non-ASCII text before reading charset, it guesses the encoding. The HTML spec fixes the requirement at 1024 bytes.

**Q:** If I add `<meta name="robots" content="noindex" />`, will Google remove my page right away?
**A:** No. Google respects the tag on its next crawl, but pages already in the index may stay for days or weeks. Use Google Search Console's "Remove URL" tool for immediate removal.

**Q:** What is the difference between `og:type="product"` and `og:type="article"`?
**A:** The type tells social platforms which card template to apply. Product types can display price and availability. Article types show publication date and author. Facebook renders the preview differently based on this value.

**Q:** How would you handle meta tags in a React SPA where content changes without a page reload?
**A:** Use `react-helmet` or `next/head` to update the document head on route changes. But for social sharing, this is not enough. Social crawlers see the initial HTML, not the React-rendered state. You need server-side rendering or static generation so each route returns unique meta tags in the raw HTML response.

## Examples

### Basic page head setup

```html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Buy premium wireless headphones with 30-hour battery." />
  <title>Wireless Headphones - AudioShop</title>
</head>

```

### E-commerce product page with social sharing

```html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Premium wireless headphones with 30-hour battery. Free shipping on orders over $50." />

<meta property="og:title" content="Pro Wireless Headphones - $199" />
  <meta property="og:description" content="Premium sound, 30-hour battery, noise cancellation" />
  <meta property="og:image" content="https://example.com/headphones.jpg" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:url" content="https://example.com/products/headphones-pro" />
  <meta property="og:type" content="product" />

<meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Pro Wireless Headphones" />
  <meta name="twitter:image" content="https://example.com/headphones.jpg" />
</head>

```

When someone shares this URL on Facebook, Facebook makes an HTTP request to the page, reads these tags, and builds the preview card automatically. No JavaScript involved on their end.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts1178 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.