वेब कॉम्पोनेंट और JSON-LD का इस्तेमाल करके, सिमैंटिक साइटें बनाना

Ewa Gasperowicz

वेब कॉम्पोनेंट की बढ़ती लोकप्रियता और Polymer जैसी लाइब्रेरी की बढ़ती लोकप्रियता की वजह से, कस्टम एलिमेंट, यूज़र इंटरफ़ेस (यूआई) सुविधाएं बनाने का एक आकर्षक तरीका बन गए हैं. कस्टम एलिमेंट के डिफ़ॉल्ट एनकैप्सुलेशन से, वे अलग-अलग विजेट बनाने के लिए खास तौर पर काम के होते हैं.

कुछ विजेट अपने-आप में पूरे होते हैं.हालांकि, इनमें से कई विजेट, उपयोगकर्ता को कॉन्टेंट दिखाने के लिए बाहरी डेटा का इस्तेमाल करते हैं. उदाहरण के लिए, मौसम के विजेट का मौजूदा पूर्वानुमान या मैप विजेट के लिए किसी कंपनी का पता.

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

अगर हम दोहराव से बच सकें और अलग-अलग विजेट को पॉप्युलेट करने के लिए, एक ही डेटा स्निपेट का फिर से इस्तेमाल करें, तो यह बहुत अच्छा होगा कि हम डेटा को एक जैसा बनाए रखें. साथ ही, सर्च इंजन और अन्य उपभोक्ताओं को अपने पेज के कॉन्टेंट के बारे में सूचना दें. ऐसा करने के लिए, हम अपने डेटा के लिए schema.org स्टैंडर्ड और JSON-LD फ़ॉर्मैट का इस्तेमाल करते हैं.

कॉम्पोनेंट में स्ट्रक्चर्ड डेटा भरना

आम तौर पर, JSON किसी खास विजेट में डेटा इंजेक्ट करने का एक आसान तरीका है. JSON-LD के लिए बढ़ती हुई सहायता की वजह से, हम यूज़र इंटरफ़ेस (यूआई), सर्च इंजन, और स्ट्रक्चर्ड डेटा के अन्य उपभोक्ताओं को पेज के कॉन्टेंट का सही मतलब बताने के लिए, एक ही डेटा स्ट्रक्चर का फिर से इस्तेमाल कर सकते हैं.

वेब कॉम्पोनेंट को JSON-LD के साथ जोड़कर, हम किसी ऐप्लिकेशन के लिए अच्छी तरह से तय किया गया आर्किटेक्चर बनाते हैं:

• schema.org और JSON-LD, डेटा लेयर को दिखाते हैं. इसमें schema.org डेटा के लिए शब्दावली उपलब्ध कराता है और डेटा के फ़ॉर्मैट और ट्रांसपोर्ट को JSON-LD की जानकारी देता है;
• कस्टम एलिमेंट, प्रज़ेंटेशन लेयर को दिखाते हैं. इन्हें कॉन्फ़िगर किया जा सकता है और डेटा से अलग भी किया जा सकता है.

उदाहरण

आइए, नीचे दिए गए उदाहरण पर ध्यान दें - एक ऐसा पेज जिसमें Google Office की कुछ जगहों की जानकारी दी गई है: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

इसमें दो विजेट होते हैं: हर ऑफ़िस के लिए पिन के साथ एक मैप और जगहों की सूची के साथ एक ड्रॉपडाउन. यह ज़रूरी है कि दोनों विजेट, उपयोगकर्ता को एक जैसा डेटा दिखाएं और उस पेज को सर्च इंजन आसानी से पढ़ सकें.

इस डेमो में, हम अपने डेटा का मतलब बताने के लिए LocalBusiness इकाइयों का इस्तेमाल कर रहे हैं. यह डेटा, Google के कुछ ऑफ़िस की भौगोलिक जगह है.

Google इस पेज को कैसे पढ़ और इंडेक्स कर रहा है, यह देखने का सबसे अच्छा तरीका है कि नया और बेहतर स्ट्रक्चर्ड डेटा टेस्टिंग टूल इस्तेमाल किया जाए. यूआरएल फ़ेच करें सेक्शन में डेमो का यूआरएल सबमिट करें. इसके बाद, फ़ेच करें और पुष्टि करें पर क्लिक करें. दाईं ओर के सेक्शन में, पेज से लिया गया पार्स किया गया डेटा दिखेगा. साथ ही, अगर कोई गड़बड़ी हो सकती है, तो वह भी इस सेक्शन में दिखेगी. यह जांचने का एक आसान तरीका है कि आपका JSON-LD मार्कअप सही है या नहीं. साथ ही, Google इस मार्कअप को प्रोसेस कर सकता है या नहीं.

वेबमास्टर सेंट्रल की ब्लॉग पोस्ट में, इस टूल और इसमें किए गए सुधारों के बारे में ज़्यादा जानकारी पाई जा सकती है.

कॉम्पोनेंट को स्ट्रक्चर्ड डेटा सोर्स से लिंक करना

डेमो और उसे बनाने में इस्तेमाल किए गए वेब कॉम्पोनेंट का कोड GitHub पर है. चलिए, combined-demo.html पेज का सोर्स कोड देखते हैं.

सबसे पहले, हम JSON-LD स्क्रिप्ट का इस्तेमाल करके, पेज में डेटा एम्बेड करते हैं:

<script type="application/ld+json">
{...}
</script>

इस तरह, हम यह पक्का करते हैं कि schema.org स्टैंडर्ड और JSON-LD फ़ॉर्मैट, जैसे कि सर्च इंजन का इस्तेमाल करने वाले दूसरे उपभोक्ता, डेटा को आसानी से ऐक्सेस कर पाएं.

दूसरे चरण में, हम डेटा दिखाने के लिए दो वेब कॉम्पोनेंट का इस्तेमाल करते हैं:

• address-dropdown-jsonld - यह एलिमेंट एक ड्रॉपडाउन बनाता है. इसमें “jsonld” एट्रिब्यूट में पास की गई सभी जगहों की जानकारी शामिल होती है.
• google-map-jsonld - यह एलिमेंट “jsonld” एट्रिब्यूट में पास की जाने वाली हर जगह के लिए, पिन के साथ एक Google मैप बनाता है.

ऐसा करने के लिए, हम एचटीएमएल इंपोर्ट का इस्तेमाल करके उन्हें अपने पेज पर इंपोर्ट करते हैं.

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

इंपोर्ट होने के बाद, हम उनका इस्तेमाल अपने पेज पर कर सकते हैं:

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

आखिर में, हम JSON-LD डेटा और एलिमेंट को जोड़ देते हैं. ऐसा हम पॉलीमर के लिए तैयार कॉलबैक में करते हैं. यह एक ऐसा इवेंट है जो तब ट्रिगर होता है, जब कॉम्पोनेंट इस्तेमाल के लिए तैयार होते हैं. एलिमेंट को एट्रिब्यूट के ज़रिए कॉन्फ़िगर किया जा सकता है. इसलिए, हमारे JSON-LD डेटा को कॉम्पोनेंट के सही एट्रिब्यूट के लिए असाइन करना ही काफ़ी है:

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD, JSON का दमदार भाई है

आपने देखा होगा कि यह बिलकुल उसी तरह काम करता है जैसे डेटा भेजने के लिए, सादे और पुराने JSON का इस्तेमाल करता है. JSON-LD के कुछ फ़ायदे हैं, जो सीधे तौर पर इसके schema.org के साथ काम करने वाले टूल से लिए जाते हैं:

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

सरल शब्दों में कहें, तो JSON-LD और schema.org के साथ वेब कॉम्पोनेंट की टेक्नोलॉजी का इस्तेमाल करके, डेवलपर और सर्च इंजन के लिए आसान और दोबारा इस्तेमाल किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) बनाए जा सकते हैं.

अपने खुद के कॉम्पोनेंट बनाना

GitHub पर दिए गए उदाहरण आज़माएं या खुद के कॉम्पोनेंट लिखने के लिए, फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट बनाने के बारे में पॉलीमर की गाइड पढ़ें. Developers.google.com पर स्ट्रक्चर्ड डेटा के दस्तावेज़ देखें और उन अलग-अलग इकाइयों के बारे में जानें जिन्हें JSON-LD के साथ मार्कअप किया जा सकता है.

आपने जो कस्टम एलिमेंट बनाए हैं उन्हें दिखाने के लिए, @polymer का ज़िक्र करें!