Мультимодальна готовність: Зображення, альтернативний текст та діаграми, які моделі можуть цитувати

Мультимодальна готовність: Зображення, альтернативний текст та діаграми, які моделі можуть цитувати

Автор: Лукас Ріхтер, Старший стратег з автоматизації контенту

Діаграма може за секунди пояснити те, що сторінка тексту описувала б хвилинами. Але якщо її значення існує лише у файлі зображення, багато читачів — і багато пошукових систем — можуть не зрозуміти суті.

Ось чому мультимодальна готовність полягає не в додаванні більшої кількості зображень. Вона полягає в тому, щоб упакувати кожен корисний візуал так, щоб його значення було зрозумілим на зображенні, у тексті сторінки та в коді, який їх поєднує.

Існує одне важливе обмеження: якісний альтернативний текст може допомогти системі зрозуміти зображення, але це не гарантує, що AI-асистент процитує сторінку. Розуміння зображення та вибір веб-сторінки як джерела — це різні кроки.

Що показують — і не показують — дослідження

Підписи можуть допомогти з візуальними запитаннями

Деякі дослідження показують, що текст, поєднаний із зображенням, може допомогти моделі відповісти на запитання щодо нього. Дослідження 2019 року виявило, що додавання підписів у стилі абзаців до зображень покращило продуктивність у завданні відповідей на візуальні запитання. Підписи надавали деталі, які було легше співставити з питанням, ніж лише особливості зображення. Але це був експеримент моделі, а не тест на те, чи збільшує додавання альтернативного тексту до живої веб-сторінки цитування AI. ACL Anthology paper (aclanthology.org)

Діаграми та графіки також залишаються важкими для точного зчитування моделями. В одному бенчмарку з питань щодо діаграм дослідники виявили слабкі місця в таких завданнях, як пошук взаємозв'язків між значеннями. Їхні результати покращилися завдяки спеціальному текстовому запиту, що вказує на цінність чіткої мови, але не доводить, що якийсь один формат сторінки принесе більше цитувань. ChartInsights benchmark (arxiv.org)

Ширший урок практичний: візуал може містити корисні докази, але моделі все ще можуть пропускати дрібні підписи, точні значення або шлях між кроками. Наприклад, рекомендації OpenAI щодо зору попереджають про дрібний текст, діаграми, елементи, позначені кольором, та точне просторове мислення. OpenAI vision guide (developers.openai.com)

Кращий альтернативний текст — це не перемикач цитування

Пошукові системи можуть використовувати описи зображень та навколишній текст, щоб зрозуміти, що показує зображення. Google заявляє, що використовує альтернативний текст, комп'ютерний зір та вміст сторінки разом при розумінні зображень для Пошуку. Він також рекомендує розміщувати зображення поблизу відповідного тексту. Це підтримує написання корисного альтернативного тексту, але не є доказом того, що сам по собі альтернативний текст змушує AI-асистента цитувати сторінку. Google Image SEO guidance (developers.google.com)

Докази, розглянуті для цієї статті, не встановлюють, що зміна лише альтернативного тексту підвищує показники цитування в нинішніх AI-асистентах. Багато систем не пояснюють точно, які елементи сторінки вони читають або чому вони вибирають одне джерело замість іншого. Google заявляє, що його функції AI-пошуку не мають спеціальних вимог до розмітки та не гарантують, що відповідна сторінка буде показана. Google’s AI features guidance (developers.google.com)

Тож розглядайте покращену візуальну упаковку як розумну, перевіряєму гіпотезу, а не обіцянку. Вона може зробити сторінку легшою у використанні, легшою для аналізу та з більшою ймовірністю міститиме текст, який безпосередньо відповідає на запитання. Чи процитує асистент її після цього, це окремий результат для вимірювання.

Упаковуйте кожен важливий візуал як доказ

Сильний візуальний пакет складається з чотирьох частин: зображення, лаконічний альтернативний текст, підпис та пояснення тексту поблизу. Кожна частина має свою функцію.

1. Пишіть альтернативний текст як коротку заміну

Альтернативний текст повинен надавати читачам, які не можуть бачити зображення, інформацію, необхідну для розуміння сторінки. Для простої діаграми це може вміститися в одне речення. Для складної діаграми чи блок-схеми альтернативний текст повинен ідентифікувати візуал та його основне призначення, а не втискати кожну деталь в один довгий опис.

Наприклад:

alt="Checkout flow with a retry path after payment failure."

Для декоративного зображення використовуйте порожній альтернативний текст (alt=""), щоб допоміжні інструменти могли його пропустити. Не залишайте альтернативний текст порожнім і не заповнюйте його повторюваними пошуковими термінами. W3C’s complex-image guidance та Google’s image guidance розрізняють короткі текстові альтернативи від повніших описів. (w3.org)

2. Використовуйте підпис, щоб викласти суть ілюстрації

Підпис повинен допомогти читачеві зрозуміти, чому зображення важливе. Мітка, наприклад, «Діаграма архітектури», зазвичай занадто розпливчаста.

Корисніший підпис:

Рисунок 1. Невдалий платіж повертає покупця до оплати; кошик залишається відкритим.

Використовуйте елементи HTML <figure> та <figcaption> для зв'язку підпису з його зображенням. Чіткий номер або назва ілюстрації також полегшує посилання на той самий візуал у тексті статті. Google’s documentation style guide наводить приклади ілюстрацій, поєднаних з альтернативним текстом, підписами та довшими описами. (developers.google.com)

3. Помістіть повне пояснення на сторінку

Складна діаграма зазвичай говорить більше, ніж може вмістити короткий альтернативний опис. Помістіть важливе значення також у звичайний текст сторінки. Для блок-схеми опишіть кроки та що відбувається на кожній гілці. Для графіка включіть період часу, одиниці виміру, ключові значення та тенденцію. Для технічної діаграми назвіть частини та поясніть, як вони з'єднуються.

W3C рекомендує короткий опис плюс повніший текстовий опис для складних зображень. Цей повніший опис може бути в самій статті, поблизу зображення та доступним для всіх читачів. Таблиця даних може допомогти, коли важливі точні значення. W3C WAI: Complex Images (w3.org)

4. Зберігайте послідовність назв та міток

Якщо ваша діаграма називає щось «активацією», використовуйте те саме слово в підписі та статті. Якщо ілюстрація показує важливий результат, викладіть його в реченні поблизу: «На Рисунку 2 більшість реєстрацій відпадають до створення першого проекту».

Це не чарівний трюк для цитування. Це спосіб зробити докази сторінки легшими для відстеження та цитування. Google заявляє, що немає спеціальної схеми для AI Overviews або AI Mode; корисна робота полягає в збереженні важливого вмісту в тексті та забезпеченні відповідності структурованих даних тому, що люди можуть бачити. (developers.google.com)

Ось простий шаблон для блок-схеми:

html

The key point in the checkout flow is that a payment failure does not clear the cart.

Figure 1 in words: Cart → shipping → payment → confirmation. If payment fails, the shopper returns to payment and keeps the cart.

Короткий альтернативний текст ідентифікує діаграму. Підпис подає її основну ідею. Останнє речення пояснює шлях звичайним текстом. Для графіка з точними значеннями додайте також таблицю або список цих значень.

Переконайтеся, що краулери можуть отримати зображення

Добре описане зображення все ще повинно бути доступним. Використовуйте звичайний HTML-елемент <img> із справжнім URL-адресою src. Google заявляє, що може знаходити зображення в src елемента <img>, але не індексує фонові зображення CSS таким же чином. Його рекомендації щодо зображень також підтримують зображення, розміщені на CDN, у картах сайтів зображень. Google Image SEO guidance (developers.google.com)

Для CDN перевірте основні пункти:

• URL-адреса зображення працює без логіна або токена доступу, термін дії якого закінчується.
• Дозволи краулера сторінки та правила безпеки CDN дозволяють доступ.
• URL-адреса зображення на відтвореній сторінці є стабільною та повертає правильний файл.
• Адаптивні зображення включають резервний src.
• Важливий текст не прихований на зображенні, якщо він міг би бути справжнім текстом сторінки.
• Зображення, що знаходяться нижче першого екрана, завантажуються, коли стають видимими — а не тільки після того, як людина клікає або прокручує сторінку способом, який краулер не може відтворити.

Рекомендації Google щодо відкладеного завантаження (lazy-loading) говорять, що URL-адреси зображень повинні з'являтися у відтвореному HTML та завантажуватися, коли вони потрапляють у поле зору. Вони також не рекомендують відкладене завантаження зображень, які вже видимі при відкритті сторінки. Google’s lazy-loading guidance (developers.google.com)

Перевірте дозволи за платформою також. OpenAI документує OAI-SearchBot як свій пошуковий краулер і стверджує, що він відокремлений від GPTBot, який стосується даних для навчання. Дозвіл одного не вимагає дозволу іншого. Це важливо, якщо ви хочете пошукового виявлення, але маєте інші переваги щодо використання для навчання. OpenAI crawler documentation (developers.openai.com)

Перевірте, чи цитуються ваші сторінки за візуальними запитаннями

Не покладайтеся на кілька випадкових запитів чат-бота. Проведіть два тести, оскільки розуміння моделі та веб-цитування — це не одне й те саме.

Тест 1: Чи розуміє модель візуал?

Виберіть набір графіків та діаграм. Напишіть запитання, відповіді на які залежать від них, наприклад:

• Який крок йде після оплати?
• Що відбувається, якщо платіж не вдається?
• У якому місяці був найвищий коефіцієнт конверсії?
• Що, згідно з діаграмою, є основною причиною відтоку користувачів?

Потім порівняйте відповіді моделі за контрольованих умов введення:

1. Лише зображення.
2. Зображення плюс його альтернативний текст та підпис.
3. Зображення плюс ці анотації та текстовий підсумок сторінки або таблиця даних.

Залиште модель, запитання та зображення незмінними. Оцінюйте відповіді на правильність, включаючи точні значення та взаємозв'язки. Це допомагає показати, чи допомагає доданий текст моделі відповідати на ваші запитання. Це не показує, чи знайде або процитує сторінку веб-пошуковий асистент.

Тест 2: Чи цитує пошуковий асистент сторінку?

Для невеликого пілотного проекту з'єднайте подібні сторінки, багаті діаграмами. Додайте повний візуальний пакет до однієї групи; залиште контрольну групу на поточному доступному базовому рівні. Не видаляйте суттєвий альтернативний текст для створення контрольної групи. Підготуйте два набори запитань: ті, що вимагають читання ілюстрації, та звичайні запитання, на які текст сторінки вже відповідає.

Запустіть ті самі запити в пошукових асистентах, які вас цікавлять. Запишіть дату, продукт, запитання, відповідь та процитовану сторінку. Повторюйте перевірки з часом, оскільки результати можуть змінюватися. Зачекайте, доки ваш краулер або пошукові інструменти не покажуть, що оновлені сторінки були перескановані. Google зазначає, що повторне сканування може зайняти дні або довше. (developers.google.com)

Відстежуйте чотири результати:

• Частота цитування: Як часто відповідь цитує сторінку?
• Точність відповіді: Чи правильно асистент зрозумів візуальний факт?
• Підтримка цитування: Чи справді цитована сторінка підтримує відповідь?
• Бізнес-результат: Чи допомогли візит, реферал або лід бізнесу?

Порівняйте результати візуальних запитань з контрольним набором звичайних запитань. Просте порівняння «до і після» може бути оманливим: асистент, його пошуковий індекс та ширша мережа можуть змінюватися одночасно. Збіг сторінок та повторні перевірки допомагають, але невеликий тест все одно слід повідомляти як пілотний проект, а не універсальне правило.

Також будьте точними щодо того, що означає результат. Якщо сторінка цитується частіше після додавання текстового резюме, тест показує, що допоміг весь пакет. Це не доводить, що асистент прочитав саме зображення. Інформаційні панелі цитування можуть показувати, які URL-адреси з'являються у відповідях AI, але не обов'язково, яка частина сторінки була прочитана. Звіт Bing про продуктивність AI, наприклад, повідомляє про цитовані сторінки та інформацію про запити. Bing Webmaster Tools: AI Performance (blogs.bing.com)

Вбудуйте цю роботу у свою контент-систему

Засновники не повинні перемальовувати діаграму вручну щоразу, коли публікують статтю. Але автоматизація не повинна вигадувати значення зображення.

Простий робочий процес такий:

1. Автор надає вихідні дані або діаграму, а також основну ідею, яку він хоче донести до читача.
2. Робочий процес контенту створює чорновий варіант альтернативного тексту, підпису та простого текстового резюме з цих вихідних матеріалів.
3. Людина перевіряє, що опис точний, а мітки, значення та маршрути відповідають візуалу.
4. Сторінка публікує зображення та його текст разом.
5. Повторювана перевірка підтверджує, що читачі та краулери можуть отримати доступ до обох.

Позиція творця — це та частина, яка не повинна автоматизуватися. Наприклад, засновник може захотіти показати не просто те, що кількість реєстрацій падає, а те, що команда вирішила виправити налаштування першого проекту до того, як купувати більше трафіку. Це думка та урок з продукту, а не завдання з підписання.

В автоматизованому контент-двигуні вхідні дані Творця, Аудиторії та Смаку можуть зберігати цю ідею в різних статтях. AutoPod використовує ці дані для керування кожною статтею, тоді як робочий процес обробляє повторювані завдання, такі як створення підписів та перевірка структури сторінки. Модель може упаковувати інсайт. Вона не повинна вигадувати інсайт.

Висновок

Найсильніший аргумент на користь описового альтернативного тексту, підписів, міток ілюстрацій та суміжних підсумків — це не обіцяний підйом SEO. Це те, що вони роблять візуал легшим для розуміння, легшим для доступу та легшим для зв'язку з аргументацією сторінки.

Це також може допомогти асистенту відповісти на візуальне запитання та процитувати сторінку — але підйом не гарантований. Пакуйте діаграми як докази, робіть зображення доступними для завантаження та вимірюйте цитування окремо від розуміння. Це проста система, яка спочатку має цінність для читачів, а також перевіряється потенціал для виявлення AI.