← Back to HTML Course | Chapter 7: Advanced APIs & Features | Lesson 9 of 11

HTML SEO Basics

सोचिए आपने एक शानदार किताब पब्लिश की, लेकिन उसे बुकस्टोर की शेल्फ पर रखने के बजाय, आप उसे अपने बेसमेंट में एक बिना लेबल वाले कार्डबोर्ड बॉक्स में बंद कर देते हैं। किसी को कभी पता ही नहीं चलेगा कि वह किताब है भी। Search Engine Optimization (SEO) आपकी किताब को फ्रंट डिस्प्ले शेल्फ पर रखने जैसा है। यह आपके HTML कोड को इस तरह स्ट्रक्चर करने की कला है कि सर्च इंजन बॉट्स (जैसे Google) आपकी वेबसाइट को आसानी से पढ़, वर्गीकृत, और रैंक कर सकें। साफ, स्ट्रक्चर्ड HTML लिखकर, आप सुनिश्चित करते हैं कि जब लोग आपकी सेवाओं के लिए सर्च करें तो आपकी साइट सर्च लिस्टिंग्स में सबसे ऊपर दिखे।
Syntax
markup
<title>Page title</title>
<meta name="description" content="Page description">
<link rel="canonical" href="url">

Search Engine Optimization की बुनियादी बातें

SEO सर्च इंजन क्रॉलर्स को आपके कंटेंट को इंडेक्स करने में मदद करने के लिए अपने वेबपेज मार्कअप को व्यवस्थित करने की प्रैक्टिस है। साफ-सुथरा, सिमैंटिक और अच्छी तरह स्ट्रक्चर्ड कोड लिखना उच्च पेज रैंकिंग की नींव है।

Note: अपने कोड को साफ-सुथरे तरीके से स्ट्रक्चर करें ताकि सर्च इंजन बॉट्स के लिए आपके कंटेंट को पढ़ना और इंडेक्स करना आसान हो।
Warning: सफेद बैकग्राउंड पर सफेद टेक्स्ट छिपाने जैसी black-hat ट्रिक्स इस्तेमाल करने से बचें, क्योंकि सर्च इंजन आपकी रैंकिंग को penalize कर देंगे।

उदाहरण: Search Engine Optimization Basics

markup
<article>
  <h1>How to Bake Bread</h1>
  <p>Clean, semantic content that crawlers can index.</p>
</article>

Meta Titles और Descriptions

आपके title और meta description टैग्स सर्च लिस्टिंग्स में यूज़र्स को सबसे पहले दिखने वाली चीज़ें हैं। अपनी साइट पर विज़िटर्स को आकर्षित करने के लिए इन टैग्स को relevant कीवर्ड्स के साथ डिज़ाइन करना ज़रूरी है।

Note: अपने पेज टाइटल्स को 60 अक्षरों से कम, और डिस्क्रिप्शन्स को 160 अक्षरों से कम रखें, ताकि वे कट न जाएँ।
Warning: अपने टाइटल्स को दोहराए गए keywords की लिस्ट से भरें नहीं, क्योंकि सर्च इंजन इसे स्पैम के रूप में flag कर देंगे।

उदाहरण: Meta Titles and Descriptions

markup
<title>Best Chocolate Cake Recipe - Easy &amp; Quick</title>
<meta name="description" content="Learn to bake a moist chocolate cake in 30 minutes.">

Heading Hierarchies (h1 से h6)

सर्च इंजन आपके पेज पर महत्व की एक साफ पदानुक्रम (hierarchy) स्थापित करने के लिए headings का उपयोग करते हैं। अपने कंटेंट को headings के साथ व्यवस्थित करना बॉट्स को आपके पेजेज़ को सही तरीके से इंडेक्स करने में मदद करता है।

Note: अपने डॉक्यूमेंट के मुख्य टाइटल को दर्शाने के लिए प्रति पेज सिर्फ एक h1 टैग का उपयोग करें।
Warning: कभी भी हेडिंग लेवल्स को स्किप न करें (जैसे h1 से सीधे h3 पर जाना), क्योंकि इससे outline स्ट्रक्चर टूट जाता है।

उदाहरण: Heading Hierarchies (h1 to h6)

markup
<h1>Main Topic</h1>
<h2>Subtopic</h2>
<h3>Detail</h3>

Alt Text और Crawler Contexts

सर्च इंजन क्रॉलर्स टेक्स्ट-ओनली बॉट्स होते हैं जो इमेजेज़ नहीं देख सकते। अपने image टैग्स के अंदर विवरणात्मक alt text देना क्रॉलर्स को इमेज सर्च के लिए आपकी इमेजेज़ इंडेक्स करने देता है।

Note: साफ, विवरणात्मक alt text लिखें जिसमें relevant पेज कीवर्ड्स स्वाभाविक रूप से शामिल हों।
Warning: image या graphic जैसे जेनेरिक डिस्क्रिप्शन न लिखें, क्योंकि ये crawlers को कोई संदर्भ नहीं देते।

उदाहरण: Alt Text and Crawler Contexts

markup
<img src="cake.jpg" alt="Slice of chocolate cake with strawberries">

Canonical Links और Robots नियम

अपनी साइट पर कई URLs में एक जैसा कंटेंट इस्तेमाल करना आपकी SEO रैंकिंग को नुकसान पहुँचा सकता है। canonical link एलिमेंट सर्च इंजन को बताता है कि कौन-सा URL मास्टर कॉपी है जिसे इंडेक्स करना है, जिससे duplicate content पेनल्टी रुकती है।

Note: अपनी सर्च इंजन पेज रैंकिंग को सुरक्षित रखने के लिए हमेशा अपने head सेक्शन में एक canonical link बताएँ।
Warning: canonical URLs घोषित न करने पर सर्च बॉट्स डुप्लीकेट पेजों को इंडेक्स कर सकते हैं, जिससे आपकी सर्च रैंकिंग कमज़ोर होती है।

उदाहरण: Canonical Links and Robots Rules

markup
<head>
  <link rel="canonical" href="https://example.com/recipe">
</head>
Live Example
Related Topics
{# 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. #}

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.