Комментарии 14
«Николай Шабалин» совсем плохой вариант, так как он полностью дублирует текст справа.
Это плохой вариант совсем по другой причине: на картинке не Николай Шабалин, а его аватарка, именно это и стоит написать в alt, если вообще что-то писать в данном случае. Большинство приведенных Вами примеров - декоративные изображения, не несущие смысловой нагрузки или несущие минимальную (то, что Вы называете эмоциональной). Alt имеет смысл заполнять либо когда в тексте есть отсылка к картинке (тогда незрячим пользователям следует объяснить, к чему она), либо чисто для SEO (и тогда правила заполнения совсем иные). "На картинке белая чашка с надписью бла-бла-бла на белом столе" - да всем плевать: зрячий проскроллит, а незрячий будет вынужден терпеть, что ему ездят по ушам.
да всем плевать: зрячий проскроллит, а незрячий будет вынужден терпеть, что ему ездят по ушам
гуглу не плевать, потом когда кто-то что-то ищет по картинкам, гугл вполне себе хорошо использует информацию из Alt для поисковых запросов.
Если Вам на сайт нужен трафик по белым чашкам - тогда см. про SEO, в остальных случаях хозяину сайта плевать, на что не плевать Гуглу ;)
Ваши правила заполнения alt для SEO случая лучше чем те, о которых говорит автор материала, но очень далеки от тех, которые дают максимальный профит для решения подобных задач.
Кроме этого, корреляция написанного в alt атрибуте с тем, что реально отображено на изображении, в случае SEO предельно важна. Google распознает образы медиа контента, и производит сравнения того что он опознал с тем, что написано в alt.
При этом, основное влияние оказывает именно то, что распознал гугл, а не то, что написано в самом alt.
Подобное поведение как подтверждено официально Google, так и имеет прямые подтверждения простыми экспериментами.
При этом, поведение описанное Вами, действительно имело место быть, но до 2017 года. С 2018 года, поведение посковой системы в отношении медиа контента, и его влияния на страницу радикально изменилось. И в настоящий момент это влияние значительно выше, чем влияние фразовой составляющей той же страницы.
Я не понял, с чем Вы несогласны ;) О правилах как таковых я не писал, рассматривая (весьма поверхностно) лишь частный случай. Моя мысль заключалась в том, что alt в большинстве случаев важен лишь в машинно-читаемом контексте (будь то ассистивная технология или поисковик), т.е. для помощи машине в определении того, что изображено на картинке. Исключение, например, alt у картинок в навигационном меню, на случай непрогрузки/отключения самих картинок - тогда alt важен зрячему человеку.
В web 4.0 будут писать только alt. Нейросеть в браузере будет по описанию генерировать картинку. :)
Материал содержит информацию которая не только противоречит официальной спецификации, но и современной практике спекулирования на ее (спецификации) слабостях с целью получения преимуществ в поисковой выдаче.
И вот почему
Прежде всего важно понимать, что существует две отправные точки формирования текста для alt атрибута:
Строго согласно спецификации
Согласно современным гипотезам эксплуатации слабостей поисковых алгоритмов, в ситуации, когда привлечение поискового трафика является важной целью работы проекта и при этом "честность" конкуренции выноситься за скобки.
По этой причине, рассказывая о alt атрибуте, очень важно всегда давать описание обоих отправных точек.
Начнем с первой части этого материала
Alt — обязательный атрибут тега <img>
С точки зрения спецификации:
Атрибут alt никогда не был и никогда не будет обязательным атрибутом. Более того, именно в комбинации с тем, установлен ли alt атрибут вообще, если установлен то является ли его значение пустым в сочетании с заданным src атрибутом - определяется семантическая суть тега img, то есть то, ради чего тег img используется:
alt атрибут не установлен вообще
```<img src="/img/example.jpg" >```
Семантически это означает, что значение вставленного изображение не определено. Или не могло быть определено на момент публикации изображения. Например фотографию делал слепой фотограф, который не может составить текстовое описание.
Оно может иметь, а может и не иметь отношение к контенту на странице. Если в этой ситуации присутствует title, то поисковая машина, или любой другой алгоритм машинного анализа контента страницы, может опереться на него, но влияние такого изображения на страницу будет минимальным.alt атрибут установлен, но его значение представляет из себя пустую строку
```<img alt="" src="/img/example.jpg" >```
Семантически это означает, что изображение заявленное этим тегом носит сервисный характер. То есть оно не должно оказывать никакого влияния на основной контент страницы и носит исключительно декоративный характер.alt атрибут установлен, его значение отлично от пустой строки
```<img alt="some text" src="/img/example.jpg" >```
Семантически это означает, что изображение имеет прямое отношение к основному контенту страницы. Его содержимое прямо описано текстом атрибута alt.
С точки зрения слабостей поискового алгоритма от Google:
Google игнорирует часть спецификации, которая позволяет тегом img обозначать декоративные(не служащие раскрытию контента) изображения. По этой причине, есть только одна практическая рекомендация: только изображения, которые служат дополнению или раскрытию контента должны верстаться с использованием тега img. Во всех прочих случаях (декорации, иконки и т.д.) должны использоваться альтернативные способы интеграции медиа элементов в страницу. Например CSS свойство background или псевдо элементы before after
Как правильно писать
Кратко. Максимальная рекомендуемая длина — 125 символов.
Чётко. Нужно ответить на вопрос, что именно изображено на картинке? Какую функцию она выполняет?
Уникально. Не повторяйте текст, который уже есть на странице.
С точки зрения спецификации:
alt атрибут может быть любого размера. Содержать в том числе и разметку. Должен содержать описание того, чем является сюжет или смысл изображения. Так как img это часть фразового контента, то смысл изображения определяется в том контексте в котором оно заявлено, что означает, что alt атрибут может дублировать любой другой alt атрибут.
С точки зрения Google:
alt атрибут может быть любого размера, но оказывать влияние на поиск будут его первые 100 символов с выравниванием по границе ближайшего к пределу в 100 символов слова и в некоторых случаях предложения. Прочие слова буквы будут проигнорированы. Для Google изображение это ровно то о чем говорит спецификация - часть фразового контента. То есть Google анализирует значение изображение строго в контексте того контента где заявлено img. Но, Google не любит наличие контента с совпадающей фразовой частью. По этой причине, общей рекомендацией является добавления вариативности фразовой составляющей изображения.
Примеры использования
Ссылка
<a href="/blog"> <img src="blog.jpg" alt="Перейти на главную страницу блога"> </a>Диаграмма
<img src="chart.png" alt="Диаграмма с результатами опроса о том, что мешает пользователям на удалёнке">Картинка с текстом
Просто переносим текст в alt:
<img src="courses.png" alt="HTML Academy Бесплатные онлайн-курсы...">
Ссылка
с точки зрения спецификации
Если это навигационная ссылка то - alt атрибут должен содержать пустое значение alt атрибута. Так как это изображение выполняет функции изображения сервисного характера то есть не раскрывает смысл контента страницы. Ссылка обязана содержать фразовую составляющую описывающую задачу ссылки. Фразовая составляющая может быть скрыта.
Если это ссылка в рамках раскрытия контента страницы, alt атрибут должен быть установлен в соответствии с общими правилами.
с точки зрения поисковой машины от google
Используется общая рекомендация - чтобы долго не разбираться в том, почему Google неправильно понял что Вы хотели ему сказать - все изображение выполняющее роль сервисного характера, должны быть интегрированы в страницу при помощи механизмов исключающих использование тега img/
Диаграмма
с точки зрения спецификации
типичный контент для тега figure
с точки зрения поисковой машины от google
типичный контент для тега figure
Картинка с текстом
с точки зрения спецификации
применяются типичные правила для составления alt атрибута
с точки зрения поисковой машины от google
такой медиа контент не имеет никакого значения. В лучшем случае игнорируется, в худшем случае используется для пессимизации страницы содержащей подобный контент. Google уже минимум 3 года использует алгоритмы распознавания образов на изображении при анализе его контента.
Figure и figcaption
Всё равно пишем нормальный alt, так как в figcaption обычно маленькое описание:
Figure это тег с особой семантической нагрузкой контент которого это не обязательно изображения. Проще всего понять его смысл можно на основе простого мысленного эксперимента: если контент тега figure может быть перемещен в любое место основного контента, без разрушения его (основного контента) смысла - то это figure. Наиболее наглядным примером является ситуация, с той самой диаграммой, когда пишется что то вроде: что показано на диаграмме 143. При этом диаграмма становится частью figure тега, и может быть размещена например в конце документа в разделе Appendix.
С точки зрения поисковой системы
практически все точно так же. Тег используется для минимизирования отрицательного влияния изображений, содержимое которых является графиками, коллажами и прочим синтетическим контентом. Изображения, которые должны оказывать положительное влияние на ранжирование стьраницы - то есть изображения раскрывающие ее суть, никогда не должны верстаться при помощи figure.
Когда alt-текст не нужен
Когда картинка декоративная и не имеет смысла.
Иконки в кнопке.
Это совершенно верно с точки зрения спецификации. Но напоминаю что Google игнорирует подобную, абсолютно верную конструкцию и пытается анализировать контент изображения как тот, который может иметь отношение к основному. Что может быть причиной "отстреливание себе ног". Итогом чего стала общая рекомендация - если изображение не раскрывает контент, оно не должно быть интегрировано посредством тега img.
Когда alt-текст не нужен
Аватарка: имя пользователя и так у нас уже есть.
Превью к статье: у нас уже есть заголовок, и этого будет достаточно.
И абсолютно неверная рекомендация, которая нагдяным образом демонстрирует, что автор материала не понимает что такое семантика языка HTML5. Зачем и как его нужно использовать.
А теперь как устанавливать атрибут alt правильно
На примерах выше, я наглядно показал, что автор материала как противоречит официальной спецификации, так и не ориентируется в том, каким образом, в настоящее время Google анализирует контент страницы.
Для людей, которые не занимаются тонкостями оптимизаций страниц под поисковые алгоритмы есть два простых правила составления alt атрибута, которые им позволят и получить трафик из поисковых систем и/или быть полезным людям с читалками:
Изображения которые не имеют отношения к основному контенту, должны интегрироваться в страницу любым способом, но не при помощи тега img
Изображения которые дополняют или раскрывают контент страницы - обязаны быть сверстаны тегом img (не figure) и иметь alt атрибут. В случае необходимости привлечения поискового трафика, его размер должен быть около 100 символов. Плюс минус выровнено по границе слова.
Содержимое alt атрибута должно быть таким, что если Вы удалите изображение, и вместо него впишите ваш alt текст - то контент должен сохранить свою органичность. То есть оставаться осмысленным.
Пример
Допустим у нас есть текст:
В Новом Завете нет описания внешнего вида Христа. Тем не менее подавляющее большинство изображений похожи друг на друга.
И изображение которое иллюстрирует сказанное:
Тогда правильной версткой было бы следущее
<p>
В Новом Завете нет описания внешнего вида Христа. Тем не менее
подавляющее большинство изображений похожи друг на друга
<img src="jc.png"
alt="человек средних лет, с каштановой раздвоенной бородой,
большими глазами, слегка вьющимися волосами." />
</p>Итого
Я дал общее представления того, как правильно использовать семнатический тег img как с точки зрения современного стандарта, так и с точки зрения спекуляции на особенностях поискового алгоритма от Google.
Как можно заметить, материал статьи, лишь в некоторых деталях коррелирует как со спецификацией, так и с практикой SEO. Что ничего кроме сожаления вызывать не может.
Атрибут alt никогда не был и никогда не будет обязательным атрибутом.
Эмм...
Except where otherwise specified, the
altattribute must be specified and its value must not be empty;
Хотя ссылка на т.н. "спецификацию" т.н. Live HTML такой пруф: сегодня must, завтра левая пятка безвестного автора зачесалась в другую сторону и он стал shall.
Вы заблуждаетесь. И вот почему:
Стандарт в редакции WHATWG это единственный действующий стандарт от группы которая занималась его разработкой с 2007 года. Одним из основных бенифициаров которого является Google.
Появление стандарта в редакции WHATWG связано с расколом вызванным отвратительной работой W3c.
Спустя 8 лет после раскола, w3c признала, что стандарт ссылку на который я давал, то есть в редакции WHATWG является эталонным. Доказательством чему, являются проставленные с сайта w3c прямые ссылки на редакцию WHATWG. Фактически стандарта в редакции W3c более не существует.
Приписка Live означает, что в стандарт могут добавляться новые возможности без заявления версии. Но это не означает что описанные ранее возможности удаляются. О чем заявлено на сайте группы WHATWG.
Except where otherwise specified, the
altattribute must be specified and its value must not be empty;
Я описал все три случая, когда и при каких условиях происходит Except. За исключением очевидного - отсутствия атрибута src. В этом случае, прочие атрибуты не имеют значения, так как тег img приобретает семнатической значение nothing.
Иными словами, мои отсылки в спецификацию живого стандарта, и детали описанные мной являются в настоящий момент официальной частью единсвенной спецификации HTML5 и описывают семнатическое значение тега img с атрибутом alt так, как это должны трактовать сторонние средства анализа кода. И, как следствие, так как должны использовать это разработчики.
Давайте сперва с мухами разберемся: Вы написали, что alt - необязательный аттрибут и привели ссылку на стандарт, где написано прямо противоположное.
Теперь с котлетами: кто злодей, а кто в белом жабо - оценочное суждение. Возможно, Вы участвовали в работе соответствующей рабочей группы и знаете ситуацию изнутри. Снаружи же ситуация выглядит так: Гугл послал многостороннюю группу на три буквы, пользуясь тем, что Хром сегодня де-факто синоним браузера и класть они хотели на чужое мнение.
Конкретно к Live моя претензия именно в написанном Вами и заключается: вчера мы могли объявить, что перед нами не просто некий HTML, а HTML определенной версии и агенты пользователя должны это учитывать при рендеринге. Сегодня же агенты должны годать, насколько свежая версия HTML перед ними, а верстальщики - ориентироваться непойми на что, т.к. все современные браузеры поддерживают просто версию Live. Это очень запутывает обе стороны.
И, наконец, про сегодня так, а завтра иначе. Не знаю, как принято в WHATWG, а в W3C атрибуты вполне могли пропасть в новой версии спека. Навскидку приходит пример с media в link, который давал всем сторонам однозначную возможность определить "адресата" для соответствующего ресурса, но был заменен совершенно идиотским media query.
Вы написали, что alt - необязательный аттрибут и привели ссылку на стандарт, где написано прямо противоположное.
В стандарте сказано и описано набор случаев и правил как следует трактовать семантику элемента (тега) img в зависимости от двух факторов - атрибута src и атрибута alt. Среди состояния атрибута alt заявлено состояние где alt отсутcnвует.
Снаружи же ситуация выглядит так: Гугл послал многостороннюю группу на три буквы, пользуясь тем, что Хром сегодня де-факто синоним браузера и класть они хотели на чужое мнение.
Работал. Но это в данном случае не имеет никакого значения. w3c - умоляли, просили, "на коленях" стояли, чтобы выпустить хотя бы черновик стандарта. Потому что его отсутствие фактически тормозило развитие Веба в то время, когда появились средства для реализации вещей выходящие за рамка существующих в настоящий момент норм.
Конкретно к Live моя претензия именно в написанном Вами и заключается: вчера мы могли объявить, что перед нами не просто некий HTML, а HTML определенной версии и агенты пользователя должны это учитывать при рендеринге
Ваши претензии не по адресу. Потому что Live стандарт в части отображения не реугулирует сейчас отображение контента. И почти никогда не регулировал. Он занимается описанием семантики. Но даже если вынести это за скобки, то существует стандарт CSS который прямо предназначен для регулирования рендера, чем он и занимается. Где есть строгие версии.
Впрочем лично у меня к группе занимающейся CSS претензий не меньше чем к W3c. И лично я считаю, что с ними нужно сделать тоже самое что с w3c. Да это неправильно и должно быть по другому. Но в текущей ситуации я бы выбрал из двух зол меньшее, хотябы на опыте того, что положительного произошло с html5 в подобной же ситуации.
вчера мы могли объявить, что перед нами не просто некий HTML [...] Это очень запутывает обе стороны.
Вы судя по всему не услышали что я сказал ранее. Все что описано нормами стандарта, не может изменится просто так. То, что единожды принято стандартом в его Live редакции, не меняется. Бывают очень редкие исключительные случаи.
На примере того же alt - его поведение как было закреплено первой версией стандарта в 14 году, так таковым и остается. Не смотря даже на фрикции гугла в другую сторону для этой истории.
Более того, фундаментально, html5 не меняется вовсе. О чем так же многие жалеют.
И, наконец, про сегодня так, а завтра иначе. Не знаю, как принято в WHATWG, а в W3C атрибуты вполне могли пропасть в новой версии спека.
w3c никого не интересует по той причине, что его стандартом в плоскости, которую мы обсуждаем, можно клопов давить. Ее фактически игнорировали именно в силу того, как работала w3c в этом направлении.
Навскидку приходит пример с media в link, который давал всем сторонам однозначную возможность определить "адресата" для соответствующего ресурса, но был заменен совершенно идиотским media query.
У меня нет никакой информации относительно случая о котором Вы говорите. Могу только повторить сказанное выше. Никого в индустрии, в плоскости которую затронули в статье, не интересовало мнение черновики и разработки w3c, с момента официального появления WHATWG.
Я Вам не скажу за всю Одессу, но лично я на вскидку не могу припомнить ни одного случая, когда, что либо заявленное в стандарте в версии WHATWG было бы изменено, без серьезных на то оснований.
Среди состояния атрибута alt заявлено состояние где alt отсутcnвует.
Ну тут мы уже начинаем спорить о значении терминов и прочей вкусовщине. ОК, не суть.
Потому что Live стандарт в части отображения не реугулирует сейчас отображение контента.
Позвольте, при чем тут отображение? Вот 03.06.2022 в Live стандарте появился новый тег. Через год кто-то пишет код страницы, хочет этот тег употребить и начинает штудировать caniuse.com - с какой версии какого браузера он поддерживается, да сколько процентов рынка сейчас занимают поддерживающие конкретно этот тег версии. Раньше-то как было (условно): IE 8.0 поддерживает HTML 4.0. Еще какие-то штучки-дрючки из 4.01 поддерживает, но их используем на свой страх и риск без заглядывания глубоко в мануалы. Вот на том же 8-м ишаке я сидел много лет - меня все устраивало и лишь изредка мне предлагали обновить браузер. Мне было по-барабану, кто его считает устаревшим, меня все устраивало. Переполз на лису, когда ишак окончательно сдох и теперь регулярно вижу: ваш браузер устарел, обновите, иначе ничего не покажем. Мой рекорд - разница в 10 версий с актуальной сборкой - и уже ничего не покажем. ОК, редактирую строку UA и - о чудо! - я прекрасно все вижу, ничего у меня не едет, все работает. Но какой-то дятел прикрутил какую-то неведомую финтифлюшку к своему сайту и считае, что все браузеры старше года со всем его сайтом работать не могут и не должны. В общем, раньше были milestone, а теперь ежемесячная гонка за "свежестью".
У меня нет никакой информации относительно случая о котором Вы говорите.
Из CSS 3 убрали то, что было в CSS 2: явная адресация к типу устройства. Например, мы могли задать в HTML такой тег:
<link rel="stylesheet" type="text/css" href="aural.css" media="speech, aural, braille, embossed">и с его помощью оформить версию сайта для незрячих: скрыть весь декор и т.п. Тем же макаром мы могли явно адресовать стиль для мобильных устройств, т.е. маленький экран с тач-функциями: элементы управления побольше, дефолтный шрифт тоже. Не, это слишком просто, - решили в W3C, - давайте будет адресовать исходя из параметров устройства отображения пользователя. Но нормальный выбор параметров мы тоже делать не будем, чтоб жизнь медом не казалась. Внимание, вопрос: как отдать с помощью media query разные стили для обычного монитора и коммуникатора при том, что о них известно следующее: разрешение у них одинковое, ориентация экрана - тоже, физический размер нам задать нельзя, а наличие тача не говорит о том, что перед нами обязательно мобильное устройство.
@demimurych Огонь! Когда из комментария получаешь больше информации чем из самого поста. Полностью поддерживаю идею, что alt --- это сейчас про нейросети и обучение алгоритмов, а не про слепых пользователей и доступность (немного цинизма в пост). Это фишка SEO ... Те кто делает поиск по картинкам, или собирают трафик для сайта по ним это поймут.
Я начинающий верстальщик и мне эта тема кажется невероятно бессмысленной, однако я с интересом дочитал и, наверное, теперь я буду куда больше задумываться над альт-текстом.
6 простых правил хорошего alt-текста