HTML माइक्रोडेटा
HTML माइक्रोडेटा (Microdata) एक HTML सुविधा है जो वेबपेज की सामग्री को अधिक अर्थपूर्ण और संरचित बनाने के लिए उपयोग होती है। यह वेब डेवलपर्स को अपने कंटेंट में मशीन द्वारा पढ़ी जा सकने वाली जानकारी जोड़ने की अनुमति देती है, ताकि सर्च इंजन या अन्य एप्लिकेशन उस डेटा को समझ सकें और उसका उपयोग कर सकें — जैसे कि रिच स्निपेट्स (Rich Snippets) में।
माइक्रोडेटा को समझना ऐसा है जैसे आप एक लाइब्रेरी में किताबें सटीक ढंग से श्रेणीबद्ध कर रहे हों — प्रत्येक किताब (डेटा) को उसकी विषयवस्तु, लेखक, प्रकाशन वर्ष आदि के आधार पर टैग किया जाता है। ठीक वैसे ही, HTML माइक्रोडेटा वेबपेज पर हर जानकारी को उसके सटीक अर्थ के साथ टैग करता है।
आप इसे पोर्टफोलियो वेबसाइट में व्यक्ति की प्रोफ़ाइल जानकारी टैग करने के लिए, ब्लॉग में लेखक व दिनांक टैग करने के लिए, ई-कॉमर्स साइट में उत्पाद, कीमत व ब्रांड टैग करने के लिए, समाचार साइट में लेख व प्रकाशन की तारीख के लिए, या सोशल प्लेटफॉर्म में उपयोगकर्ता व पोस्ट विवरण के लिए उपयोग कर सकते हैं।
इस संदर्भ में, आप सीखेंगे कि माइक्रोडेटा कैसे लिखा जाता है, कौन से प्रमुख टैग और एट्रिब्यूट्स इस्तेमाल होते हैं, और किन व्यावहारिक उदाहरणों में इसका उपयोग किया जाता है।
मूल उदाहरण
html<!-- Microdata for a product -->
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">स्मार्टफोन</span>
<span itemprop="price">₹19,999</span>
<span itemprop="brand">TechNova</span>
</div>उपरोक्त कोड एक HTML माइक्रोडेटा का मूल उदाहरण है, जिसमें एक उत्पाद को टैग किया गया है।
itemscopeयह सूचित करता है कि यह<div>एक संरचित डेटा आइटम को प्रस्तुत करता है।itemtype="https://schema.org/Product"Schema.org के अनुसार इस आइटम का प्रकार ‘Product’ है।- अंदर के तत्वों पर
itempropविशेषताएँ लागू होती हैं, जो अलग-अलग उत्पाद से संबंधित जानकारी को परिभाषित करती हैं: name: उत्पाद का नामprice: उसकी कीमतbrand: ब्रांड या निर्माता
यह संरचना ब्राउज़र में सामान्य HTML की तरह दिखती है, लेकिन जब सर्च इंजन इस पेज को क्रॉल करते हैं, तो वे पहचान सकते हैं कि यह एक उत्पाद है, उसकी कीमत और ब्रांड के साथ।
बिगिनर अक्सर सोचते हैं कि माइक्रोडेटा डिज़ाइन को कैसे प्रभावित करता है — लेकिन यह केवल मेटाडेटा होता है, न कि कोई दृश्य प्रभाव डालने वाला कोड। इसका मुख्य उद्देश्य है सर्च इंजन या अन्य सिस्टम्स को आपकी सामग्री को समझने में मदद करना।
व्यावहारिक उदाहरण
html<!-- Blog article with microdata -->
<article itemscope itemtype="https://schema.org/BlogPosting">
<h1 itemprop="headline">AI का भविष्य</h1>
<p>लेखक: <span itemprop="author">राहुल मेहरा</span></p>
<time itemprop="datePublished" datetime="2025-07-28">28 जुलाई 2025</time>
<div itemprop="articleBody">
<p>कृत्रिम बुद्धिमत्ता शिक्षा, स्वास्थ्य और व्यावसायिक क्षेत्रों में तेजी से बढ़ रही है...</p>
</div>
</article>सर्वोत्तम अभ्यास और सामान्य गलतियाँ
सर्वोत्तम अभ्यास:
- सेमांटिक HTML का प्रयोग करें:
<article>,<time>,<header>जैसे सही टैग से अर्थपूर्ण ढांचा बनाएं। - सटीक
itempropप्रयोग करें: वह डेटा जिसके लिए आप मेटा अर्थ जोड़ रहे हैं, ठीक उसी के भीतरitempropलिखें। - Schema.org का पालन करें: केवल मान्यता प्राप्त
itemtypeऔरitempropका ही उपयोग करें। -
सत्यापन करें: Google Structured Data Testing Tool से टैग्स को चेक करें।
सामान्य गलतियाँ: -
itemscopeयाitemtypeभूल जाना:itempropतब कार्य नहीं करेगा। - गलत नेस्टिंग:
itempropको गलत स्थान पर रखने से टैगिंग असफल हो सकती है। - HTML संरचना गड़बड़ करना: जैसे
<span>के अंदर<div>डालना। - रिक्त
itempropछोड़ देना:<span itemprop="price"></span>जैसी गलतियों से सर्च इंजन डेटा को नजरअंदाज कर सकते हैं।
डिबगिंग टिप्स:
- हमेशा वेलिडेट करें
- टैग्स को नेस्टिंग के अनुसार स्पष्ट रूप से व्यवस्थित रखें
- सादा, साफ HTML स्ट्रक्चर अपनाएं
📊 त्वरित संदर्भ
| Property/Method | Description | Example |
|---|---|---|
| itemscope | डेटा आइटम को परिभाषित करता है | <div itemscope> |
| itemtype | डेटा आइटम का प्रकार (Schema.org) | itemtype="[https://schema.org/Product](https://schema.org/Product)" |
| itemprop | डेटा आइटम का गुण | itemprop="name" |
| articleBody | ब्लॉग या लेख की मुख्य सामग्री | itemprop="articleBody" |
| datePublished | प्रकाशन तिथि | itemprop="datePublished" |
| headline | लेख का शीर्षक | itemprop="headline" |
सारांश और अगले चरण
HTML माइक्रोडेटा की सहायता से आप वेबपेज को मशीन द्वारा समझने योग्य बना सकते हैं — यह HTML को अर्थ देता है और आपकी वेबसाइट को SEO फ्रेंडली बनाता है।
हमने देखा कि कैसे itemscope, itemtype और itemprop का उपयोग करके आप किसी भी डेटा को संरचित कर सकते हैं। चाहे आपका ब्लॉग हो या ई-कॉमर्स प्लेटफॉर्म — यह संरचना आपकी सामग्री को बेहतर तरीके से प्रस्तुत करने में मदद करती है।
CSS या JavaScript के साथ काम करते समय माइक्रोडेटा स्वतंत्र रहता है, लेकिन आप इनका उपयोग एक साथ कर सकते हैं। उदाहरण के लिए, माइक्रोडेटा से टैग किए गए डेटा को JavaScript द्वारा रीड या प्रोसेस किया जा सकता है।
अगले विषय जो आप पढ़ सकते हैं:
- JSON-LD का परिचय
- RDFa बनाम माइक्रोडेटा
- Schema.org की विस्तृत श्रेणियाँ
- SEO अनुकूलन तकनीकें
🧠 अपने ज्ञान की परीक्षा करें
अपना ज्ञान परखें
व्यावहारिक प्रश्नों के साथ इस विषय की अपनी समझ का परीक्षण करें।
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी