Оптимизация для доступности и SEO: изображения, видео и нетекстовые элементы

Оптимизация для доступности и SEO

Некоторые примеры изображений и нетекстовых элементов:
Изображения (включая графики и диаграммы, красиво написанные слова, декоративные и фоновые изображений, изображения с веб-камеры, фотографии
Инфографика
Графические карты
Анимации
Графические кнопки
Капчи
Вот некоторые из вещей, которые вы можете оптимизировать в изображениях и нетекстовых элементах для лучшей доступности.

Атрибуты Alt

Атрибуты изображений ALT в SEO используются для описания поисковым ботам, что это за изображение или куда оно ведёт в случае, если оно является ссылкой. Если это ссылка, атрибут Alt действует как якорный текст с ключевым словом, помогая Google понять контекст целевой страницы.

Alt-атрибуты изображений также можно прочитать с экрана.

Атрибуты Alt — беспроигрышная оптимизация для доступности и SEO, но есть некоторые вещи, которые нужно иметь в виду. В частности, это первые два пункта из приведённых ниже.

Правила применения атрибута Alt:

Не используйте Alt-атрибуты для декоративных изображений: Декоративное изображение облаков на вашем сайте медицинского страхования не имеет целью получить поисковый трафик и не является полезным в предоставлении контекста для чтения с экрана. Декоративное изображение может выглядеть красиво до зрячих пользователей и при этом не мешать пользователям с ослабленным зрением осуществлять навигацию по странице.
Не используйте Alt, когда есть также и текстовая ссылка: Если изображение является ссылкой и есть её текст рядом с изображением, который указывает на то же место назначения, читатель прочтёт их обе, и этот повтор покажется ему странным. В таком случае используйте нулевой Alt для изображения и оставьте якорный текст, указывающий на целевую страницу. Оптимизаторы, которые хотят поставить атрибуты Alt на изображение, могут оспорить это — ведь им нужно помочь ему занять место в поиске изображений. То, что я рекомендовал бы в таком случае — использовать атрибуты Alt для изображений на целевой странице, так как это страница, которую вы хотели бы так или иначе видеть в SERPS (наверно, замечательная тема для обсуждения более в комментариях).
Будьте кратки или используйте заголовки. В сети есть рекомендации по поводу того, что экранная читалка JAWS не справляется с атрибутами Alt более 125 символов. Правда или нет, но лучше делать атрибуты Alt короткими. Если вы хотите понять почему — добавьте расширение для чтения с экрана в ваш браузер (например, ChromeVox для Chrome или Fangs для Firefox) и перемещайтесь по странице с изображениями, которые имеют длинные атрибуты Alt. Если вам много что сказать об изображении, поместите это всё в текст заголовка или дайте описание в тексте на странице, а не в Alt.
Не напихивайте в текст ключевых слов — пишите естественно. Давайте снова рассмотрим сайт медицинского страхования с декоративными изображениями облаков. SEO-специалист может рассмотреть пять декоративных изображений облаков на целевой странице, как пять возможностей напихать фразы «медицинское страхование, медицинское страхование инструменты, инструменты для здоровья» и т.д. в атрибуты Alt. Не делайте этого. Это не только шум для экранных читалок, это сбивает с толку и раздражает. Кроме того, никто на самлм деле не ищет изображения для «медицинского страхования», — и даже если бы искали, то вряд ли бы они нажали на изображение облаков в результатах поиска. Кроме того, убедитесь, что ваши атрибуты Alt описательные и имеют смысл — пишите их для людей, а не просто делайте набор ключевых слов для ботов.

Подписи к изображениям

Google может сегментировать текст рядом с изображением, чтобы приписать его к изображению, и даже создавать свои собственные подписи; поэтому, текст рядом с картинкой может помочь обеспечить контекст и повлиять на ранжирование. Подписи также обеспечивают контекст для экранных читалок, часто предоставляя больше контекста, чем атрибут Alt, или выполнять его роль, если он не загружается.

Правила написания подписей к изображениям:

Не используйте атрибут Alt, если есть подпись. Так же, как и якорная текстовая ссылка, описание изображений в атрибутах Alt и подписи могут повторяться. Это тоже может быть спорным моментом, ведь оптимизаторы, наверно, хотели бы использовать оба. Но подумайте, как это будет выглядеть в экранной читалке, которая читает как заголовок, так и атрибут ALT, и попытайтесь найти лучшее решение, которое будет работать в любом случае.
Описывайте то, про что вы пишете подписи. Например, можно написать «Рисунок 1:» это будет правильно понято людьми, использующими вспомогательные технологии.
Также можете использовать тег <figcaption>: теги <figure> и <figcaption> могут применяться к изображениям или других элементам страницы. Figcaption не обязательно оптимизировать для SEO и чтения с экрана, но похоже, Google действительно пытается индексировать текст внутри тега безотносительно того, распознает он этот тег или нет. И, несмотря на то, что figcaption не всегда распознается экранными читалками, текст может рассматриваться как связанный с изображением элемент для чтения с экрана и (я надеюсь) все равно быть полезным.
Текст в качестве изображений

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

Правила использования текста вместо изображений:

Не следует использовать такой текст в качестве для важной информации. Если вы вынуждены использовать текст в качестве изображения, не используйте атрибут alt, чтобы описать его, если он должен быть прочитан поисковыми роботами и экранными читалками.
Подумайте о стилизации настоящего текста в качестве альтернативы. Если вам нужно, чтобы текст выглядел определенным образом, стилизуйте его с помощью HTML + CSS или используйте SVG (Scalable Vector Graphics).
Инфографика

Инфографика долгое время была популярна среди оптимизаторов для привлечения ссылок, повышающих рейтинг. Также оптимизаторы часто предоставляют поисковым системам и контекст инфографики, и различные его части.

Для доступности нужно иметь возможность легко определять, что изображает инфографика. Экранные читалки, в отличие от поисковых систем, не могут определить контекст инфографики страницы, используя текст ссылки и контент сотен страниц, ссылающихся на вашу инфографику. Для них все сводится к кодовым сигналам на странице, и вы можете себе представить, что описание сложной инфографики будет тяжеловато для атрибута Alt. Кроме того, подумайте об использовании цветов для пользователей-дальтоников или о проблеме, частой для текста в виде картинок (плохая читаемость, пикселизированность при изменении размера), которые мы рассмотрели выше.

Не существует простого тега <инфографика>, который бы позволял вам добавлять длительное, подробное описание инфографики, подобное длинному атрибуту alt (хотя есть опция longdesc). Я мог бы порекомендовать вам проверить эти тактики, чтобы увидеть, что лучше всего подходит для вас и вашей конкретной ситуации:

Правила использования инфографики:

Не описывайте все в атрибуте ALT. Это ужасно неудобно для пользователей, использующих экранные читалки (невозможность перемещаться по тексту, копировать, вставлять его и т.д.). Используйте ALT так, как его надо использовать, а для длинных описаний выбирайте другой метод.
Придерживайтесь требований цветового контраста. Планируйте заранее, когда выбираете цвета для инфографики. Используйте цвета, соответствующие минимальным требованиям контрастности. Помните об этом, и это поможет вам.
Подумайте об использовании ARIA-describedby. Атрибут ARIA (Accessible Rich Internet Application) читается как дополнение к alt-тексту изображения и разрешает длинные описания. Обратите внимание, что поскольку describedby является дополнением к alt-тексту изображения, он может повторяться.
Атрибут longdesc: Этот атрибут изображений позволяет обеспечить машиночитаемую ссылку на длинные описания изображений (либо в пределах страницы, либо на отдельной странице), но не очень хорошо поддерживается и, насколько мне известно, не является работающей SEO-техникой.
Также можете подумать об альтернативных вариантах скрытого текста.
Как создать свою инфографику с помощью CSS.
Это отличное решение. Ниже приведены две страницы с одинаковой инфографикой и то, как каждая из них кэшируется в Google. Одна из них — файл изображения с текстом и ссылками на нижней странице. Другая — инфографика с индексируемым текстом и ссылками, созданными с помощью HTML + CSS.
Слева: инфографика как изображение (страница также предоставляет инфографический текст на странице).

Справа: инфографика, сделанная средствами HTML и CSS.

Оптимизация для доступности и SEO1

Как вы заметили, они выглядят невероятно похожими.

Давайте посмотрим на код. Вот Google-кэш инфографического текстового контента каждой страницы.

Вверху: кэш Google (частичный) инфографического текста, сделанного как изображение.

Внизу: кэш Google (частичный) инфографического текста, сделанного с помощью HTML и CSS.

Оптимизация для доступности и SEO2

Оптимизация для доступности и SEO3
Оба решения являются индексируемыми и считываемыми с экрана. Версия CSS делает это без необходимости дублировать информацию в тексте на странице для посетителей с нормальным зрением.

Возможно, вы заметили, что версия CSS также имеет дополнительные полезные качества: отсутствие заголовков разделов, видимых экранными читалками, но не заметных в инфографике.

Транскрипция, субтитры и подписи к видео

Транскрипция видео

Видео-транскрипции — это текст, предоставляемый вместе с видео. Видео транскрипции полезны для посетителей с нарушениями слуха, которые не могут слышать звук видео или понимать слова людей, говорящих что-то на другом языке или с сильным акцентом. Это также полезно тем, кто смотрит видео со звуком, который тяжело услышать, в громкой комнате или когда звук нужно отключить.

Точно так же для поисковых систем видео-стенограммы описывают содержание видео при помощи текста.

Видео-субтитры и подписи

Субтитры и подписи — синхронизированный по времени текст, идущий одновременно с видео. Субтитры обеспечивают диалог, в то время как подписи помимо этого еще и описывают другие звуки, такие, как музыка и звуковые эффекты, а также дают информацию о дикторе.

Варианты предоставления дополнительного текста для вашего видео-контента включают в себя:

Добавление на страницу расшифровки в виде текста. Вы можете просто добавить транскрипцию в текстовой форме на ту же страницу, что и видео. Вы можете набрать её самостоятельно, а также использовать инструменты или услуги, чтобы сделать это.
Команды HTML5 <video> and <track>. Тег HTML5 <track> в элементе <video> или <audio> позволяет добавлять видео на свою страницу и указывать текстовый файл с текстом транскрипции в формате .vtt. Насколько я знаю, Google может индексировать файлы .vtt, но я не вижу каких-либо четких примеров, когда Google ассоциировал текстовый файл .vtt со страницей-источником видео.
Добавьте интерактивную расшифровку. Используйте сервис, создающий интерактивную стенограмму, где транскрипт синхронизирован по времени и может быть использован в качестве навигации для видео, как стенограммы TED talks.
Стенограммы, субтитры и закрытые подписи YouTube автоматизируются с различной степенью точности, но они невероятно удобны, если вы выкладываете ваше видео на YouTube. Хотя автоматизированную транскрипцию нужно всегда проверять — она особенно плохо работает с акцентами или фоновым шумом.

Правила создания видео-субтитров и подписей:

Предоставляйте видео (и / или аудио) стенограммы. Время и усилия, которые потребуются, чтобы обеспечить текстовые альтернативы, могут помочь поисковым системам и зрителям, нуждающимся в текстовом сопровождении, понять содержание видеоролика.
Загружайте и исправляйте стенограммы и подписи к YouTube: Автоматизированные транскрипции YouTube удобны, но, как правило, странны и неправильны, поэтому они должны быть отредактированы. Наличие правильного текста полезно для ваших зрителей, зависящих от транскриптов и, когда поисковые системы индексируют текстовые транскрипции, их содержание может помочь поднять страницу с видео в результатах поиска.
Обеспечивайте контекст. Когда это имеет смысл (особенно в подписях), указывайте имена говорящих и другой звуковой контекст, такой, как музыка, соответствующие звуки, смех, аплодисменты, крики, плач и т.д.
Не спамьте. Не набивайте стенограммы ключевыми словами. Это ужасно для пользователя, и в зависимости от вашей платформы, стенограмма необязательно может быть проиндексирована поисковыми системами, поэтому будьте естественными.