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

Ewa Gasperowicz
X

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

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

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

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

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

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

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

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

उदाहरण

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

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

वेब कॉम्पोनेंट और JSON-LD का डेमो पेज

इस डेमो में, हम अपने डेटा का मतलब बताने के लिए 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 पर दिए गए उदाहरणों को आज़माएं या फिर से इस्तेमाल किए जा सकने वाले कॉम्पोनेंट बनाने के बारे में Polymer की गाइड पढ़ें. इससे, आपको खुद कॉम्पोनेंट बनाने में मदद मिलेगी. JSON-LD के साथ मार्क की जा सकने वाली अलग-अलग इकाइयों के बारे में जानने के लिए, developers.google.com पर स्ट्रक्चर्ड डेटा का दस्तावेज़ देखें.

अपने बनाए गए कस्टम एलिमेंट दिखाने के लिए, @polymer पर हमसे संपर्क करें!