← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 2 of 26

HTML Page Title

अगर आप एक book लिखते हैं, तो आप उसे front cover पर title के बिना publish नहीं करते। अगर आप ऐसा करें, तो किसी को कभी पता नहीं चलेगा कि वे क्या पकड़े हुए हैं। एक HTML page title बिल्कुल उस book cover की तरह काम करता है। यह actual page layout में खुद नहीं दिखता, लेकिन आपकी browser window के बिल्कुल ऊपर, tab पर, और Google के search results में clickable blue link के रूप में बैठता है। यह users और web crawlers दोनों को यह बताने के लिए सबसे महत्वपूर्ण line of text है कि वे बिल्कुल कहाँ पहुंचे हैं।

In this page:

  1. head Section के अंदर title Tag
  2. SEO Optimization और Titles
  3. Browser Tab Usability
  4. Accessibility और Assistive Technologies
  5. Duplicate Titles से बचना
  6. Title Format Conventions
  7. Single Page Apps के लिए Dynamic Titles
Syntax
markup 
<head>
  <title>Page title</title>
</head>

head Section के अंदर title Tag

title tag आपके webpage document का नाम define करता है। इसे हमेशा HTML structure के head tag के अंदर रहना चाहिए और इसमें सिर्फ plain, unformatted text हो सकता है।

Note: अपना webpage title संक्षिप्त, descriptive, और एक नज़र में आसानी से समझ में आने वाला रखें।
Warning: अपने head के अंदर title tag न लिखने से browsers raw filename दिखाएंगे, जो unprofessional लगता है।

उदाहरण: The title Tag Inside the head Section

markup 
<head>
  <title>My Website</title>
</head>

SEO Optimization और Titles

Search engines आपके webpage के मुख्य topic को निर्धारित करने के लिए आपके title tag का विश्लेषण करते हैं। जब लोग online keywords search करते हैं, तो Google आपके page title को search engine results pages (SERPs) पर main interactive heading के रूप में display करता है।

Note: अपने titles को 60 characters से कम रखने की कोशिश करें ताकि वे search listings में trailing dots के साथ न कटें।
Warning: अपने titles में keywords की repetitive lists कभी न ठूंसें, क्योंकि search engines spam के लिए आपकी rankings को penalize कर देंगे।

उदाहरण: SEO Optimization and Titles

markup 
<title>Best Chocolate Cake Recipe - Easy &amp; Quick</title>

Browser Tab Usability

जब users कई tabs खोलते हैं, तो page titles के लिए visible space काफी कम हो जाती है। एक अच्छी तरह design किया गया title सबसे महत्वपूर्ण और descriptive शब्दों को सबसे पहले रखता है ताकि user आपके tab को दूसरों से अलग पहचान सके, भले ही वह squeeze हो गया हो।

Note: page titles को Welcome या 'Home Page' जैसे generic शब्दों से शुरू करने से बचें।
Warning: अगर आपका title बहुत लंबा है, तो mobile devices या busy tab strips पर key branding या context names कट जाएंगे।

उदाहरण: Browser Tab Usability

markup 
<title>Invoice #482 - Billing Dashboard</title>

Accessibility और Assistive Technologies

जब दृष्टिबाधित users कोई webpage खोलते हैं, तो screen readers हमेशा पहले title element को announce करते हैं।

यह तुरंत मिलने वाला vocal prompt उन्हें यह भरोसा दिलाता है कि उन्होंने पूरी layout body पढ़े बिना सही destination page successfully load कर लिया है।

Note: accessibility software की मदद के लिए अपनी website के हर sub-page के लिए अलग, descriptive titles लिखें।
Warning: generic, repetitive page titles का उपयोग करने से बचें जो assistive users के लिए screen reader navigation को confusing बनाते हैं।

उदाहरण: Accessibility and Assistive Technologies

markup 
<title>Checkout - Step 2 of 3</title>

Duplicate Titles से बचना

अपनी website पर कई pages में एक जैसे page titles का उपयोग करना visitors के लिए confusing है, browser bookmarking को जटिल बनाता है, और search engine crawling software पर बड़े duplicate content flags खड़े करता है।

Note: unique page titles को स्वचालित रूप से generate करने के लिए 'Specific Topic | Site Name' जैसा एक standard pattern सेट करें।
Warning: अगर search bots को duplicate titles मिलते हैं, तो वे आपके pages को नजरअंदाज कर सकते हैं या खुद generate किए गए dynamic titles दिखा सकते हैं।

उदाहरण: Avoiding Duplicate Titles

markup 
<title>Contact Us | MySite</title>

Title Format Conventions

एक आम convention है page titles को 'Page Name - Site Name' की तरह structure करना, जैसे 'PDF Converter - Cookies Cursor', जो users और search engines दोनों को browser tab या search result में specific page और overall site को जल्दी पहचानने में मदद करता है।

Note: हर एक page title में अपना site name consistent रखें ताकि search results और browser history में आपका brand पहचान में आता रहे।
Warning: हर page पर site name को पहले रखना, जैसे 'Cookies Cursor - PDF Converter - Cookies Cursor - Free Tools', असली उपयोगी page-specific information को दबा देता है।

उदाहरण: Title Format Conventions

markup 
<title>PDF Converter - Cookies Cursor</title>

Single Page Apps के लिए Dynamic Titles

single page application में, ब्राउज़र कभी पूरा page reload नहीं करता, इसलिए जब भी visible content बदलता है तो title tag को JavaScript से manually update करना पड़ता है, वरना user जो भी असल में देख रहा हो, browser tab हमेशा शुरुआती title ही दिखाता रहेगा।

Note: अपने route change handler के अंदर document.title को update करें ताकि आपके single page app में हर page को एक सटीक, unique browser tab title मिले।
Warning: single page app में title update करना भूल जाने का मतलब है कि हर bookmarked या shared link बिल्कुल वही generic title दिखाता है, जो usability और SEO दोनों को नुकसान पहुंचाता है।

उदाहरण: Dynamic Titles for Single Page Apps

markup 
<script>
  document.title = "Dashboard - My App";
</script>
Live Example
Related Topics

HTML Favicon · HTML Tables · HTML Lists · HTML Block & Inline

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Favicon Next Lesson → HTML Tables

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.