Эта статья, наверное, станет единственной во всём Рунете, так как ни поиск по блогам в «Яндексе», ни поиск по основной базе Google не дал результатов, связанных с проблемой и её решением в частности. Речь о том, насколько полезно значение атрибута Alt, присвоенного изображениям (тегам img) и используемого поисковыми системами, для пользователей.
Не секрет, что поисковые системы используют альтернативный текст к картинкам в своих целях - для ранжирования изображений в поиске по картинкам. Если в значении атрибута Alt содержится осмысленный текст, поисковой системе значительно легче понять, что отображено на картинке. В связи с этим веб-мастера заполняют значение данного атрибута, а оптимизаторы и сотрудники служб поддержки поисковых систем настоятельно рекомендуют заполнять его осмысленным описанием картинки.
Пользователи, посещая какую-либо из страниц сайта, могут видеть альтернативный текст к атрибуту img в те моменты, когда в их браузере отключён показ изображений или загрузка изображения по какой-то причине не удалась. То есть, при отключённом показе изображений пользователь вместо красивого берега и синего моря увидит текст "Песчаный пляж Saldun на острове Циово", а не пустое место.
На этом скриншоте отображена веб-страница сайта www.croatia-travel-info.com. Это первый попавшийся на глаза сайт с картинками песчаных пляжей и, как видно, далеко не самый удачный пример, поэтому заодно взглянем, как же выглядит главная страница российского поискового гиганта.
Так выглядит логотип Яндекса при отключённых изображениях в браузере Firefox
Так выглядит логотип поисковой системы «Яндекс» при отключении автоматической загрузки изображений в Google Chrome
Как видно, ни в первом, ни во втором случае с логотипом «Яндекса» веб-браузер не даёт нам отчётливо понять, что на этом месте должен быть логотип. Во втором случае видна лишь непонятная рамка, а в первом случае виден какой-то фрагмент документа и название поисковой системы, часть которого скрыта за границей участка логотипа. В примере же с песчаными пляжами и вовсе видно лишь сгусток непонятной информации.
Представьте себе, что, увидев такую страницу, подумает пользователь, который не знает о существовании в браузере строки адреса и для того, чтобы попасть на сайт vk.com, сначала пишет в поисковой системе «Яндекс» поисковый запрос "vk.com" или "вконтакте" и переходит по первой ссылке. Мои предположения таковы: пользователь несколько раз кликнет указателем мыши по альтернативному тексту изображения и, увидев, что ничего не происходит, просто покинет сайт, если главной его целью был поиск картинки. Вывод: созданный интерфейс не является интуитивно понятным для самого простого интернет-пользователя, а значит, нуждается в доработке.
На мой взгляд, многочисленные советы по заполнению значения этого атрибута кратким описанием изображения бессмысленны. Страдает от таких советов и побуждаемых ими действий в первую очередь пользователь, а выигрывает лишь поисковая система, в которой текст значения этого атрибута влияет на ранжирование картинок. Проще говоря, традиция заполнения атрибута Alt для картинок - ещё одна ступенька в работе на поисковые системы, а не на результат для пользователей.
С другой стороны, это ничто иное, кроме как вина браузеров, разработчики которых пожелали показывать альтренативный текст вместо незагруженных изображений или изображений, загруженных с ошибкой. Описание картинок полезно показывать, когда отключён показ изображений, но и показываемые пользователю оповещения о том, что какое-то из изображений не удалось загрузить, должны быть более понятными, нежели белый фон с серой рамкой или вылазиющее за пределы слово (фраза).
Существует как минимум три способа решения этой проблемы, которые могут сделать интерфейс блока с изображениями более понятным для пользователя. Каждый из способов имеет свои минусы и плюсы.
1. Атрибут Alt не заполняется.
В этом случае вместо незагруженных изображений пользователь увидит пустое место, заполненное фоном веб-страницы. Будет выглядеть гораздо привлекательнее, чем бессмысленный текст, чаще всего дублирующий заголовок документа.
Этот вариант совершенно не подходит для страниц, на которых изображения являются главным или единственным контентом (фото-порталы и хостинги изображений). Правда, если рассматривать список картинок, то отсутствие текста в значении атрибута Alt было бы самым оптимальным решением, когда изображение по какой-то причине не удалось загрузить.
2. Атрибут Alt заполняется текстом вида "Не удалось загрузить изображение. Попробуйте обновить страницу".
Для большей наглядности к этом примере к изображениям добавлены рамки. Кстати, при незаполненном значении атрибута Alt рамки к изображениям нужно убирать, иначе при неудачной загрузке какого-либо из изображений посетитель вашего сайта увидит непонятную для него полоску цвета рамки.
В этом случае даже самый неопытный интернет-пользователь поймёт, что что-то пошло не так и отобразить весь контент на странице программе не удалось. Не будет лишним указать, что обновление страницы можно вызвать кнопочкой F5, ведь многие новички этого попросту не знают.
Очевидно, этот способ не самый лучший с точки зрения оптимизации изображений для поисковых систем, однако так контент будет наиболее понятен для посетителей сайта. Пользоваться им в тех случаях, когда изображение не обтекается каким-либо текстом, категорически не стоит, если поиск по картинкам является основным источником трафика. Также не стоит использовать такой альтернативный текст для маленьких изображений.
3. К блоку с изображениями применяется оформление, присваивается заголовок или небольшое описание, атрибут Alt заполняется осмысленным описанием изображения.
Этот способ наиболее оптимален, ведь поисковые системы будут получать альтернативный текст, а пользователи будут видеть, где начинается и кончается блок и что в этом блоке должно быть отображено. В добавок, оптимизированным текстом, которым обтекаются изображения, можно улучшить позиции в поиске по картинкам.
Правда, последнее решение также не лишено минусов. Выделение рамкой блока с изображениями, включение в него заголовка или пары строчек текста требуют дополнительного места на веб-странице, а ведь именно место является самым ценным и его всегда не хватает. Также есть ещё одна причина, по которой я и отказался от этого решения и вернулся к первому варианту (пустые значения атрибута Alt): если изображения в блоке выравнены в одну строчку или ширина блока с изображениями не велика, альтернативный текст должен быть слишком коротким.
Кстати, согласно стандартами HTML и XHTML атрибут Alt является обязательным для тегов <img>. Если вы решили не заполнять текстом значение этого атрибута, просто оставьте его пустым, а не удаляйте совсем. Так вы сохраните валидность кода и получите желаемый результат.
Напоследок хочу заметить, что на месте разработчиков браузеров сделал бы вывод на веб-странице названия изображения, а не альтернативного текста. Как минимум, так было бы немного понятнее, когда какое-либо из изображений браузеру загрузить не удалось. Ко всему прочему, как показывает опыт, даже пользователи, желающие зайти на какой-то сайт и для этого вписывающие его название в поисковой системе, знают, что за именами, заканчивающимися на .jpg или .gif, скрываются изображения.
Не секрет, что поисковые системы используют альтернативный текст к картинкам в своих целях - для ранжирования изображений в поиске по картинкам. Если в значении атрибута Alt содержится осмысленный текст, поисковой системе значительно легче понять, что отображено на картинке. В связи с этим веб-мастера заполняют значение данного атрибута, а оптимизаторы и сотрудники служб поддержки поисковых систем настоятельно рекомендуют заполнять его осмысленным описанием картинки.
Пользователи, посещая какую-либо из страниц сайта, могут видеть альтернативный текст к атрибуту img в те моменты, когда в их браузере отключён показ изображений или загрузка изображения по какой-то причине не удалась. То есть, при отключённом показе изображений пользователь вместо красивого берега и синего моря увидит текст "Песчаный пляж Saldun на острове Циово", а не пустое место.
На этом скриншоте отображена веб-страница сайта www.croatia-travel-info.com. Это первый попавшийся на глаза сайт с картинками песчаных пляжей и, как видно, далеко не самый удачный пример, поэтому заодно взглянем, как же выглядит главная страница российского поискового гиганта.
Так выглядит логотип Яндекса при отключённых изображениях в браузере Firefox
Так выглядит логотип поисковой системы «Яндекс» при отключении автоматической загрузки изображений в Google Chrome
Как видно, ни в первом, ни во втором случае с логотипом «Яндекса» веб-браузер не даёт нам отчётливо понять, что на этом месте должен быть логотип. Во втором случае видна лишь непонятная рамка, а в первом случае виден какой-то фрагмент документа и название поисковой системы, часть которого скрыта за границей участка логотипа. В примере же с песчаными пляжами и вовсе видно лишь сгусток непонятной информации.
Представьте себе, что, увидев такую страницу, подумает пользователь, который не знает о существовании в браузере строки адреса и для того, чтобы попасть на сайт vk.com, сначала пишет в поисковой системе «Яндекс» поисковый запрос "vk.com" или "вконтакте" и переходит по первой ссылке. Мои предположения таковы: пользователь несколько раз кликнет указателем мыши по альтернативному тексту изображения и, увидев, что ничего не происходит, просто покинет сайт, если главной его целью был поиск картинки. Вывод: созданный интерфейс не является интуитивно понятным для самого простого интернет-пользователя, а значит, нуждается в доработке.
На мой взгляд, многочисленные советы по заполнению значения этого атрибута кратким описанием изображения бессмысленны. Страдает от таких советов и побуждаемых ими действий в первую очередь пользователь, а выигрывает лишь поисковая система, в которой текст значения этого атрибута влияет на ранжирование картинок. Проще говоря, традиция заполнения атрибута Alt для картинок - ещё одна ступенька в работе на поисковые системы, а не на результат для пользователей.
С другой стороны, это ничто иное, кроме как вина браузеров, разработчики которых пожелали показывать альтренативный текст вместо незагруженных изображений или изображений, загруженных с ошибкой. Описание картинок полезно показывать, когда отключён показ изображений, но и показываемые пользователю оповещения о том, что какое-то из изображений не удалось загрузить, должны быть более понятными, нежели белый фон с серой рамкой или вылазиющее за пределы слово (фраза).
Существует как минимум три способа решения этой проблемы, которые могут сделать интерфейс блока с изображениями более понятным для пользователя. Каждый из способов имеет свои минусы и плюсы.
1. Атрибут Alt не заполняется.
В этом случае вместо незагруженных изображений пользователь увидит пустое место, заполненное фоном веб-страницы. Будет выглядеть гораздо привлекательнее, чем бессмысленный текст, чаще всего дублирующий заголовок документа.
Этот вариант совершенно не подходит для страниц, на которых изображения являются главным или единственным контентом (фото-порталы и хостинги изображений). Правда, если рассматривать список картинок, то отсутствие текста в значении атрибута Alt было бы самым оптимальным решением, когда изображение по какой-то причине не удалось загрузить.
2. Атрибут Alt заполняется текстом вида "Не удалось загрузить изображение. Попробуйте обновить страницу".
Для большей наглядности к этом примере к изображениям добавлены рамки. Кстати, при незаполненном значении атрибута Alt рамки к изображениям нужно убирать, иначе при неудачной загрузке какого-либо из изображений посетитель вашего сайта увидит непонятную для него полоску цвета рамки.
В этом случае даже самый неопытный интернет-пользователь поймёт, что что-то пошло не так и отобразить весь контент на странице программе не удалось. Не будет лишним указать, что обновление страницы можно вызвать кнопочкой F5, ведь многие новички этого попросту не знают.
Очевидно, этот способ не самый лучший с точки зрения оптимизации изображений для поисковых систем, однако так контент будет наиболее понятен для посетителей сайта. Пользоваться им в тех случаях, когда изображение не обтекается каким-либо текстом, категорически не стоит, если поиск по картинкам является основным источником трафика. Также не стоит использовать такой альтернативный текст для маленьких изображений.
3. К блоку с изображениями применяется оформление, присваивается заголовок или небольшое описание, атрибут Alt заполняется осмысленным описанием изображения.
Этот способ наиболее оптимален, ведь поисковые системы будут получать альтернативный текст, а пользователи будут видеть, где начинается и кончается блок и что в этом блоке должно быть отображено. В добавок, оптимизированным текстом, которым обтекаются изображения, можно улучшить позиции в поиске по картинкам.
Правда, последнее решение также не лишено минусов. Выделение рамкой блока с изображениями, включение в него заголовка или пары строчек текста требуют дополнительного места на веб-странице, а ведь именно место является самым ценным и его всегда не хватает. Также есть ещё одна причина, по которой я и отказался от этого решения и вернулся к первому варианту (пустые значения атрибута Alt): если изображения в блоке выравнены в одну строчку или ширина блока с изображениями не велика, альтернативный текст должен быть слишком коротким.
Кстати, согласно стандартами HTML и XHTML атрибут Alt является обязательным для тегов <img>. Если вы решили не заполнять текстом значение этого атрибута, просто оставьте его пустым, а не удаляйте совсем. Так вы сохраните валидность кода и получите желаемый результат.
Напоследок хочу заметить, что на месте разработчиков браузеров сделал бы вывод на веб-странице названия изображения, а не альтернативного текста. Как минимум, так было бы немного понятнее, когда какое-либо из изображений браузеру загрузить не удалось. Ко всему прочему, как показывает опыт, даже пользователи, желающие зайти на какой-то сайт и для этого вписывающие его название в поисковой системе, знают, что за именами, заканчивающимися на .jpg или .gif, скрываются изображения.
Комментариев нет:
Отправить комментарий