html
/

HTML Meta Tags: SEO, Viewport & Metadata

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Meta Tags: SEO, Viewport & Metadata

What are Meta Tags?

Meta tags provide metadata about a webpage. They are placed inside the <head> section and are not visible on the page but help browsers and search engines understand content.

Basic Syntax

HTMLRead-only
1
<meta name="description" content="This is a sample page">

Common Meta Tags

TagPurpose
<meta charset="UTF-8">Defines character encoding
<meta name="viewport">Controls responsive layout
<meta name="description">Page description for SEO
<meta name="keywords">Keywords for search engines
<meta name="author">Author of the page

Viewport Meta Tag

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

SEO Meta Tags

HTMLRead-only
1
<meta name="description" content="Learn HTML basics">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

Open Graph (Social Media)

HTMLRead-only
1
<meta property="og:title" content="My Website">
<meta property="og:description" content="Learn web development">
<meta property="og:image" content="image.jpg">

Robots Meta Tag

HTMLRead-only
1
<meta name="robots" content="index, follow">

Best Practices

  • Always include charset and viewport
  • Write meaningful descriptions for SEO
  • Avoid keyword stuffing
  • Use Open Graph for social sharing
  • Keep metadata updated and relevant

Common Mistakes

  • Missing viewport tag (breaks responsiveness)
  • Using duplicate meta descriptions
  • Overusing keywords
  • Ignoring social media meta tags

Conclusion

Meta tags are crucial for SEO, responsiveness, and sharing. Proper usage ensures better visibility and performance of web pages.

Try it yourself

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

Test Your Knowledge

Q1
of 3

Where are meta tags placed?

A
<body>
B
<head>
C
<footer>
D
<main>
Q2
of 3

Which tag ensures responsiveness?

A
charset
B
viewport
C
author
D
robots
Q3
of 3

Which meta tag is used for SEO description?

A
keywords
B
author
C
description
D
viewport

Frequently Asked Questions

Where are meta tags placed?

Inside the <head> section of the HTML document.

Why is viewport important?

It ensures the page is responsive on mobile devices.

Do meta keywords matter for SEO?

They are less important today, but still used in some cases.

Previous

html section article

Next

html seo basics

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.