באתר שלך יש סוג חדש של מבקרים. חלק מהמשתמשים האנושיים עוברים מניווט ידני להעברת משימות שקשורות ליעדים לסוכני AI. המערכות האוטונומיות האלה יכולות לפרש קלט, לתכנן ולבצע פעולות בשם המשתמש.
עם זאת, הרבה מהאתרים שלנו מעוצבים בצורה יפהפייה בשביל בני אדם, עם מצבי ריחוף מורכבים, פריסות משתנות ותנועה חלקה. הפונקציונליות הזו לא עובדת אצל נציגים.
איך נציגי התמיכה רואים את האתר שלכם
הסוכנים לא מסתכלים על האתר שלכם במסך. הם פועלים על ייצוג של האתר בפורמט שמחשב יכול לקרוא. האיכות של הייצוג הזה קובעת את הביצועים שלהם.
יש 3 דרכים עיקריות שבהן נציגים יכולים לצפות באתר שלכם: צילומי מסך, HTML גולמי ועץ הנגישות.
צילומי מסך
הסוכן מצלם תמונה של הדף שעבר רינדור ומשתמש במודל ראייה כדי לזהות רכיבים. על סמך צילום המסך, הסוכן יכול לזהות שסרגל החיפוש בפינה השמאלית העליונה הוא חיפוש גלובלי, ושתיבה באמצע היא כנראה שדה טופס. רמזים חזותיים יכולים לעזור, כי סוכנים יכולים להשתמש בצבע, בגודל ובמיקום כדי לקבוע את החשיבות. סביר להניח שמשתמשים יתייחסו ללחצן גדול עם הכיתוב מחיקה בזהירות רבה יותר מאשר לקישור קטן עם הכיתוב 'עזרה'. עם זאת, ניתוח צילומי מסך יכול להיות איטי ויקר (מבחינת טוקנים בשימוש), ולכן עדיף להשתמש בו כגיבוי כשהמבנה מבלבל.
HTML
הסוכן מנתח את ה-DOM וקורא את ה-HTML. הוא מבין איך הרכיבים מוטמעים, את ההיררכיה הלוגית של עץ ה-DOM, מאפיינים כמו מזהים (ID) ומחלקות שמגדירים את המבנה, ומחרוזות של נתונים גולמיים שמהוות את עמוד השדרה של המידע באתר. כך הסוכן יכול להבין את הקשר בין הרכיבים. אם הלחצן 'לקנייה' נמצא בתוך מאגר מוצרים, הסוכן מניח שהלחצן שייך לאותו מוצר ספציפי.
עץ הנגישות
עץ הנגישות הוא API מקורי של הדפדפן שמזקק את ה-DOM למה שהכי חשוב: תפקידים, שמות ומצבים של רכיבים אינטראקטיביים. זהו הסיכום הסמנטי של הדף, שמשמש טכנולוגיה מסייעת. עבור סוכן AI, הוא מתפקד כמפה ברמת דיוק גבוהה שמתעלמת מה'רעש' החזותי של CSS כדי להתמקד בשימושיות טהורה. הנציג יכול ללמוד את הכוונה הפונקציונלית של כל מתג, פס הזזה ושדה להזנת קלט על ידי ניתוח העץ הזה.
שילוב של שיטות שונות
הסתמכות על קלט יחיד יוצרת פער סמנטי. לדוגמה, ב-DOM, סוכן יכול לראות <div> בלי לדעת שבעצם הגדרתם את זה כלחצן פונקציונלי באמצעות CSS ו-JavaScript. יכול להיות שסוכן יזהה את המיקום של הלחצן במסך בצילום מסך, אבל הוא עדיין לא ידע מה היעד או הפעולה שהלחצן אמור להפעיל.
לכן, סוכנים מודרניים משלבים בין כמה אופנים. הם משתמשים ב-DOM ובעץ הנגישות כדי לקבל רשימה נקייה ומובנית של רכיבים אינטראקטיביים, ואז משווים אותה עם עיבוד חזותי כדי להבין את הפריסה, הקיבוץ והרמזים החזותיים.
התפקיד שלנו הוא לספק אותות נקיים בכל הערוצים האלה.
בניית אתרים שמתאימים לסוכנים
כדי לעזור לנציגים להתמצא באתר שלכם, כדאי לבצע את הפעולות הבאות:
- כל הפעולות הנדרשות, שבוצעו על ידי אדם או סוכן, צריכות להופיע בבירור בממשק.
- מוודאים שהפריסה יציבה. סביר להניח שסוכנים שמצלמים צילומי מסך יתבלבלו אם פריסת האתר משתנה כל הזמן, למשל אם הלחצן הוספה לעגלת הקניות בדף המוצר נמצא במיקום שונה בכל קטגוריית מוצרים.
- אל תשתמשו באלמנטים 'וירטואליים' או בשכבות שקופות שעלולות להסתיר אלמנטים אינטראקטיביים. ניתוח ויזואלי שמתבצע על ידי הסוכן עשוי להסיר צמתים שמכוסים, גם אם הצומת נראה שקוף.
- עיצוב רכיבים שמשתמעת מהם פעולה לביצוע באמצעות HTML סמנטי. עדיף להשתמש בתגים
<button>ו-<a>במקום ברכיבים<div>ו-<span>שעברו שינוי. הסוכנים מזהים את הרכיבים האלה כאינטראקטיביים.- אם אי אפשר להשתמש ב-HTML סמנטי, תמיד צריך לספק את הרכיב המתאים
roleו-tabindex. לדוגמה,<div role="button">.
- אם אי אפשר להשתמש ב-HTML סמנטי, תמיד צריך לספק את הרכיב המתאים
- הגדרת
cursor: pointerב-CSS, שהוא אות חזק לביצוע פעולה. - מוסיפים את המאפיין
forלתגי<label>כדי לקשר אותם לקלט. כך סוכן ה-AI מבין את המטרה של השדה, כי מצוין בו טקסט התווית שמצורף ישירות למחרוזת הפעולה. - כדי למנוע סינון של רכיבים אינטראקטיביים על ידי ניתוח ויזואלי, צריך לוודא שהשטח הגלוי שלהם גדול מ-8 פיקסלים רבועים.
השלבים הבאים
כל ההמלצות שלנו להכנת אתר לשימוש על ידי סוכנים משפרות את האתר גם עבור בני אדם.
הפיכת אתרים לידידותיים לסוכני AI מעודדת אתכם לחזור לעקרונות הבסיסיים של בניית אתרים נגישים, סמנטיים ומובנים היטב.
- מידע נוסף על WebMCP, תקן אינטרנט מוצע שמטרתו לעזור לאתרים ליצור אינטראקציה עם סוכנים. אפשר להירשם לתוכנית התצוגה המקדימה המוקדמת כדי להתחיל להתנסות.
- ביצוע ביקורת על עץ הנגישות: כדאי להשתמש בכלים קיימים כדי לוודא שההיררכיה של האתר ניתנת לקריאה על ידי מכונה ויציבה.