✳️ 👨🏿‍🏭 🍧 माइक्रो-मार्कअप सिंटैक्स की जटिल और विरोधाभासी दुनिया। इतने सारे मानक क्यों हैं? यांडेक्स अनुभव 📘 💣 🚴🏻

आज, शब्दार्थ मार्कअप के बारे में हमारी कहानियों की निरंतरता में, मैं इसके सिंटैक्स के बारे में बात करना चाहता हूं। ऐसा क्यों है, और अलग नहीं है, अक्सर ऐतिहासिक कारणों से निर्धारित होता है, और कभी-कभी हास्य से भी। इसलिए, हमने यहां सब कुछ व्यवस्थित और समझाने की कोशिश की।

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

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

शब्दकोशों जैसे कई वाक्यविन्यास मानक हैं। इस लेख में, हम व्यावहारिक उदाहरणों का उपयोग करते हुए सबसे आम का विश्लेषण करेंगे:

माइक्रोडाटा - माइक्रोडाटा (स्कीमा डॉट ओआरजी शब्दकोश सबसे अधिक बार इस वाक्यविन्यास में पाया जाता है);
Microformats.org - माइक्रोफ़ॉर्मेट्स (याद रखें कि यह एक एकीकृत सिंटैक्स और शब्दकोश मानक है);
आरडीएफए और आरडीएफए लाइट (सरलीकृत रूप में आरडीएफए की सिफारिश ओपन ग्राफ शब्दकोश के रचनाकारों द्वारा की गई है। अन्य शब्दकोशों के साथ भी पाया जाता है, उदाहरण के लिए, डबलिन कोर शब्दकोश या डेटा शब्दावली के साथ);
JSON-LD एक JSON एक्सटेंशन है।

यह समझने के लिए कि एक समस्या को हल करने के लिए कई अलग-अलग मानकों को क्यों विकसित किया गया, हम वाक्य रचना के विकास के इतिहास की ओर मुड़ते हैं:

~~एक बार~~ 2004 में, W3C डेवलपर्स ने एक मानक बनाया, जो उनकी राय में, "दुनिया में सब कुछ का प्रतिनिधित्व करने के लिए" उपयुक्त था। यह है कि RDFa (रिज़ॉल्यूशन विवरण फ़्रेमवर्क इन एट्रिब्यूट्स) सिंटैक्स दिखाई दिया, जो आपको HTML मार्कअप को अनधिकृत रूप से RDF में अर्थ डेटा के साथ अनुवाद करने की अनुमति देता है।

लगभग एक साल बाद, कई उत्साही लोगों ने अपने "सरल" मानक के साथ आने का फैसला किया, जो मौजूदा HTML तत्वों का उपयोग करेगा। और वे जाने-माने माइक्रोफ़ॉर्मेट्स के साथ आए।

(इसके बाद, इस चित्र के बजाय एक तारांकन चिह्न दिखाई देगा - यह भी अक्सर क्या हो रहा है का सार दर्शाता है)

कुछ समय बाद, Google कर्मचारी और उस समय W3C के सदस्य इयान "हिक्सी" हिकसन ने HTML5 का एक वैकल्पिक संस्करण लिखने और अपना सिंटैक्स बनाने का निर्णय लिया। माइक्रोडाटा प्रकट हुआ है - आरडीएफ मानक के साथ एक सरल लेकिन संगत नहीं है। W3C समुदाय ने इस पहल के लिए अस्पष्ट प्रतिक्रिया व्यक्त की, और परिणामस्वरूप, Hixie ने W3C को छोड़ दिया और अपने वैकल्पिक WHATWG समुदाय की भी स्थापना की। *

स्कीमा.कॉम शब्दकोष के उपयोग की सिफारिश करने के लिए माइक्रोडाटा पहला वाक्यविन्यास था। जब W3C में सवाल उठे कि क्यों Microdata और RDFa, स्कीम.कॉम के संस्थापकों में से एक, रामनाथन वी। गुहा या सिर्फ गुहा (एक Google कर्मचारी और यहां तक कि Google फेलो) ने भी एक संदेश के साथ उत्तर दिया, जो इस प्रकार है: "आपका RDFa बहुत जटिल है इसके उपयोग की गलतियों के 90% मामलों में किया जाता है। ” पत्र के जवाब में, आरडीएफए डेवलपर्स ने आरडीएफए लाइट को जल्दी से जारी किया - सिंटैक्स माइक्रोडाटा से अधिक जटिल नहीं है, लेकिन आरडीएफ के साथ संगत और आरडीएफए के लिए विस्तार योग्य है। *

और बाद में, आरडीएफए के रचनाकारों में से एक मनु स्पोर्नी को JSON से RDF में संरचित जानकारी को स्थानांतरित करने की आवश्यकता के साथ सामना करना पड़ा, जब वह अपने प्रोजेक्ट पर काम कर रहा था, जहां JSON में बहुत अधिक डेटा था। उन्हें और उनके सहयोगियों को एहसास हुआ कि उन्हें JSON के लिए RDFa जैसी किसी चीज़ के साथ आने की जरूरत है। "

और लंबे और कड़ी मेहनत के परिणामस्वरूप, वाक्यविन्यास JSON-LD (लिंक्ड डेटा के लिए जावास्क्रिप्ट ऑब्जेक्ट नोटेशन) जारी किया गया था, जिसने न केवल प्रारंभिक कार्य को हल किया, बल्कि लिंक किए गए डेटा को वितरित करने के विचार को भी महसूस किया। शब्दार्थ की दुनिया में एक वाक्य रचना दिखाई दी है, जो सभी के विपरीत, टैग में कार्यान्वयन के लिए विकसित की गई थी

      API. 
  
 
  ,           .          (  ).       ,       . 
 
 1. Microdata () 
    —   itemscope, itemtype  itemprop,      . 
 ,        Schema.org: 
 
 <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9  1934</time> <span itemprop="memberOf">-  </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27  1968</time> <span itemprop="award">  </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs">  </a> <a href="http://example.com/" itemprop="url">  </a> </div>       API. 
  
 
  ,           .          (  ).       ,       . 
 
 1. Microdata () 
    —   itemscope, itemtype  itemprop,      . 
 ,        Schema.org: 
 
 <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9  1934</time> <span itemprop="memberOf">-  </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27  1968</time> <span itemprop="award">  </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs">  </a> <a href="http://example.com/" itemprop="url">  </a> </div> 
      API. 
  
 
  ,           .          (  ).       ,       . 
 
 1. Microdata () 
    —   itemscope, itemtype  itemprop,      . 
 ,        Schema.org: 
 
 <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">-</span> <span itemprop="colleague"> </span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/"> <time itemprop="birthDate" datetime="1934-03-09">9  1934</time> <span itemprop="memberOf">-  </span> <span itemprop="knows"> </span> <time itemprop="deathDate" datetime="1968-03-27">27  1968</time> <span itemprop="award">  </span> <a href="http://ru.wikipedia.org/wiki/,__" itemprop="sameAs">  </a> <a href="http://example.com/" itemprop="url">  </a> </div>

आइटम्सस्कोप पार्सर को बताता है कि HTML ब्लॉक ... में ऑब्जेक्ट के बारे में डेटा है। वे अक्सर निर्दिष्ट करते हैं कि क्या आइटमस्कोप आर्टिबूट के मूल्य को निर्दिष्ट करना आवश्यक है - एचटीएमएल 5 विनिर्देश के अनुसार, तार्किक विशेषताओं के लिए एक मूल्य निर्दिष्ट करना आवश्यक नहीं है, बस विशेषता नाम निर्दिष्ट करें;
itemtype, schema.org/Person लिंक का उपयोग करके, एक विशिष्ट प्रकार की वस्तु की ओर इशारा करता है;
आइटमप्रॉप इस ऑब्जेक्ट के गुणों को इंगित करता है।

इस उदाहरण में, लिंक आइटमप्रॉप का उपयोग करके, अदृश्य लिंक का उपयोग करके किसी ऑब्जेक्ट का वर्णन किया गया है।

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

माइक्रोडाटा की एक और विशेषता है जिसे हमने अपने काम में सामना किया है - यह अक्सर और अचानक बदलते विनिर्देश हैं। इस दस्तावेज के इतिहास के अनुसार , यह पता लगाया जा सकता है कि पहले इसे कम से कम सालाना, या साल में कई बार अपडेट किया गया था।

आमतौर पर, सभी पहल समूह उपयोगकर्ताओं को दिखाई देने वाली सामग्री को चिह्नित करने की वकालत करते हैं। लेकिन कुछ मामलों में, आपको डेटा का वर्णन करने की आवश्यकता है ताकि साइट मानव-पठनीय पाठ प्रदर्शित करे, और पार्सर मशीन-पठनीय प्रारूप में डेटा प्राप्त करता है। इस स्थिति में, आपको डेटा छिपाने की आवश्यकता है, और इसके लिए आप मेटा टैग का उपयोग कर सकते हैं:

 <div itemscope itemtype="http://schema.org/Offer"> <span itemprop="name">  Iphone</span> <span itemprop="price">700 </span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <img src="four-stars.jpg" /> <meta itemprop="ratingValue" content="4" /> <meta itemprop="bestRating" content="5" />   <span itemprop="ratingCount">25</span>   </div> </div>

माइक्रोडाटा सिंटैक्स में नेस्टेड संस्थाओं का वर्णन करना संभव है

 <div itemscope itemtype="http://schema.org/Person"> <span itemprop="name"> </span>, <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="addressLocality"></span>, <span itemprop="addressCountry"></span>, </span> </div>

इस उदाहरण में, "पता" संपत्ति भी एक इकाई है और इसके अपने गुण "AddressLocality" और "addressCountry" हैं।

माइक्रोडाटा कार्यान्वयन की उपलब्धता, आंशिक रूप से स्कीमा और मानक स्कीमा। ओआरजी मानक के कारण अधिक से अधिक लोकप्रियता प्राप्त कर रहा है। यह खोज इंजनों के द्वारा स्कीमा.ऑर्ग शब्दकोश के साथ भी अनुशंसित है, उदाहरण के लिए, यैंडेक्स और Google ।

उपयोगी लिंक:
W3C में माइक्रोडेटा का वर्णन ;
HTML5 पर माइक्रोडाटा ब्लॉग आलेख ;
WHATWG में प्रलेखन ।

2. Microformats.org (माइक्रोफ़ॉर्मेट्स)

जैसा कि हमने लिखा, माइक्रोफ़ॉर्मेट्स W3C उत्साही लोगों की एक पहल है जो सिमेंटिक मार्कअप के लिए एक सरल मानक बनाना चाहते थे और इसके लिए मूल HTML तत्वों का उपयोग करते थे। Microformats.org मानक, सबसे पुराना में से एक, 2005 में लॉन्च किया गया था।

माइक्रोफ़ॉर्मेट्स की ख़ासियत

) c class, rel, rev title . .

, class="adr" , :

<div class="adr"> , . , 16 </div>
HTML- class, , .

HTML-, hCard ( , — ).

<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".

के लिए टैग्स (आमतौर पर

) c class, rel, rev title . .

, class="adr" , :

<div class="adr"> , . , 16 </div>
HTML- class, , .

HTML-, hCard ( , — ).

<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".

) c class, rel, rev title . .

, class="adr" , :

<div class="adr"> , . , 16 </div>
HTML- class, , .

HTML-, hCard ( , — ).

<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".

  ) c  class, rel, rev  title    .               . 
 
 ,  class="adr"  ,      : 
 
 <div class="adr"> , .  , 16 </div> 
    HTML-    class,      ,  . 
 
   HTML-,   hCard (       ,    — ). 
 
 <div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">-  </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9  1934</span> </div> <span class="note">   </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div> 
    class="vcard" ,  HTML-    ; 
     ,  , , ,  ,    ;   ,   ,   class    ,  ; 
  ""   : "", "", "", " ".

) c class, rel, rev title . .

, class="adr" , :

<div class="adr"> , . , 16 </div>
HTML- class, , .

HTML-, hCard ( , — ).

<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".

  ) c  class, rel, rev  title    .               . 
 
 ,  class="adr"  ,      : 
 
 <div class="adr"> , .  , 16 </div> 
    HTML-    class,      ,  . 
 
   HTML-,   hCard (       ,    — ). 
 
 <div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">-  </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9  1934</span> </div> <span class="note">   </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div> 
    class="vcard" ,  HTML-    ; 
     ,  , , ,  ,    ;   ,   ,   class    ,  ; 
  ""   : "", "", "", " ".

) c class, rel, rev title . .

, class="adr" , :

<div class="adr"> , . , 16 </div>
HTML- class, , .

HTML-, hCard ( , — ).

<div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div>
class="vcard" , HTML- ;
, , , , , ; , , class , ;
"" : "", "", "", " ".

) c class, rel, rev title . . , class="adr" , : <div class="adr"> , . , 16 </div> HTML- class, , . HTML-, hCard ( , — ). <div class="vcard"> <img class="photo" src="http://example.com/gagarin.jpg" /> <strong class="fn"> </strong> <span class="title">-</span> <span class="org">- </span> <a class="url" href=http://example.com/> .</a> <div class="bday"> <span class="value-title" title="1934-03-09">9 1934</span> </div> <span class="note"> </span> <span class="adr"> <span class="type">work</span> <span class="locality"></span> <span class="country-name"></span> <span class="postal-code">468320</span> </span> </div> class="vcard" , HTML- ; , , , , , ; , , class , ; "" : "", "", "", " ".

माइक्रो-मार्कअप सिंटैक्स की जटिल और विरोधाभासी दुनिया। इतने सारे मानक क्यों हैं? यांडेक्स अनुभव

(इसके बाद, इस चित्र के बजाय एक तारांकन चिह्न दिखाई देगा - यह भी अक्सर क्या हो रहा है का सार दर्शाता है)

2. Microformats.org (माइक्रोफ़ॉर्मेट्स)

More articles: