What is the viewport meta tag?

The viewport meta tag controls how a webpage scales and displays on mobile devices.

What are Meta Tags in HTML?

Q: What are meta tags in HTML?

Meta tags are HTML elements that provide information about a webpage to browsers, search engines, and social media platforms.

Q: Where are meta tags placed?

Meta tags are placed inside the head section of an HTML document.

Q: Why are meta tags important?

Meta tags improve SEO, responsive design, browser behavior, accessibility, and social media sharing.

What are meta tags?

Meta tags are HTML elements that provide information about a webpage.

They are not usually visible on the page itself, but browsers, search engines, and social media platforms read them.

💡 In simple terms

Meta tags tell browsers and search engines important details about your webpage.

Where are meta tags placed?

Meta tags are placed inside the <head> section of an HTML document.

index.html

<head>

  <meta charset="UTF-8">

  <meta
    name="description"
    content="Learn HTML for beginners."
  >

</head>

Why are meta tags important?

Meta tags help:

Search engines understand pages
Websites display correctly on mobile devices
Social media generate previews
Browsers handle content properly
Improve SEO and accessibility

📌 Real-world fact

Every major website uses meta tags for SEO, responsiveness, social sharing, and browser compatibility.

Common meta tags

1. Character encoding

The charset meta tag tells browsers which character encoding to use.

charset.html

<meta charset="UTF-8">

UTF-8 supports most characters and symbols used worldwide.

2. Viewport meta tag

The viewport tag controls how pages scale on mobile devices.

viewport.html

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

Without this tag, websites may appear zoomed out on phones.

3. Meta description

The description tag provides a short summary of the page.

description.html

<meta
  name="description"
  content="Learn HTML and CSS from scratch."
>

Search engines often display this text in search results.

4. Keywords meta tag

The keywords tag lists page-related keywords.

keywords.html

<meta
  name="keywords"
  content="html, css, javascript"
>

⚠️ Important

Most modern search engines no longer rely heavily on the keywords meta tag for rankings.

5. Robots meta tag

The robots tag controls whether search engines should index a page.

robots.html

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

Common values include:

index — allow indexing
noindex — prevent indexing
follow — follow links
nofollow — do not follow links

6. Open Graph meta tags

Open Graph tags control how pages appear when shared on social media.

open-graph.html

<meta
  property="og:title"
  content="Learn HTML"
>

<meta
  property="og:image"
  content="thumbnail.png"
>

Platforms like Facebook, LinkedIn, and Discord use these tags.

Meta tags and SEO

Meta tags help search engines understand content and improve search result previews.

Important SEO-related tags include:

Title tag
Description meta tag
Canonical tag
Robots meta tag
Open Graph tags

Complete example

head.html

<head>

  <meta charset="UTF-8">

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

  <meta
    name="description"
    content="Learn web development."
  >

  <title>
    My Website
  </title>

</head>

Common beginner mistakes

Forgetting the viewport tag
Writing very long descriptions
Using duplicate meta descriptions
Ignoring Open Graph tags
Placing meta tags outside the head section

Summary

Meta tags provide important information about webpages to browsers, search engines, and social platforms.

They improve:

SEO
Mobile responsiveness
Social sharing previews
Browser behavior
Accessibility

Every modern website uses meta tags as part of professional web development.

Ready to master HTML properly? Our free course covers meta tags, semantic HTML, forms, accessibility, and modern SEO step-by-step.