ब्रेडक्रम्ब Schema और HTML जेनरेटर

पेज नामों और URL की सूची से BreadcrumbList स्ट्रक्चर्ड डेटा और एक्सेसिबल ब्रेडक्रम्ब HTML (nav, ol, aria-current) बनाएं। कॉपी करने को तैयार JSON-LD।

ब्रेडक्रंब आइटम (होम पेज से मौजूदा पेज तक)
1.
2.
3.
JSON-LD (BreadcrumbList)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Cold Brew Guide",
      "item": "https://example.com/blog/cold-brew"
    }
  ]
}
</script>
HTML
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>
JSON-LD schema.org BreadcrumbList के अनुसार है; आख़िरी आइटम मौजूदा पेज है इसलिए उसका URL छोड़ा जा सकता है। HTML सुलभता के लिए <nav> के अंदर क्रमित सूची और aria-current="page" इस्तेमाल करता है; विभाजकों को CSS से स्टाइल करें।

ब्रेडक्रम्ब जेनरेटर क्या है?

यह जेनरेटर ब्रेडक्रम्ब आइटम की सूची (नाम + URL, होम पेज से मौजूदा पेज तक) को दो आउटपुट में बदलता है: सर्च इंजन के लिए schema.org BreadcrumbList JSON-LD और विज़िटर के लिए एक्सेसिबल HTML मार्कअप।

ब्रेडक्रम्ब जेनरेटर का उपयोग कैसे करें

  1. आइटम एडिट करें: हर स्तर के लिए एक पंक्ति, उसके नाम और absolute URL के साथ।
  2. पंक्तियाँ जोड़ें या हटाएं; आख़िरी पंक्ति मौजूदा पेज है और उसमें URL न हो तो चलेगा।
  3. नेविगेशन एलिमेंट का aria-label अपनी साइट की भाषा में सेट करें।
  4. JSON-LD ब्लॉक और HTML अपने पेज में कॉपी करें।

उदाहरण

इनपुट
Home → Blog → Cold Brew Guide
आउटपुट
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>

ब्रेडक्रम्ब जेनरेटर का उपयोग कब करें

इसे उन पेज के लिए इस्तेमाल करें जो ब्रेडक्रम्ब ट्रेल दिखाते हैं, ख़ासकर शॉप या डॉक्यूमेंटेशन जैसी गहरी साइट संरचनाओं में। स्ट्रक्चर्ड डेटा पेज पर दिखने वाले ब्रेडक्रम्ब से मेल खाना चाहिए। विभाजक चिह्नों को मार्कअप में अक्षर जोड़ने के बजाय CSS से स्टाइल करें।

ब्रेडक्रम्ब जेनरेटर कैसे काम करता है

हर ग़ैर-ख़ाली पंक्ति 1 से शुरू position, नाम और आइटम URL (ख़ाली होने पर छोड़ा गया) वाला ListItem बनती है। HTML एक <nav aria-label> है जिसमें क्रमबद्ध सूची है; पहले के आइटम लिंक हैं और आख़िरी आइटम को aria-current="page" मिलता है, WAI-ARIA ब्रेडक्रम्ब पैटर्न के अनुसार। नाम और URL HTML-escape होते हैं; सापेक्ष URL पर चेतावनी आती है क्योंकि स्ट्रक्चर्ड डेटा में absolute URL होने चाहिए।

सामान्य उपयोग मामले

  • कैटेगरी और प्रोडक्ट पेज पर ब्रेडक्रम्ब rich results जोड़ना।
  • डॉक्यूमेंटेशन साइट के लिए एक्सेसिबल ब्रेडक्रम्ब HTML बनाना।
  • सादे टेक्स्ट विभाजक वाले ब्रेडक्रम्ब को सिमैंटिक मार्कअप से बदलना।
  • ब्रेडक्रम्ब प्लगइन के बिना स्टैटिक साइट के लिए मार्कअप बनाना।

अक्सर पूछे जाने वाले प्रश्न

क्या आख़िरी आइटम को URL चाहिए?

नहीं। Google मौजूदा पेज के लिए item छोड़ने देता है; आप डालें तो यहाँ शामिल हो जाता है।

क्या ब्रेडक्रम्ब मार्कअप सर्च नतीजों में ब्रेडक्रम्ब की गारंटी देता है?

नहीं। यह सर्च इंजन को साइट संरचना समझने में मदद करता है और नतीजे को ब्रेडक्रम्ब-शैली पाथ के योग्य बनाता है, पर क्या दिखाना है यह Google तय करता है।

क्या एक पेज के कई ब्रेडक्रम्ब ट्रेल हो सकते हैं?

हाँ, अगर पेज कई रास्तों से पहुँचा जा सकता है तो हर ट्रेल के लिए एक BreadcrumbList जोड़ें।

और श्रेणियाँ देखें