~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/10html-meta

# HTML Meta Tags

Meta tags provide metadata about your HTML document. They go in the `<head>` section and affect SEO, social sharing, and browser behavior.

## Essential Meta Tags

### Charset

Always include charset first:

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

- Defines character encoding
- Always use UTF-8 (supports all characters)
- Must be in the first 1024 bytes of the document

### Viewport

Makes your site responsive on mobile:

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
```

**Attributes:**
- `width=device-width` — Matches screen width
- `initial-scale=1.0` — No zoom on load

**Without this tag, mobile sites look zoomed out and tiny!**

### Title

Not a meta tag, but essential for SEO:

```html
<title>Page Title - Site Name</title>
```

**Best practices:**
- 50-60 characters max
- Include primary keyword
- Unique for each page
- Site name at the end

## SEO Meta Tags

### Description

Summary shown in search results:

```html
<meta name="description" content="Learn HTML from scratch with comprehensive tutorials and practical examples. Perfect for beginners." />
```

**Best practices:**
- 150-160 characters
- Include target keywords
- Make it compelling
- Unique per page

### Keywords

Less important today (search engines ignore this):

```html
<meta name="keywords" content="html, css, web development, tutorial" />
```

**Note:** Google doesn't use meta keywords for ranking. Focus on content instead.

### Robots

Controls search engine behavior:

```html

<meta name="robots" content="index, follow" />

<meta name="robots" content="noindex, nofollow" />

<meta name="robots" content="index, nofollow" />
```

## Social Media Meta Tags

### Open Graph (Facebook, LinkedIn)

```html
<meta property="og:title" content="HTML Meta Tags Guide" />
<meta property="og:description" content="Master SEO and viewport meta tags." />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/meta-tags" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="My Site" />
```

### Twitter Cards

```html
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HTML Meta Tags Guide" />
<meta name="twitter:description" content="Master SEO and viewport meta tags." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
```

## Performance Meta Tags

### Preconnect

Establish early connections to important origins:

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
```

### DNS Prefetch

Resolve DNS for likely destinations:

```html
<link rel="dns-prefetch" href="https://analytics.example.com" />
```

### Theme Color

Changes browser chrome color on mobile:

```html
<meta name="theme-color" content="#4285f4" />
```

## Complete Example

Here's a complete, production-ready `<head>`:

```html
<head>
  
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>HTML Meta Tags Guide - Web Development Tutorial</title>

<meta name="description" content="Learn how to use HTML meta tags for SEO, viewport configuration, and social media sharing. Comprehensive guide with examples." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://example.com/tutorials/meta-tags" />

<meta property="og:title" content="HTML Meta Tags Guide" />
  <meta property="og:description" content="Master SEO and viewport meta tags." />
  <meta property="og:image" content="https://example.com/images/meta-tags.jpg" />
  <meta property="og:url" content="https://example.com/tutorials/meta-tags" />
  <meta property="og:type" content="article" />

<meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="HTML Meta Tags Guide" />
  <meta name="twitter:description" content="Master SEO and viewport meta tags." />
  <meta name="twitter:image" content="https://example.com/images/meta-tags.jpg" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://cdn.example.com" crossorigin />

<meta name="theme-color" content="#4285f4" />
  <link rel="manifest" href="/manifest.json" />

<link rel="icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
```

## Meta Tags Checklist

**Essential (must have):**
- [ ] charset="UTF-8"
- [ ] viewport
- [ ] title
- [ ] description

**SEO (should have):**
- [ ] robots
- [ ] canonical
- [ ] Open Graph tags

**Social (nice to have):**
- [ ] Twitter cards
- [ ] Social images

**Performance (optional):**
- [ ] preconnect
- [ ] dns-prefetch
- [ ] theme-color

## Common Mistakes

1. **Missing viewport** — Site looks broken on mobile
2. **Duplicate titles** — Hurts SEO ranking
3. **Missing description** — Search engines generate random text
4. **No social images** — Links look empty on social media
5. **Using keywords** — Ignored by modern search engines
6. **Blocking indexing** — robots noindex by accident

No changes yet

cancel