स्ट्रक्चर्ड डेटा का मार्कअप परिचय

Structured data शब्द का अर्थ सार्वभौमिक रूप से समझा जा सकता है। सर्च इंजन परिष्कृत करने के लिए Google, Bing और Yahoo जैसे संरक्षित डेटा (वेब पृष्ठों के भीतर लागू) स्ट्रक्चर्ड डेटा का उपयोग करें, अधिक सटीकता के साथ फ़िल्टर करें और परिणाम प्रदर्शित किए जाने के तरीके को बेहतर बनाएं। यह सब उपयोगकर्ताओं के लिए वह जानकारी ढूंढना आसान बनाता है जो वे ढूंढ रहे हैं।

हमें स्ट्रक्चर्ड डेटा की आवश्यकता क्यों है?

संरचित डेटा वेब पारिस्थितिकी तंत्र का एक तेजी से महत्वपूर्ण हिस्सा बनता जा रहा है। - Google

वेब पेजों का अंतर्निहित अर्थ है, जो उपयोगकर्ता उन्हें पढ़ते समय समझते हैं। दूसरी ओर सर्च इंजन, वेब पेज की सामग्री की सीमित समझ है। उदाहरण के लिए, मान लें कि आपके पास 'jaguar' के बारे में एक वेब पेज है। एक सर्च इंजन पृष्ठ को क्रॉल कर सकता है, लेकिन यह जरूरी नहीं पता होगा कि शब्द 'jaguar' का अर्थ क्या है। 'jaguar' जानवर को संदर्भित कर सकता है, या यह कार निर्माता को संदर्भित कर सकता है।

इससे सर्च इंजन एक उपयोगकर्ता के लिए प्रासंगिक सर्च परिणामों को प्रदर्शित करना मुश्किल हो जाता है। मनुष्य वेब पेज के संदर्भ से एक शब्द का अर्थ प्राप्त कर सकते हैं, लेकिन सर्च इंजनों को ऐसा करने में कठिनाई होती है।

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

स्ट्रक्चर्ड डेटा कैसे उपयोग किया जाता है?

स्ट्रक्चर्ड डेटा का एक बड़ा फायदा है: दृश्यता स्ट्रक्चर्ड। डेटा में संग्रहीत जानकारी का उपयोग rich snippets बनाने के लिए सर्च इंजन द्वारा किया जा सकता है। रिच स्निपेट उपयोगकर्ता को उनके विशिष्ट प्रश्नों से संबंधित विस्तृत जानकारी प्रदान करते हैं।

आप शायद इन अमीर स्निपेट्स के उदाहरणों में आए हैं - यदि नहीं, तो Google के SERP पर lasagna के लिए एक नज़र डालें। मुझे यकीन है कि आप कुछ सर्च परिणामों के बगल में चित्र देख सकते हैं। इन छवियों को जोड़ा गया धन्यवाद microdata के लिए। वे वेब पेज के बारे में अतिरिक्त जानकारी के साथ सर्च इंजन प्रदान करने के लिए इस्तेमाल किया जा सकता है, इस मामले में एक इमेज लेकिन आप एक रेटिंग, खाना पकाने, कैलोरी की मात्रा आदि भी जोड़ सकते हैं।

ये अमीर स्निपेट कुछ परिणामों को बाकी हिस्सों से बाहर खड़ा करते हैं, अक्सर उच्चतर क्लिकथ्रू दर (CTR) के कारण होता है। कुछ वेबसाइटों ने स्ट्रक्चर्ड मार्कअप डेटा को लागू करने के बाद CTR में reported a 30% increase दी है। बहुत अच्छा लगता है, है ना?

स्ट्रक्चर्ड डेटा मार्कअप के प्रकार

स्ट्रक्चर्ड डेटा मार्कअप के तीन प्रकार हैं:

• Microdata
• Microformats
• RFDa

इन मार्कअप प्रकारों की सर्च शुरू करने से पहले, आपको एक बात को ध्यान में रखना चाहिए: आप एक वेब पेज पर एक से अधिक प्रकार के स्ट्रक्चर्ड डेटा का उपयोग नहीं कर सकते, क्योंकि यह संभावित रूप से सर्च इंजन को भ्रमित करता है। इसलिए हमें इन तीन विकल्पों के बीच चयन करना होगा। लेकिन हमारी वेबसाइट के लिए सबसे उपयुक्त कौन सा है? आइए हम सभी को व्यक्तिगत रूप से देखें।

यदि आप RDF, माइक्रोडेटा और माइक्रोफोर्मैट्स के बीच तकनीकी मतभेदों के बारे में सब कुछ जानना चाहते हैं (और मेरा बिल्कुल मतलब है), तो मेरा सुझाव है कि वर्ल्ड वाइड में समूह की चेयर मैनू स्पॉनी द्वारा An Uber-comparison of RDFa, Microdata and Microformats की एक उबेर-तुलना वेब कंसोर्टियम ने RDFa बनाया है।

Microdata

Microdata संभवतः स्ट्रक्चर्ड डेटा का सबसे लोकप्रिय प्रकार है, मुख्यतः वेबसाइट के कारण Schema.org। इस वेबसाइट पर, तीन सबसे बड़े सर्च इंजन (Google, Bing और Yahoo) की एक पहल, आपको स्कीमा (माइक्रोडेटा) का एक साझा संग्रह मिलेगा जिसे आप उपयोग कर सकते हैं।

माइक्रोडेट के मार्कअप में 3 तत्व होते हैं: itemscope, itemtype और itemprops। आइटम्सस्कोप विशेषता आइटम के बारे में जानकारी संलग्न करती है। अपने HTML में आइटम्सस्कोप जोड़कर, आप यह निर्दिष्ट कर रहे हैं कि आपके चुने हुए तत्व के अंदर की सामग्री एक विशेष वस्तु के बारे में है।

1

<div itemscope>

2

Foo Fighters Concert

3

</div>

सामग्री के प्रकार की पहचान करने के लिए आइटमप्रकार तत्व जोड़ें। आइटम्स के बाद तुरंत इस विशेषता का उपयोग करें।

1

<div itemscope itemtype=”http://schema.org/Event”>

2

Foo Fighters Concert

3

</div>

इस उदाहरण में, मदों की सर्च में सर्च इंजन को सूचित किया जाता है कि डिवी में मौजूद आइटम वास्तव में एक घटना है। आइटमप्रकार हमेशा URLs के रूप में जोड़े जाते हैं। आप complete list of all itemtypes at Schema.org देख सकते हैं।

अब जब सर्च इंजन जानते हैं कि हमारा पृष्ठ एक घटना के बारे में है, तो हम इसे इस विशेष घटना के बारे में अतिरिक्त जानकारी प्रदान कर सकते हैं। इसके लिए हम itemprop विशेषता का उपयोग करते हैं।

अगर हम फू फाइटर्स कॉन्सर्ट के स्थान की पहचान करना चाहते हैं, तो हम केवल आइटम नाम को जोड़ने वाले तत्व के लिए itemprop = "location" जोड़ते हैं (फिर से, सभी गुणों की एक पूरी सूची के लिए schema.org पर जाएं, जिसे आप किसी आइटमप्रकार से संबद्ध कर सकते हैं)।

1

<div itemscope itemtype=”http://schema.org/Event”>

2

<span itemprop=”name”>Foo Fighters Concert</span>.

3

Concert will take place at <span itemprop=”location”>Madison Square Garden</span>.

4

</div>

कभी-कभी आपको आइटमप्रॉप विवरण जोड़ने के लिए अतिरिक्त तत्व जोड़ना होगा। हम <span> टैग का उपयोग करते हैं क्योंकि, डिफ़ॉल्ट रूप से, वे एक ब्राउज़र द्वारा इनलाइन पाठ को प्रस्तुत करने के तरीके को प्रभावित नहीं करते हैं।

तिथियां और टाइम्स

तिथियां और समय व्याख्या करने में मुश्किल हो सकती हैं। उदाहरण के लिए 08/10/12 तिथि, क्या इसका मतलब 8 अक्टूबर 2012 है? या 10 अगस्त 2012? या 12 अगस्त, 2008? भ्रामक है, है ना? सर्च इंजन में एक ही समस्या है।

उन्हें सही समय और तारीख प्रदान करने के लिए, हमें एक 'datetime' विशेषता जोड़नी होगी। यह विशेषता YYYY-MM-DD प्रारूप का उपयोग करके एक तिथि निर्दिष्ट करती है।

1

<time datetime="2011-04-01">04/01/11</time>

ऊपर दिए गए कोड 1 अप्रैल 2011 की तारीख के लिए है।

एक समय निर्दिष्ट करने के लिए datetime विशेषता का भी उपयोग किया जा सकता है। टाइम्स पत्र T के साथ प्रीफ़िक्स्ड हैं और एक तिथि के साथ प्रदान की जा सकती हैं।

1

<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

ऊपर दिए गए कोड निम्नलिखित दिनांक और समय को प्रदर्शित करता है: 8 मई 2011, 7.30 बजे। यदि हम हमारे पिछले उदाहरण के लिए दिनांक और समय मार्कअप जोड़ते हैं, तो हम ऐसा कुछ पा सकते हैं:

1

<div itemscope itemtype=”http://schema.org/Event”>

2

<span itemprop=”name”>Foo Fighters Concert</span>.

3

Concert will take place at <span itemprop=”location”>Madison Square Garden</span>

4

on <time datetime="2011-05-08T19:30">May 8, 2011 at 7:30pm</time>.

5

</div>

इन साधारण टैगों के साथ हम सर्च इंजन को बता सकते हैं कि 8 मई 2011 को 7.30 बजे मैडिसन स्क्वायर गार्डन में एक फू फाइटर्स कॉन्सर्ट होगा। हम पुस्तकों, फिल्मों, संगठनों, व्यंजनों आदि के बारे में वेब पेजों को चिह्नित करने के लिए अन्य विशेषताओं का उपयोग कर सकते हैं।

सम्पूर्ण सूचना

जानकारी उपयोगकर्ताओं और सर्च इंजनों के लिए हमेशा दिखाई नहीं देती है। कुछ जानकारी मीडिया वस्तु में एम्बेड की जा सकती है, या किसी पृष्ठ पर स्पष्ट रूप से नहीं बताया जा सकता है। इस मामले में आप इस जानकारी को निर्दिष्ट करने के लिए मेटा टैग का उपयोग कर सकते हैं।

मान लें कि हमारे पास हमारे पृष्ठ पर एक वीडियो है और हम चाहते हैं कि वीडियो की अवधि समृद्ध स्निपेट के रूप में प्रदर्शित हो। चूंकि वीडियो की अवधि हमारे पृष्ठ पर टेक्स्ट के रूप में प्रदान नहीं की जाती है, इसलिए हमें इस जानकारी को जोड़ने के लिए मेटा टैग का उपयोग करना होगा। उदाहरण के लिए:

1

<meta itemprop=”Duration” content=”T2M40S” />

उपरोक्त कोड सर्च इंजन बताता है कि वीडियो 2 मिनट और 40 सेकंड लंबा है (यह मत भूलें कि हम दिनांक और समय के लिए ISO8601 format का उपयोग करते हैं)। यह जानकारी सर्च परिणामों में एक समृद्ध स्निपेट के रूप में दिखाई जाएगी।

Microformats

माइक्रोफोर्मैट्स सीमेंटिक जानकारी के साथ पारंपरिक HTML टैग का विस्तार करते हैं। माइक्रोफ़ॉर्मैट्स के साथ एक वेब पेज पर स्ट्रक्चर्ड डेटा जोड़ने के लिए, आप अधिकतर क्लास विशेषता का उपयोग करेंगे। यह माइक्रोफार्मेट को स्ट्रक्चर्ड डेटा जोड़ने का सबसे आसान और साफ तरीका है।

माइक्रोप्रोर्मेट्स का सबसे लोकप्रिय प्रकार हैं hCard, hCalendar और hReview। hCard का उपयोग लोगों, कंपनियों और संगठनों के लिए किया जाता है। घटनाओं के बारे में जानकारी जोड़ने के लिए hCalendar का उपयोग किया जा सकता है। और एचआरइव्यू के साथ आप रेस्तरां, किताबों, फिल्मों आदि की समीक्षा कर सकते हैं।

मान लें कि हमारे पास एक फुटबॉल मैच के लिए एक पेज है। सबसे पहले हमें सर्च इंजनों को बताने की जरूरत है कि यह वेब पेज किसी भी घटना के बारे में <head> में hCalendar को संदर्भित करता है।

1

<head profile=”http://microformats.org/hcalendar”>

इसके बाद हमें सर्च इंजन को बताने की ज़रूरत है जो हमारे वेब पेज का हिस्सा घटना के बारे में है। इसके लिए हम वेट क्लास का इस्तेमाल करते हैं।

1

<div class=”vevent”>

हमारे <div> द्वारा निहित सब कुछ घटना के बारे में सर्च इंजन को अधिक जानकारी देता है (लेकिन यदि आप अन्य टैग जैसे <span> या <p> यदि आवश्यक हो तो भी इस्तेमाल कर सकते हैं)। अगर हम अपनी घटना का शीर्षक जोड़ना चाहते हैं, तो हम सारांश संपत्ति का उपयोग करते हैं। सारांश एक घटना के लिए एक आवश्यक संपत्ति है!

1

<div class=”vevent”>

2

<span class=”summary”>Real Madrid - FC Barcelona</span>

3

</div>

स्थान की संपत्ति का उपयोग करके हम निर्दिष्ट कर सकते हैं कि मैच कहाँ होगा।

1

<div class=”vevent”>

2

<span class=”summary”>Real Madrid - FC Barcelona</span>

3

at <span class=”location”>Camp Nou</span>

4

</div>

इस कोड के साथ हम सर्च इंजन को बताते हैं कि कैंप Nou में रियल मैड्रिड और FC बार्सिलोना के बीच का मैच होगा। hCaldendar के लिए एक और आवश्यक संपत्ति dtstart है। यह घटना की तारीख और समय का वर्णन करता है।

1

<div class=”vevent”>

2

<span class=”summary”>Real Madrid - FC Barcelona</span>

3

at <span class=”location”>Camp Nou</span>

4

on <time class=”dtstart” title=”2012-10-22T20:30”>October 22, 2012 at 8:30pm</time>

5

</div>

ये टैग सर्च इंजन को रियल मैड्रिड और FC बार्सिलोना जैसे स्थान और तारीख / समय के बीच फुटबॉल मैच के बारे में अधिक जानकारी देते हैं।

माइक्रोफार्मैट्स के बारे में अधिक जानकारी के लिए, microformats wiki देखें।

RFDa

RFDa संस्थाओं की पहचान करने के लिए अनेक गुणों का उपयोग करती है (जैसे कि किसी व्यक्ति या एक घटना)। यह संस्थाओं का वर्णन करने के लिए HTML टैग, जैसे <div> और <span> का उपयोग करता है। RFDa की अधिक उन्नत विशेषताएं वेबमास्टरों के लिए मुश्किल हो सकती हैं जो स्ट्रक्चर्ड डेटा में विशेषज्ञ होने के लिए नहीं होते हैं।

RFDa में चार बुनियादी विशेषताएं हैं: voctype, typeof, property और resource।

पहली विशेषता, voctype, शब्दावली परिभाषित करता है जिसे हम अपने स्ट्रक्चर्ड डेटा के लिए उपयोग करने जा रहे हैं। इस विशेषता के लिए धन्यवाद, सर्च इंजनों को पता है कि इस स्ट्रक्चर्ड डेटा के बारे में जानकारी कहाँ प्राप्त करें।

1

<p vocab=”http://schema.org”>

2

Hi, my name is John Doe!

3

</p>

उपरोक्त कोड के साथ हम यह निर्दिष्ट करते हैं कि हमारे RFDa टैग्स के लिए शब्दसंग्रह schema.org (उदाहरण के लिए) में मिल सकते हैं। कई अन्य शब्दावली हैं, जैसे LOV और Dublin Core। अब हमें डेटा के प्रकार को निर्दिष्ट करने की जरूरत है। क्या यह एक व्यक्ति, एक घटना, एक रेस्तरां ... के बारे में जानकारी है? इसके लिए हम टाइप ऑफ विशेषता का उपयोग करते हैं।

1

<p vocab=”http://schema.org” typeof=”Person”>

2

Hi, my name is John Doe!

3

</p>

सर्च इंजन को पता है कि हम किसी व्यक्ति के बारे में बात कर रहे हैं, लेकिन उन्हें उसके बारे में ज्यादा जानकारी नहीं है। गुण जोड़कर हम उन्हें इस व्यक्ति के बारे में अधिक जानकारी दे सकते हैं।

1

<p vocab=””http://schema.org” typeof=”Person”>

2

Hi, my name is <span property=”name”>John Doe</span>!

3

</p>

उपर्युक्त कोड हमें बताता है कि यह वेब पेज जॉन डो के नाम के बारे में है। हम संसाधन विशेषता को जोड़कर इस व्यक्ति की पहचान करने के लिए इस स्ट्रक्चर्ड डेटा को एक अद्वितीय आईडी जोड़ सकते हैं।

1

<p vocab=”http://schema.org” resource=”#john” typeof=”Person”>

2

Hi, my name is <span property=”name”>John Doe</span>!

3

</p>

यह अद्वितीय आईडी उपयोगी है अगर हम किसी अन्य वेबसाइट पर जॉन डो के बारे में बात करना चाहते हैं। इस वेब पेज के url (उदाहरण के लिए http://example.com/employees#john) को आईडी जोड़कर, हमारे पास जॉन डो के बारे में सारी जानकारी का संदर्भ है।

RFDa के कार्यान्वयन के बारे में अधिक जानकारी के लिए, RDFa documentation on w3.org देखें।

मुझे माइक्रोडाटा पसंद क्यों है

मैं स्ट्रक्चर्ड डेटा को लागू करने के लिए माइक्रोडाटा का उपयोग करना पसंद करता हूं। मैं किसी भी तरह से नहीं कह रहा हूं कि माइक्रोडाटा सबसे अच्छा विकल्प है (हर तरह के फायदे और नुकसान हैं), लेकिन मेरे लिए, माइक्रोडाटा सबसे अधिक लाभ प्रदान करता है।

माइक्रोडेटा के मुकाबले, नीडिंत संस्थाओं के साथ व्यवहार करते समय RDFa में कुछ सीखने की अवस्था है। और नॉन-XHTMl पृष्ठों में RFDa के कार्यान्वयन कुछ विशेषताओं और मूल्यों के कारण समस्याग्रस्त हो सकते हैं।

माइक्रोफार्मैट्स के नकारात्मक पक्ष यह है कि, यदि आप इसे किसी वेबसाइट पर वापस जाना चाहते हैं, तो संभवतः आपके पास होगा
CSS classes और <div> और <span> टैग्स का नाम बदलने के लिए।

मेरे लिए, माइक्रोडेटा दोनों दुनिया का सर्वश्रेष्ठ है; यह सरल और कार्यान्वयन करना आसान है। माइक्रोडाटा को Google द्वारा भी अनुशंसित किया जाता है, इसलिए ऐसे लोगों के लिए जो Google के दिशानिर्देशों का पालन करना चाहते हैं, यह माइक्रोफ़ोर्माैट्स और RFDa पर माइक्रोडाटा चुनने का एक कारण हो सकता है।

अपने मार्कअप का परीक्षण करना

आपने अपनी वेबसाइट पर स्ट्रक्चर्ड डेटा जोड़ते हुए अनगिनत घंटे बिताए हैं। लेकिन आप यह कैसे जानते हैं कि यह सही ढंग से लागू किया गया है? यही वह जगह है जहां Google's Rich Snippet Testing Tool काम में आता है। इस वेबसाइट पर आप एक URL या HTML कोड का हिस्सा बन सकते हैं, और स्ट्रक्चर्ड डेटा मार्कअप का परीक्षण कर सकते हैं। यह आपको एक विचार दे सकता है कि सर्च परिणामों में पेज कैसे दिखाई देगा।

उपकरण

हम इस आलेख को ऐसे उपकरणों के संग्रह के साथ समाप्त करते हैं जो आपके वेबसाइट पर स्ट्रक्चर्ड डेटा जोड़ते समय काम में आ सकते हैं।

• Schema.org Creator माइक्रोडेटा उत्पन्न करने का एक आसान तरीका है। सामग्री प्रकार (व्यक्ति, घटना, समीक्षा ...) चुनें, आवश्यक फ़ील्ड भरें और आपके पास सही HTML कोड के बटन पर क्लिक करें।
• यदि आपके पास एक Wordpress ब्लॉग या वेबसाइट है तो आप यह आसान वर्डप्रेस प्लगइन का उपयोग कर सकते हैं। रेवेन द्वारा विकसित Schema Creator Plugin, आपके वेब पेजों पर स्ट्रक्चर्ड डेटा जोड़ने में वास्तव में आसान बनाता है। है। इस प्लगइन के फायदों में से एक यह है कि यह शॉर्टकोड का उपयोग करता है। इसलिए आपको मैन्युअल रूप से माइक्रोडाटाटा जोड़ने की आवश्यकता नहीं है।
• माइक्रोफार्मैट में hCard, hCalendar और hReview के लिए कई निर्माता हैं। अपनी वेबसाइट के लिए माइक्रो-फोर्मैट्स को तुरंत जनरेट करने के लिए इन टूल का उपयोग करें।
• RFDa को लागू करना चाहते हैं तो RDFa Play शायद सबसे अच्छा उपकरण है। यह आपको अपने कोड को संपादित और डिबग करने देता है। इसके अलावा, यह एक डेटा विज़ुअलाइज़र के साथ आता है!

निष्कर्ष

भविष्य में हम अधिक स्ट्रक्चर्ड डेटा देख रहे होंगे। यह सर्च इंजन सामग्री को अधिक कुशलता से व्याख्या करने और अमीर स्निपेट उत्पन्न करने की अनुमति देता है। ये सभी परिणाम पृष्ठों के लिए उच्चतर क्लिकथ्रू दर में होते हैं जहां स्ट्रक्चर्ड डेटा लागू होता है।

हमें टिप्पणियों में अपने विचार बताएं; क्या आप किसी भी समय स्ट्रक्चर्ड डेटा का लाभ उठाएं? क्या आपके पास ऐसा करने में पहले से ही अनुभव है?