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