← Back to HTML Course | Chapter 9: Reference & Advanced | Lesson 1 of 9

HTML माइक्रोडेटा और स्कीमा

फ़र्ज़ करें आप अपनी website पर कोई product list करते हुए लिखते हैं: 'हमारा PDF Converter tool zero dollars में मिलता है।' किसी इंसान के लिए यह पढ़ना आसान है। लेकिन किसी सर्च इंजन bot के लिए, यह बस शब्दों की एक random string है। bot को नहीं पता कि 'PDF Converter' कोई physical machine है, कोई book है, या software है, या zero असल में price है। HTML Microdata आपके text पर सीधे hidden, labeled stickers लगाने जैसा है। आप specific words को tag करके सर्च इंजनों को बताते हैं: 'यह एक Software Application है, यह इसका नाम है, और यह इसकी price है।' इन structured labels को जोड़कर, आप सर्च इंजनों को अपने pages को rich details—जैसे star ratings, prices, और tool descriptions—के साथ सीधे search results में दिखाने में मदद करते हैं।
Syntax
markup
<div itemscope itemtype="https://schema.org/Type">
  <span itemprop="property">Value</span>
</div>

माइक्रोडेटा क्या है?

माइक्रोडेटा एक स्पेसिफिकेशन है जिसका इस्तेमाल मशीन-रीडेबल structured data को सीधे आपके HTML के अंदर नेस्ट करने के लिए किया जाता है। यह सर्च इंजनों को आपके कंटेंट का सटीक context समझने में मदद करता है, सिर्फ बेसिक टेक्स्ट डिस्क्रिप्शन से आगे जाकर।

Note: अपनी microdata type definitions के लिए ग्लोबल स्टैंडर्ड के रूप में Schema.org vocabulary का इस्तेमाल करें।
Warning: अगर microdata साफ-सुथरे तरीके से नहीं लिखी गई, तो सर्च इंजन आपकी site के लिए rich snippets दिखाने में असफल हो सकते हैं।

उदाहरण: What is Microdata?

markup
<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Coffee Maker</span>
</div>

itemscope से Scope तय करना

itemscope attribute किसी specific structured item की सीमाएँ तय करता है। यह सर्च इंजनों को बताता है कि इस container के अंदर मौजूद सभी nested itemprop properties एक ही item से जुड़ी हैं।

Note: itemscope attribute को अपने content block के सबसे बाहरी parent container पर रखें।
Warning: अगर आप itemscope डिक्लेयर करना भूल जाते हैं, तो कोई भी nested itemprop attributes सर्च bots द्वारा ignore कर दिए जाएंगे।

उदाहरण: Defining Scope with itemscope

markup
<div itemscope>
  <span itemprop="name">Coffee Maker</span>
</div>

itemtype से Types डिक्लेयर करना

itemtype attribute एक URL के ज़रिए आपके item की exact vocabulary category (जैसे Book, Product, या SoftwareApplication) बताता है, जो सीधे Schema.org पर उसकी official definition से लिंक होता है।

Note: अपने itemtype attribute को हमेशा उसी parent element पर itemscope के साथ जोड़ें।
Warning: custom, unregistered itemtype URLs इस्तेमाल करने से सर्च इंजन आपके data को parse नहीं कर पाएंगे।

उदाहरण: Declaring Types with itemtype

markup
<div itemscope itemtype="https://schema.org/Book">
  <span itemprop="name">The Great Gatsby</span>
</div>

itemprop से Properties मार्क करना

itemprop attribute आपके item scope के अंदर specific properties (जैसे name, description, price, या operatingSystem) को लेबल करता है। सर्च इंजन इन values को सीधे अपने indexing databases में मैप करते हैं।

Note: validation errors से बचने के लिए Schema.org पर अपने itemtype के लिए allowed exact property names ज़रूर चेक करें।
Warning: बिना nesting किए एक ही scope के अंदर अलग-अलग schema types के itemprop attributes को न मिलाएं।

उदाहरण: Marking Properties with itemprop

markup
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">My App</span>
  <span itemprop="operatingSystem">Android</span>
</div>

Item Properties को नेस्ट करना

आप structured items को दूसरे items के अंदर नेस्ट कर सकते हैं। उदाहरण के लिए, एक SoftwareApplication item में एक Offer item (pricing के लिए) हो सकता है, जिसके अंदर आगे price और currency properties होती हैं, जिससे details का एक समृद्ध, hierarchical tree बनता है।

Note: सर्च रिजल्ट्स में सीधे दिखने वाली rich price details देने के लिए nested properties का इस्तेमाल करें।
Warning: सुनिश्चित करें कि आपके nested items में अपनी local boundaries डिक्लेयर करने के लिए अपने खुद के itemscope attributes हों।

उदाहरण: Nesting Item Properties

markup
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">My App</span>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">4.99</span>
    <span itemprop="priceCurrency">USD</span>
  </div>
</div>
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.