בניית אתרים שמתאימים לסוכנים

Kasper Kulikowski

Omkar More

סוג חדש של מבקרים נכנס לאתר שלך. חלק מהמשתמשים האנושיים עוברים מניווט ידני להעברת משימות שקשורות ליעדים לסוכני AI. המערכות האוטונומיות האלה יכולות לפרש קלט, לתכנן ולבצע פעולות בשם המשתמש.

עם זאת, הרבה מהאתרים שלנו מעוצבים בצורה יפהפייה בשביל בני אדם, עם מצבי ריחוף מורכבים, פריסות משתנות ותנועה חלקה. הפונקציונליות הזו לא עובדת אצל נציגים.

איך נציגי התמיכה רואים את האתר שלכם

הנציגים לא מסתכלים על האתר שלכם במסך. הם פועלים על ייצוג של האתר שניתן לקריאה על ידי מכונה. האיכות של הייצוג הזה קובעת את הביצועים שלהם.

יש 3 דרכים עיקריות שבהן סוכנים יכולים לצפות באתר שלכם: צילומי מסך, HTML גולמי ועץ הנגישות.

צילומי מסך

הסוכן מצלם תמונה של הדף שעבר רינדור ומשתמש במודל ראייה כדי לזהות רכיבים. על סמך צילום המסך, הסוכן יכול לזהות שסרגל החיפוש בפינה השמאלית העליונה הוא חיפוש גלובלי, ושתיבה באמצע היא כנראה שדה טופס. רמזים חזותיים יכולים לעזור, כי נציגים יכולים להשתמש בצבע, בגודל ובמיקום כדי לקבוע את החשיבות. סביר להניח שכפתור גדול עם הכיתוב מחיקה יתפרש כפעולה שצריך לבצע בזהירות רבה יותר מאשר קישור קטן עם הכיתוב 'עזרה'. עם זאת, ניתוח צילומי מסך יכול להיות איטי ויקר (מבחינת טוקנים בשימוש), ולכן עדיף להשתמש בו כגיבוי כשהמבנה מבלבל.

HTML

הסוכן מנתח את ה-DOM וקורא את ה-HTML. הוא מבין איך הרכיבים מוטמעים, את ההיררכיה הלוגית של עץ ה-DOM, מאפיינים כמו מזהים וסיווגים שמגדירים את המבנה, ומחרוזות של נתונים גולמיים שמהוות את הבסיס המידע של האתר. כך הסוכן יכול להבין את הקשר בין הרכיבים.

אם הלחצן Buy Now נמצא בתוך מאגר מוצרים, הסוכן מניח שהלחצן שייך למוצר הספציפי הזה.

עץ הנגישות

עץ הנגישות הוא API מקורי של הדפדפן שמזקק את ה-DOM למה שהכי חשוב: תפקידים, שמות ומצבים של רכיבים אינטראקטיביים. זהו סיכום סמנטי של הדף, שמשמש טכנולוגיה מסייעת. עבור סוכן AI, הוא מתפקד כמפה ברמת דיוק גבוהה שמתעלמת מה'רעש' החזותי של CSS כדי להתמקד בתועלת נטו. בעזרת ניתוח העץ הזה, סוכן יכול ללמוד את הכוונה הפונקציונלית של כל מתג, פס הזזה ושדה להזנת קלט.

שילוב של אמצעי תחבורה

הסתמכות על קלט יחיד יוצרת פער סמנטי. לדוגמה, ב-DOM, סוכן יכול לראות <div> בלי לדעת שבעצם הגדרתם את זה כלחצן פונקציונלי עם CSS ו-JavaScript. בצילומי מסך, יכול להיות שנציג יזהה את המיקום של הלחצן במסך, אבל הוא עדיין לא ידע מה היעד שאליו הלחצן אמור להוביל או איזו פעולה הוא אמור להפעיל.

לכן, סוכנים מודרניים משלבים כמה אופנים. הם משתמשים ב-DOM ובעץ הנגישות כדי לקבל רשימה נקייה ומובנית של רכיבים אינטראקטיביים, ואז משווים אותה עם עיבוד חזותי כדי להבין את הפריסה, הקיבוץ והרמזים החזותיים.

התפקיד שלנו הוא לספק אותות נקיים בכל הערוצים האלה.

בניית אתרים שמתאימים לסוכנים

כדי לעזור לסוכנים להתמצא באתר שלכם, כדאי לפעול לפי ההנחיות הבאות:

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

השלבים הבאים

כל ההצעות שלנו לשיפור האתרים כדי שסוכני תמיכה יוכלו להשתמש בהם בקלות, משפרות גם את חוויית השימוש של בני אדם.

הפיכת אתרים לידידותיים לסוכני AI היא תמריץ להתחייבות מחדש לעקרונות הבסיסיים של בניית אתרים נגישים, סמנטיים ומובנים היטב.

• ביצוע ביקורת על עץ הנגישות: כדאי להשתמש בכלים קיימים כדי לוודא שההיררכיה של האתר ניתנת לקריאה על ידי מכונה ויציבה.
• מידע נוסף על WebMCP, תקן אינטרנט מוצע שמטרתו לעזור לאתרים לקיים אינטראקציה עם סוכנים. ממשקי ה-API זמינים לניסויים בסביבת ייצור ב-Chrome, עם גרסת מקור לניסיון.