На вашем сайте появился новый тип посетителей . Некоторые пользователи переходят от ручной навигации к делегированию целенаправленных действий агентам искусственного интеллекта. Эти автономные системы могут интерпретировать вводимые данные, планировать и выполнять действия от имени пользователя.
Однако многие наши веб-сайты созданы для того, чтобы быть красивыми для людей, с замысловатыми состояниями при наведении курсора, изменяющейся компоновкой и плавной анимацией. Для агентов это функционально не работает.
Как агенты просматривают ваш сайт
Агенты не смотрят на ваш сайт на мониторе. Они работают с машиночитаемым представлением вашего сайта. Качество этого представления определяет их эффективность.
Агенты могут просматривать ваш веб-сайт тремя основными способами: скриншоты, необработанный HTML-код и дерево доступности .
Скриншоты
Агент делает снимок отображаемой страницы и использует модель визуального восприятия для идентификации элементов. На основе скриншота агент может распознать, что строка поиска в правом верхнем углу — это глобальный поиск, а поле посередине, вероятно, является полем формы. Визуальные подсказки могут быть полезны, поскольку агенты могут использовать цвет, размер и близость для определения важности. Большая кнопка «Удалить », скорее всего, будет воспринята с большей осторожностью, чем маленькая ссылка «Справка». Однако анализ скриншотов может быть медленным и затратным (с точки зрения используемых токенов), поэтому лучше использовать его в качестве резервного варианта, когда структура страницы запутанная.
HTML
Агент анализирует DOM и считывает HTML-код. Он понимает, как элементы вложены друг в друга, логическую иерархию дерева DOM, атрибуты, такие как идентификаторы и классы, определяющие структуру, а также необработанные строковые данные, составляющие информационную основу сайта. Это помогает агенту понять взаимосвязь между элементами. Если кнопка «Купить сейчас» находится внутри контейнера товара, агент предполагает, что эта кнопка относится к данному конкретному товару.
Дерево доступности
Дерево доступности — это встроенный в браузер API, который выделяет из DOM наиболее важные элементы: роли, имена и состояния интерактивных элементов. Это семантическое резюме страницы, используемое вспомогательными технологиями. Для ИИ-агента оно функционирует как высокоточная карта, игнорирующая визуальный «шум» CSS и фокусирующаяся на чистом практическом применении. Интерпретируя это дерево, агент может изучить функциональное назначение каждого переключателя, ползунка и поля ввода.
Комбинированные методы
Опора на один элемент ввода создает семантический разрыв. Например, в DOM агент может увидеть <div> не зная, что вы на самом деле настроили его как функциональную кнопку с помощью CSS и JavaScript. При использовании скриншотов агент может определить местоположение кнопки на экране, но при этом не будет знать, для чего она предназначена или какое действие должна выполнять.
Поэтому современные агенты комбинируют несколько модальностей. Они используют DOM и дерево доступности, чтобы получить чистый, структурированный список интерактивных элементов, а затем сопоставляют его с визуальным представлением, чтобы понять структуру, группировку и визуальные подсказки.
Наша задача — обеспечить бесперебойное вещание по всем этим каналам.
Создавайте веб-сайты, удобные для агентов.
Чтобы помочь агентам ориентироваться на вашем сайте, рассмотрите следующие варианты:
- Все необходимые действия, предпринимаемые человеком или агентом, должны быть четко отражены в интерфейсе.
- Обеспечьте стабильную структуру сайта. Агенты, делающие скриншоты, скорее всего, будут сбиты с толку, если структура вашего сайта постоянно меняется, например, когда кнопка «Добавить в корзину» на странице товара находится в разных местах для каждой категории товаров.
- Избегайте «призрачных» элементов или прозрачных наложений, которые могут скрывать интерактивные элементы. Визуальный анализ, выполняемый агентом, может отбрасывать закрытые узлы, даже если узел кажется прозрачным.
- Создавайте интерактивные элементы с использованием семантического HTML. Отдавайте предпочтение тегам
<button>и<a>перед модифицированными элементами<div>и<span>. Агенты распознают их как интерактивные.- Если вы не можете использовать семантический HTML, всегда присваивайте элементу соответствующую
roleиtabindex. Например,<div role="button">.
- Если вы не можете использовать семантический HTML, всегда присваивайте элементу соответствующую
- В CSS установите
cursor: pointer, что является явным сигналом для возможности выполнения действия. - Добавьте атрибут
forк тегам<label>, чтобы связать их с полями ввода. Это поможет агенту ИИ понять назначение поля, указав текст метки, непосредственно связанный со строкой действия. - Убедитесь, что все интерактивные элементы, необходимые для продолжения взаимодействия пользователя с сайтом, имеют видимую область размером более 8 квадратных пикселей, чтобы избежать их фильтрации при визуальном анализе.
Следующие шаги
Все наши рекомендации по подготовке сайта к использованию поисковыми агентами также улучшают его удобство для пользователей.
Создание веб-сайтов, удобных для работы с ИИ-агентами, стимулирует возвращение к основополагающим принципам построения хорошо структурированных, доступных и семантических веб-сайтов.
- Ознакомьтесь с WebMCP , предлагаемым веб-стандартом, помогающим веб-сайтам взаимодействовать с агентами, и зарегистрируйтесь в программе раннего предварительного просмотра, чтобы начать экспериментировать.
- Проведите аудит вашего дерева доступности : используйте существующие инструменты, чтобы убедиться, что иерархия вашего сайта машиночитаема и стабильна.