Mastering HTML Meta Tags: A Practical Crash Course

Nerd Cafe | نرد کافه

1. What Meta Tags Are

Meta tags provide metadata about a webpage. They go inside the <head> section and are not visible on the page, but browsers, search engines, and social media use them.

Basic structure:

<head>
  <meta name="description" content="Learn HTML meta tags quickly">
</head>

Meta tags help with:

SEO 🔎
Browser behavior 🌐
Character encoding 🔤
Mobile responsiveness 📱
Social sharing 🔗

2. Essential Meta Tags

1. Charset (Always Include)

Defines text encoding.

<meta charset="UTF-8">

Why important:

Supports international characters
Prevents broken text

UTF-8 is the standard.

2. Viewport (For Mobile)

Makes your site responsive.

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

Without this:

Mobile layout breaks
Text looks tiny

3. Description (SEO)

Search engines use this snippet.

<meta name="description" content="Free tutorial for learning HTML meta tags.">

Good description:

150–160 characters
Clear summary

Example:

<meta name="description" content="Beginner-friendly HTML meta tags tutorial with examples and best practices.">

4. Keywords (Mostly Obsolete)

<meta name="keywords" content="HTML, meta tags, tutorial">

Search engines like Google ignore this now.

Mostly unnecessary.

5. Author

Defines page author.

<meta name="author" content="John Doe">

Optional.

3. HTTP-Equiv Meta Tags

Control browser behavior.

Refresh Page

<meta http-equiv="refresh" content="5">

Refreshes every 5 seconds.

Redirect example:

<meta http-equiv="refresh" content="3;url=https://example.com">

Redirect after 3 seconds.

4. SEO Meta Tags

Important for search ranking.

Robots

Controls search engine crawling.

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

Options:

Value

Meaning

index

Allow indexing

noindex

Block indexing

Follow links

nofollow

Ignore links

Example:

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

Used when sharing links.

Open Graph (Facebook, Discord, LinkedIn)

<meta property="og:title" content="HTML Meta Tags Tutorial">
<meta property="og:description" content="Learn meta tags fast.">
<meta property="og:image" content="https://example.com/image.png">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

Controls preview card.

Twitter Cards

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML Meta Tags Tutorial">
<meta name="twitter:description" content="Learn meta tags quickly.">
<meta name="twitter:image" content="https://example.com/image.png">

6. Complete Example (Realistic Template)

This is a good real-world <head> template:

<head>

  <!-- Basic -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO -->
  <title>HTML Meta Tags Tutorial</title>
  <meta name="description" content="Complete beginner guide to HTML meta tags with examples.">
  <meta name="robots" content="index, follow">
  <meta name="author" content="John Doe">

  <!-- Open Graph -->
  <meta property="og:title" content="HTML Meta Tags Tutorial">
  <meta property="og:description" content="Learn meta tags quickly.">
  <meta property="og:image" content="https://example.com/image.png">
  <meta property="og:url" content="https://example.com">
  <meta property="og:type" content="website">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML Meta Tags Tutorial">
  <meta name="twitter:description" content="Learn meta tags quickly.">
  <meta name="twitter:image" content="https://example.com/image.png">

</head>

7. Meta Tag Syntax Types

There are three main types:

Type 1 — Charset

<meta charset="UTF-8">

Type 2 — Name + Content

<meta name="description" content="Example">

Used for:

description
author
robots
viewport

Type 3 — Property + Content

<meta property="og:title" content="Example">

Used for:

Open Graph

8. Best Practices

Always include:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="...">

Put meta tags at top of `<head>`

Good:

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

Bad:

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

Keep descriptions unique

Each page should have its own description.

9. Common Beginner Mistakes

Missing viewport

Breaks mobile layout.

Too long descriptions

Bad:

<meta name="description" content="Very very long paragraph...">

Multiple descriptions

Wrong:

<meta name="description" content="A">
<meta name="description" content="B">

💖 Support Our Work

If you find this post helpful and would like to support my work, you can send a donation via TRC-20 (USDT). Your contributions help us keep creating and sharing more valuable content.

TRC-20 Address: TAAVVf9ZxUpbyvTa6Gd5SGPmctBdy4PQwf

Thank you for your generosity! 🙏

Channel Overview

🌐 Website: www.nerd-cafe.ir

📺 YouTube: @nerd-cafe

🎥 Aparat: nerd_cafe

📌 Pinterest: nerd_cafe

📱 Telegram: @nerd_cafe

📝 Blog: Nerd Café on Virgool

💻 GitHub: nerd-cafe

PreviousHTML Basics Crash Course Nextrobots.txt Crash Course

Last updated 1 day ago

hashtag1. What Meta Tags Are

hashtag2. Essential Meta Tags

hashtag1. Charset (Always Include)

hashtag2. Viewport (For Mobile)

hashtag3. Description (SEO)

hashtag4. Keywords (Mostly Obsolete)

hashtag5. Author

hashtag3. HTTP-Equiv Meta Tags

hashtagRefresh Page

hashtag4. SEO Meta Tags

hashtagRobots

hashtagExample:

hashtag5. Social Media Meta Tags

hashtagOpen Graph (Facebook, Discord, LinkedIn)

hashtagTwitter Cards

hashtag6. Complete Example (Realistic Template)

hashtag7. Meta Tag Syntax Types

hashtagType 1 — Charset

hashtagType 2 — Name + Content

hashtagType 3 — Property + Content

hashtag8. Best Practices

hashtagAlways include:

hashtagPut meta tags at top of <head>

hashtagKeep descriptions unique

hashtag9. Common Beginner Mistakes

hashtagMissing viewport

hashtagToo long descriptions

hashtagMultiple descriptions

hashtag💖 Support Our Work

hashtagChannel Overview

1. What Meta Tags Are

2. Essential Meta Tags

1. Charset (Always Include)

2. Viewport (For Mobile)

3. Description (SEO)

4. Keywords (Mostly Obsolete)

5. Author

3. HTTP-Equiv Meta Tags

Refresh Page

4. SEO Meta Tags

Robots

Example:

5. Social Media Meta Tags

Open Graph (Facebook, Discord, LinkedIn)

Twitter Cards

6. Complete Example (Realistic Template)

7. Meta Tag Syntax Types

Type 1 — Charset

Type 2 — Name + Content

Type 3 — Property + Content

8. Best Practices

Always include:

Put meta tags at top of `<head>`

Keep descriptions unique

9. Common Beginner Mistakes

Missing viewport

Too long descriptions

Multiple descriptions

💖 Support Our Work

Channel Overview