Meta tags are special HTML tags inside the <head> section that provide metadata (information about the webpage) to browsers, search engines, and other services.
They don’t display on the page but are important for SEO, accessibility, and browser behavior.

1. Basic Syntax

<meta name="description" content="This is my webpage description.">
  • name → Type of metadata (e.g., description, keywords, author).
  • content → Value for the metadata.

2. Common Types of Meta Tags

A) SEO-Related Meta Tags

TagPurposeExample
DescriptionShort summary for search engines<meta name="description" content="Learn HTML from basics to advanced.">
Keywords (deprecated)List of keywords (no longer used by Google)<meta name="keywords" content="HTML, CSS, JavaScript">
AuthorName of the page author<meta name="author" content="John Doe">

B) Browser Behavior

TagPurposeExample
CharsetCharacter encoding<meta charset="UTF-8">
ViewportControls mobile responsiveness<meta name="viewport" content="width=device-width, initial-scale=1.0">
RefreshAuto-refresh or redirect<meta http-equiv="refresh" content="5; url=https://example.com">

C) Social Media & Sharing

TagPurposeExample
Open Graph (Facebook)Controls how content appears when shared<meta property="og:title" content="My Website">
Twitter CardsControls Twitter preview<meta name="twitter:card" content="summary_large_image">

3. Example HTML with Meta Tags

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A beginner's guide to HTML.">
  <meta name="author" content="John Doe">
  <meta property="og:title" content="Learn HTML">
  <meta property="og:description" content="Master HTML step-by-step.">
  <meta property="og:image" content="thumbnail.jpg">
  <title>HTML Meta Tags Example</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

4. Why Meta Tags Are Important

  • SEO → Helps search engines understand your content.
  • Social Sharing → Controls link preview on platforms like Facebook & Twitter.
  • Mobile Optimization → Makes websites responsive with viewport settings.
  • Browser Instructions → Control refresh, redirects, and encoding.
Tags:

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *