Metadata & <head>
Overview
The <meta> tags reside inside the <head> and provide 'data about data'. They are the unsung heroes of web development. Search Engines read meta tags to figure out the page's description and keywords. Social media sites (like Twitter or Slack) read specialized meta tags (Open Graph) to generate those beautiful preview cards with images when you share a link. Proper metadata configuration is the primary driver of organic traffic.
Syntax
<head>
<!-- Character encoding (CRITICAL for emojis and special characters) -->
<meta charset="UTF-8">
<!-- General SEO Metadata -->
<meta name="description" content="Learn web development for free.">
<meta name="author" content="Kartik Rai">
<!-- Instructs search engine bots to index the page and follow links -->
<meta name="robots" content="index, follow">
<title>Learn HTML | Underrated Coder</title>
</head>Common Pitfalls
- Omitting
<meta charset="UTF-8">. Without this exact tag, if a user's browser defaults to an older encoding, smart quotes, dashes, or emojis will render as unreadable garbage characters (likeé). - Using identical
<title>and<meta name="description">tags across every page of your website. Google heavily penalizes sites with duplicate metadata because it prevents the engine from indexing pages accurately.
Interview Questions
<meta> tag and standard HTML tags?Standard HTML tags represent visible content or structure. <meta> tags represent invisible configuration data specifically aimed at machines, browsers, and search engine crawlers.
Real-World Example
Configuring a page to instantly redirect the user to a new URL after 5 seconds.
<!--
The 'http-equiv' attribute simulates an HTTP response header.
This tells the browser to refresh/redirect after 5 seconds.
-->
<meta http-equiv="refresh" content="5;url=https://example.com/new-page">Check Your Knowledge
Test your understanding of Metadata & <head> with these quick questions.