Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML पेज में title टैग का उपयोग कैसे करें?


परिचय

शीर्षक सभी HTML दस्तावेज़ों में आवश्यक है। दस्तावेज़ का शीर्षक परिभाषित करने के लिए, <title> टैग का उपयोग करें। दस्तावेज़ का शीर्षक वेब ब्राउज़र टूलबार पर और खोज इंजन परिणामों में HTML पेज के लिए प्रदर्शित शीर्षक में दिखाई देता है।

महत्वपूर्ण नोट

<title>...</title> टैग को <head>...</head> टैग के अंदर जोड़ना चाहिए।

उदाहरण

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML Title Tag</title> 
    </head> 
    <body> 
        <p>दस्तावेज़ों का कंटेंट यहाँ जोड़ा जाता है।</p> 
    </body> 
</html>

आउटपुट

दस्तावेज़ों का कंटेंट यहाँ जोड़ा जाता है।

<title> टैग क्यों महत्वपूर्ण है?

क्षेत्रभूमिका
ब्राउज़र टैबटैब में शीर्षक दिखाता है (पहचान के लिए महत्वपूर्ण)
बुकमार्क/फेवरेट्सबुकमार्क नाम के रूप में उपयोग होता है
खोज इंजन (SEO)सबसे महत्वपूर्ण ऑन-पेज SEO फैक्टर; SERP में शीर्षक लिंक
सोशल शेयरिंगओपन ग्राफ के बिना फॉलबैक शीर्षक
ब्राउज़र हिस्ट्रीइतिहास प्रविष्टियों में पहचान
स्क्रीन रीडर्सपहली चीज़ घोषित की जाती है

सर्वोत्तम अभ्यास

1. लंबाई

  • आदर्श: 50-60 कैरेक्टर्स (Google आमतौर पर ~600 पिक्सेल प्रदर्शित करता है)
  • अधिकतम: ~65-70 कैरेक्टर्स कटने से पहले
  • न्यूनतम: ~30 कैरेक्टर्स विवरणात्मक होने के लिए

2. संरचना

<!-- पैटर्न: प्राथमिक कीवर्ड - द्वितीयक कीवर्ड | ब्रांड नाम -->
<title>HTML ट्यूटोरियल - वेब विकास सीखें | TutorialPoint</title>

<!-- या -->
<title>उत्पाद नाम - श्रेणी | स्टोर नाम</title>

3. प्रत्येक पेज के लिए अद्वितीय

<!-- खराब: सभी पेजों पर समान -->
<title>मेरी वेबसाइट</title>

<!-- अच्छा: प्रत्येक पेज अद्वितीय -->
<title>होम - TutorialPoint</title>
<title>HTML ट्यूटोरियल - TutorialPoint</title>
<title>CSS गाइड - TutorialPoint</title>
<title>संपर्क करें - TutorialPoint</title>

4. महत्वपूर्ण कीवर्ड्स पहले

<!-- अच्छा -->
<title>HTML सीखें - शुरुआती के लिए पूर्ण गाइड | TutorialPoint</title>

<!-- कम प्रभावी -->
<title>TutorialPoint - HTML सीखें - शुरुआती के लिए पूर्ण गाइड</title>

विशेष कैरेक्टर्स

<!-- HTML एंटिटीज़ उपयोग करें -->
<title>Tom & Jerry: कार्टून श्रृंखला</title>
<title>कीमत < ₹1000 | शॉप</title>
<title>"उद्धरण" और 'अपोस्ट्रोफी' | साइट</title>

डायनामिक टाइटल (JavaScript)

<script>
    // पेज शीर्षक अपडेट करें
    document.title = 'नया शीर्षक - ' + document.title;
    
    // टैब विज़िबिलिटी के आधार पर
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '👋 वापस आएं! - ' + originalTitle;
        } else {
            document.title = originalTitle;
        }
    });
</script>

सामान्य गलतियाँ

  • <title> टैग गायब
  • डुप्लीकेट टाइटल्स कई पेजों पर
  • बहुत लंबा (कट जाता है) या बहुत छोटा (अनावश्यक)
  • कीवर्ड स्टफिंग: "HTML HTML HTML ट्यूटोरियल गाइड सीखें"
  • ब्रांड नाम पहले रखना
  • विशेष कैरेक्टर्स एन्कोड न करना

SEO टिप्स

  1. प्राथमिक कीवर्ड शुरुआत के करीब रखें
  2. ब्रांड नाम अंत में (होमपेज पर पहले)
  3. पाइप (|) या डैश (-) सेपरेटर उपयोग करें
  4. क्लिक-थ्रू दर (CTR) के लिए लिखें, केवल कीवर्ड्स के लिए नहीं
  5. मोबाइल SERP के लिए टेस्ट करें (छोटा प्रदर्शन)

सत्यापन टूल्स

  1. HTML में <cite> टैग से वर्क टाइटल कैसे मार्क करें? HTML में <cite> टैग से वर्क टाइटल कैसे मार्क करें?

    कृति का शीर्षक दर्शाना किसी किताब, गाने, पेंटिंग, फिल्म आदि के शीर्षक (वर्क टाइटल) को मार्क करने के लिए <cite>…</cite> टैग उपयोग करें। यह साइटेशन (उद्धरण स्रोत) दर्शाता है। उदाहरण <!DOCTYPE html> <html> <head> <title>HTML cite tag</title> </hea

  1. HTML पेज में एनिमेटेड इमेज (GIF) कैसे उपयोग करें? HTML पेज में एनिमेटेड इमेज (GIF) कैसे उपयोग करें?

    एनिमेटेड GIF इमेज एनिमेटेड इमेज GIF फॉर्मेट (Graphics Interchange Format) में होती हैं। HTML में <img> टैग के src एट्रिब्यूट में GIF का URL दें। height और width एट्रिब्यूट्स से आकार सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <title>Animated Image</title> &

  1. HTML में <datalist> टैग का उपयोग कैसे करें? HTML में <datalist> टैग का उपयोग कैसे करें?

    HTML <datalist> टैग <input> एलिमेंट के लिए विकल्पों का एक सेट निर्दिष्ट करता है। आपको एक आईडी भी जोड़नी होगी। <datalist>...</datalist> टैग के अंदर <option>...</option> टैग का उपयोग करें।उदाहरणHTML में <datalist> टैग का उपयोग करने के लिए निम्न कोड चलाएं:<!