HTML Page Title

अब हम सीखने जा रहे हैं एक छोटा लेकिन बहुत important लेसन — जो हर वेबसाइट का “नाम” और पहचान बनाता है

Page Title क्या होता है?

HTML Page Title आपकी वेबसाइट का नाम या शीर्षक (Title) होता है जो ब्राउज़र टैब, बुकमार्क, और सर्च रिज़ल्ट में दिखाई देता है। यह <title> टैग के अंदर लिखा जाता है और SEO (Search Engine Optimization) के लिए भी बहुत ज़रूरी होता है।

सीधा मतलब: 👉 Title बताता है कि आपकी वेबपेज का टॉपिक क्या है।

HTML Title कहाँ लिखा जाता है?

Title टैग हमेशा HTML के <head> सेक्शन के अंदर लिखा जाता है।

<head>
  <title>My Awesome Website</title>
</head>

Browser Tab में Title का Example

जब आप यह HTML चलाते हैं

<!DOCTYPE html>
<html>
<head>
  <title>HTML Page Title Example</title>
</head>
<body>
  <h1>Welcome to My Website!</h1>
</body>
</html>

तो Browser Tab में इस तरह दिखाई देगा " 📎 HTML Page Title Example "

Page Title की ज़रूरत क्यों है?

कारण (Reason)	विवरण (Description)
Navigation में आसान	Browser tabs और bookmarks में पहचान के लिए इस्तेमाल होता है, जिससे यूज़र को आसानी होती है।
SEO के लिए जरूरी	Google search results में इसी से पता चलता है कि पेज किस विषय या कंटेंट के बारे में है, जो रैंकिंग में सहायक है।
Social Share में दिखता है	जब कोई पेज social media पर शेयर किया जाता है, तो यह title ही preview में प्रमुखता से आता है।
User Experience बेहतर	यूज़र जल्दी और स्पष्ट रूप से समझ जाता है कि वह किस पेज पर है, जिससे उसका अनुभव (experience) बेहतर होता है।

Example 1: Simple Title Example

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <title>मेरा पहला HTML Page</title>
</head>
<body>
  <h1>यह मेरा पहला HTML पेज है</h1>
</body>
</html>

Output: Browser Tab में लिखा दिखाई देगा → मेरा पहला HTML Page

Example 2: English + Hindi Mix Title (SEO Friendly)

<title>HTML Page Title Example - आसान हिंदी में समझिए</title>

यह SEO के लिए भी अच्छा है क्योंकि इसमें “HTML Page Title” keyword और “हिंदी में समझिए” जैसी human-friendly phrase दोनों शामिल हैं।

Example 3: Website Brand Name जोड़ना

अक्सर websites अपने page title में brand name जोड़ती हैं ताकि पहचान बनी रहे।

<title>HTML Tutorial for Beginners | CodeKeet Academy</title>

यहां “HTML Tutorial for Beginners” बताता है content क्या है, और “CodeKeet Academy” brand name है।

Page Title की Length कितनी होनी चाहिए?

SEO के हिसाब से:

60 characters से ज़्यादा लंबा न हो
पहला keyword शुरू में हो
साफ़ और पढ़ने में आसान हो

Example:

Learn HTML in Hindi | Complete Step-by-Step Tutorial

Avoid Example:

Learn HTML Tags, Elements, Attributes, Forms, CSS, JavaScript, Tables, Links, Multimedia...

बहुत लंबा और confusing)

Title Tag कहाँ दिखता है?

जगह (Location)	उदाहरण (Example)
Browser Tab	टैब पर नाम (Name on the tab)
Bookmark	जब आप पेज को सेव करते हैं (When you save the page)
Google Search	Search result में Title लिंक के रूप में (As the Title link in the Search result)
Social Media Share	Shared link preview में Title के रूप में (As the Title in the Shared link preview)

Example 4: Title के साथ पूरा Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Learn HTML Page Title | हिंदी में आसान उदाहरण</title>
</head>
<body>
  <h1>Welcome to HTML Title Tag Tutorial</h1>
  <p>यह पेज बताता है कि HTML में Page Title कैसे सेट किया जाता है।</p>
</body>
</html>

Output: Browser Tab में Title दिखेगा — Learn HTML Page Title | हिंदी में आसान उदाहरण

Tips for Writing Effective Page Titles

सबसे जरूरी keyword पहले लिखें
Title में brand name अंत में जोड़ें
इसे छोटा और अर्थपूर्ण रखें
हर पेज का Title अलग रखें
“Home”, “About”, “Contact” जैसे पेज के लिए unique title दें

Example:

Home → Welcome to CodeKeet | Learn Web Development
About → About CodeKeet - Learn to Build Modern Websites
Contact → Contact CodeKeet - Get in Touch

Bonus Tip: Dynamic Title with JavaScript

कभी-कभी आप चाहते हैं कि title runtime पर बदले। जैसे loading के समय “Please wait…” दिखाना।

<script>
document.title = "Loading... Please Wait!";
setTimeout(() => {
  document.title = "Welcome to My Website!";
}, 3000);
</script>

3 सेकंड बाद Title अपने आप बदल जाएगा।