आपकी वेबसाइट पर नए तरह का विज़िटर आया है. कुछ लोग, मैन्युअल नेविगेशन से हटकर, एआई एजेंट को लक्ष्य-उन्मुख यात्राएं सौंप रहे हैं. ये ऑटोनॉमस सिस्टम, उपयोगकर्ता के इनपुट को समझ सकते हैं, प्लान बना सकते हैं, और उपयोगकर्ता की ओर से कार्रवाइयां कर सकते हैं.
हालांकि, हमारी कई वेबसाइटें इंसानों के लिए आकर्षक डिज़ाइन की गई हैं. इनमें जटिल हॉवर-स्टेट, लेआउट में बदलाव, और फ़्लूड मोशन शामिल हैं. यह एजेंट के लिए काम नहीं कर रहा है.
एजेंट आपकी साइट को कैसे देखते हैं
एजेंट आपकी वेबसाइट को मॉनिटर पर नहीं देखते हैं. ये आपकी साइट के मशीन-रीडेबल वर्शन पर काम करते हैं. इस प्रज़ेंटेशन की क्वालिटी से, उनकी परफ़ॉर्मेंस तय होती है.
एजेंट आपकी वेबसाइट को तीन मुख्य तरीकों से देख सकते हैं: स्क्रीनशॉट, रॉ एचटीएमएल, और ऐक्सेसिबिलिटी ट्री.
स्क्रीनशॉट
एजेंट, रेंडर किए गए पेज का स्नैपशॉट लेता है और एलिमेंट की पहचान करने के लिए, विज़न मॉडल का इस्तेमाल करता है. स्क्रीनशॉट के आधार पर, एजेंट यह पहचान सकता है कि सबसे ऊपर दाईं ओर मौजूद खोज बार, ग्लोबल सर्च है. वहीं, बीच में मौजूद बॉक्स, फ़ॉर्म फ़ील्ड हो सकता है. विज़ुअल क्यू मददगार हो सकते हैं, क्योंकि एजेंट, रंग, साइज़, और दूरी का इस्तेमाल करके यह तय कर सकते हैं कि कौनसी जानकारी ज़्यादा ज़रूरी है. एक बड़े मिटाएं बटन को, छोटे "सहायता" लिंक की तुलना में ज़्यादा सावधानी से समझा जाएगा. हालांकि, स्क्रीनशॉट का विश्लेषण करने में समय लग सकता है और यह महंगा भी हो सकता है (इस्तेमाल किए गए टोकन के हिसाब से). इसलिए, जब स्ट्रक्चर समझ में न आ रहा हो, तब इसे बैकअप के तौर पर इस्तेमाल करना बेहतर होता है.
एचटीएमएल
यह एजेंट, DOM का विश्लेषण करता है और एचटीएमएल को पढ़ता है. यह समझता है कि एलिमेंट कैसे नेस्ट किए जाते हैं, डीओएम ट्री की लॉजिकल हैरारकी, आईडी और क्लास जैसे एट्रिब्यूट जो स्ट्रक्चर तय करते हैं, और रॉ डेटा स्ट्रिंग जो साइट की सूचनात्मक बैकबोन बनाती हैं. इससे एजेंट को एलिमेंट के बीच के संबंध को समझने में मदद मिलती है.
अगर अभी खरीदें बटन, प्रॉडक्ट कंटेनर में मौजूद है, तो एजेंट यह मान लेता है कि यह बटन उस खास प्रॉडक्ट का है.
सुलभता ट्री
ऐक्सेसिबिलिटी ट्री, ब्राउज़र का नेटिव एपीआई है. यह डीओएम को सबसे ज़रूरी चीज़ों में बदल देता है: इंटरैक्टिव एलिमेंट की भूमिकाएं, नाम, और स्थितियां. यह पेज की सिमेंटिक समरी है. इसका इस्तेमाल सहायक टेक्नोलॉजी करती है. एआई एजेंट के लिए, यह एक हाई-फ़िडेलिटी मैप की तरह काम करता है. यह सीएसएस के विज़ुअल "नॉइज़" को अनदेखा करता है, ताकि सिर्फ़ काम की जानकारी पर फ़ोकस किया जा सके. इस ट्री को पढ़कर, एजेंट को हर टॉगल, स्लाइडर, और इनपुट फ़ील्ड के फ़ंक्शनल इंटेंट के बारे में पता चल सकता है.
WebMCP टूल
WebMCP, वेब स्टैंडर्ड का एक सुझाव है. इसका मकसद, वेबसाइटों और एजेंट के बीच के अंतर को कम करना है. साथ ही, एजेंट को साफ़ तौर पर मकसद और टास्क के बारे में बताना है. इसके लिए, tools को तय किया जाता है. ये JavaScript या एचटीएमएल एनोटेशन होते हैं. एजेंट, इन टूल को स्टैंडर्ड ऐक्चुएशन की तुलना में ज़्यादा तेज़ी से और सटीक तरीके से समझते हैं.
WebMCP टूल का इस्तेमाल, ग्राहक सहायता, ई-कॉमर्स, डिस्कवरी वगैरह के लिए किया जा सकता है. कुछ कार्रवाइयां संवेदनशील होती हैं, जैसे कि खरीदारी करना. पुष्टि करने वाले डायलॉग के साथ उपयोगकर्ता के इंटरैक्शन का अनुरोध करने के लिए, एक कमांड शामिल की जा सकती है.
WebMCP के इस्तेमाल के उदाहरण और असरदार टूल बनाने का तरीका जानें.
एक से ज़्यादा मोड का इस्तेमाल करना
सिर्फ़ एक इनपुट पर भरोसा करने से, सिमैंटिक गैप बन जाता है. उदाहरण के लिए, DOM में एजेंट को <div> दिख सकता है. हालांकि, उसे यह नहीं पता होगा कि आपने इसे सीएसएस और JavaScript की मदद से, फ़ंक्शनल बटन के तौर पर कॉन्फ़िगर किया है. स्क्रीनशॉट से, एजेंट को यह पता चल सकता है कि स्क्रीन पर बटन कहां है. हालांकि, उसे यह पता नहीं चलता कि बटन पर क्लिक करने से क्या होगा या उसे किस पेज पर रीडायरेक्ट किया जाएगा.
इसलिए, मॉडर्न एजेंट कई मोडैलिटी को एक साथ इस्तेमाल करते हैं. वे इंटरैक्टिव एलिमेंट की साफ़-सुथरी और व्यवस्थित सूची पाने के लिए, DOM और ऐक्सेसिबिलिटी ट्री का इस्तेमाल करते हैं. इसके बाद, वे लेआउट, ग्रुपिंग, और विज़ुअल क्यू को समझने के लिए, उस सूची को विज़ुअल रेंडरिंग के साथ क्रॉस-रेफ़रंस करते हैं.
हमारा काम, इन सभी चैनलों पर सटीक सिग्नल उपलब्ध कराना है.
एजेंट के लिए काम करने वाली वेबसाइटें बनाना
एजेंट को आपकी वेबसाइट पर आसानी से नेविगेट करने में मदद करने के लिए, साइट के इंटरफ़ेस में उन सभी कार्रवाइयों के बारे में साफ़ तौर पर बताया जाना चाहिए जिन्हें किसी व्यक्ति या एजेंट को करना है. यहां कुछ सबसे सही तरीके दिए गए हैं:
- ऐसे एलिमेंट इस्तेमाल न करें जो दिखते नहीं हैं. पारदर्शी ओवरले से बचें, क्योंकि ये इंटरैक्टिव एलिमेंट को छिपाते हैं. एजेंट की ओर से की गई विज़ुअल जांच में, ढके हुए नोड हटाए जा सकते हैं. भले ही, नोड पारदर्शी दिखता हो.
- सिमेंटिक (पूरी जानकारी देने वाले) एचटीएमएल का इस्तेमाल करें. सिमेंटिक एचटीएमएल का इस्तेमाल करके, कार्रवाई करने वाले एलिमेंट डिज़ाइन करें. उदाहरण के लिए, बदले गए
<div>और<span>एलिमेंट के बजाय,<button>और<a>टैग का इस्तेमाल करें. एजेंट, पहले वाले को इंटरैक्टिव एलिमेंट के तौर पर पहचानते हैं.- अगर सिमैंटिक एचटीएमएल का इस्तेमाल नहीं किया जा सकता, तो हमेशा एलिमेंट को सही
roleऔरtabindexदें. उदाहरण के लिए,<div role="button">. - इनपुट से लिंक करने के लिए,
<label>टैग परforएट्रिब्यूट जोड़ें. इससे एआई एजेंट को फ़ील्ड के मकसद को समझने में मदद मिलती है. इसके लिए, वह लेबल टेक्स्ट दिखाता है जो सीधे तौर पर ऐक्शन स्ट्रिंग से जुड़ा होता है.
- अगर सिमैंटिक एचटीएमएल का इस्तेमाल नहीं किया जा सकता, तो हमेशा एलिमेंट को सही
- विज़ुअल क्यू के लिए सीएसएस का इस्तेमाल करें. सीएसएस में
cursor: pointerसेट करें. यह कार्रवाई करने के लिए एक अहम सिग्नल है. - विज़ुअल विश्लेषण के लिए, कम से कम साइज़ की ज़रूरी शर्तें पूरी करना. पक्का करें कि किसी कार्रवाई को पूरा करने के लिए ज़रूरी सभी इंटरैक्टिव एलिमेंट दिख रहे हों और उनका साइज़ आठ स्क्वेयर पिक्सल से ज़्यादा हो. इससे, मॉडल के विज़ुअल विश्लेषण में उन्हें फ़िल्टर होने से बचाया जा सकेगा.
- लेआउट में बदलाव न हो. अगर आपकी वेबसाइट का लेआउट लगातार बदलता रहता है, तो स्क्रीनशॉट लेने वाले एजेंट भ्रमित हो सकते हैं. उदाहरण के लिए, जब प्रॉडक्ट पेज पर कार्ट में जोड़ें बटन, हर प्रॉडक्ट कैटगरी के लिए अलग-अलग जगह पर होता है.
- WebMCP टूल बनाएं. इससे, एपीआई के साथ काम करने वाले एजेंट के लिए टास्क और कार्रवाइयां तय की जा सकती हैं.
अगले चरण
हम साइट को "एजेंट-रेडी" बनाने के लिए जो भी सुझाव देते हैं उनसे साइटें, इंसानों के लिए भी बेहतर बनती हैं.
वेबसाइटों को एआई एजेंट के हिसाब से बनाने से, वेबसाइटों को अच्छी तरह से स्ट्रक्चर करने, उन्हें आसानी से ऐक्सेस करने लायक बनाने, और सिमैंटिक वेबसाइटें बनाने के बुनियादी सिद्धांतों को फिर से लागू करने में मदद मिलती है.
- अपने A11y ट्री की जाँच करें: मौजूदा टूल का इस्तेमाल करके, यह पक्का करें कि आपकी साइट की हैरारकी को मशीन पढ़ सकती हो और वह स्थिर हो.
- WebMCP के बारे में पढ़ें. यह एक प्रस्तावित वेब स्टैंडर्ड है. इससे वेबसाइटों को एजेंट के साथ इंटरैक्ट करने में मदद मिलती है. ये एपीआई, Chrome में प्रोडक्शन के लिए एक्सपेरिमेंट के तौर पर उपलब्ध हैं. साथ ही, इनके लिए ऑरिजिन ट्रायल भी उपलब्ध है.