Table of contents

HTML <meta> Tag

What is HTML <meta> Tag?

The HTML meta tag is used to provide metadata about a web page. Metadata includes information such as the page description, author, keywords, and character encoding. This information is not visible to users but helps browsers, search engines, and other web services understand the page content.

The HTML meta tag is always placed inside the head section of an HTML document. It plays a crucial role in SEO, accessibility, and browser behavior. Every website uses meta tags to improve search engine visibility and to control how web pages are displayed or indexed.

Syntax of the HTML <meta> Tag

plaintext
<meta name="name_of_the_meta_tag" content="value_of_the_meta_tag">

The "name" attribute specifies the type of information being provided, such as description or keywords, while the "content" attribute contains the actual data or value for that information.

Examples of HTML <meta> Tag

Example 1: Basic HTML Meta Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="description" content="Learn HTML meta tag basics and improve your website SEO with Scholar247.">
  <meta name="keywords" content="HTML, meta tag, Scholar247, SEO, web development">
  <meta name="author" content="Scholar247">
  <title>HTML Meta Tag Basics | Scholar247</title>
</head>
<body>
  <h1>Welcome to Scholar247</h1>
  <p>This page demonstrates how to use the HTML meta tag.</p>
</body>
</html>

In this example, the HTML meta tag provides information about the page description, keywords, and author. These help search engines understand what the page is about.

Example 2: SEO Optimized Meta Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="description" content="Get expert HTML tutorials and SEO optimization tips from Scholar247. Learn how to use HTML meta tags effectively.">
  <meta name="keywords" content="HTML meta tag, SEO tips, Scholar247, website optimization">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best HTML Meta Tag Practices | Scholar247</title>
</head>
<body>
  <h1>HTML Meta Tag SEO Example</h1>
  <p>This example shows optimized meta tags that improve visibility and mobile responsiveness.</p>
</body>
</html>

This example uses several HTML meta tags, including description, keywords, robots, and viewport. These tags help improve page performance, SEO ranking, and compatibility across devices.

Attributes of the HTML <meta> Tag

The HTML meta tag includes several key attributes:

• name: Specifies the type of metadata (e.g., description, keywords, author).
• content: Defines the actual information related to the name attribute.
• http-equiv: Provides HTTP header-like information (e.g., refresh, content-type).
• charset: Defines the character encoding for the document.
• viewport: Used for responsive design to control how a page is displayed on different devices.

Best Practices for HTML <meta> Tag

• Always include a meta description that clearly summarizes your page.
• Keep the meta description under 160 characters for best visibility in search results.
• Use relevant keywords naturally in your meta tags.
• Include a viewport meta tag to make your site mobile-friendly.
• Avoid keyword stuffing; write descriptions for users, not just search engines.
• Use only one meta description per page to avoid confusion for search engines.

FAQs About the HTML <meta> Tag

Q1: What is the purpose of the HTML meta tag?

The HTML meta tag provides information about a webpage, such as its description, author, keywords, and how search engines should index it.

Q2: Where should the HTML meta tag be placed?

The HTML meta tag must always be placed inside the head section of an HTML document.

Q3: Does the meta tag help in SEO?

Yes, meta tags like description and keywords help search engines understand page content, improving SEO ranking and visibility.

Q4: What are common types of meta tags?

Common types include description, keywords, author, viewport, and robots. Each serves a unique purpose for browsers and search engines.

Q5: Can I use multiple meta tags on a single page?

Yes, you can use multiple meta tags for different purposes, such as description, viewport, and character encoding. Each meta tag serves a different role.

HTML

Related Articles