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