Как заполнять атрибут alt: Как правильно заполнять Alt и Title для картинок | Дропшиппинг

Содержание

Как заполнять Alt и Title картинок правильно: инструкция — Агентство REFORGE

Этой статьей я открываю серию публикаций про внутреннюю оптимизацию сайта. И начну с одних из наиболее часто игнорируемых атрибутов тега <img> — Alt и Title.

Содержание статьи:

Немного истории
Что такое атрибут alt и title
- Title картинки
- Alt для картинок
Почему их нужно прописывать
Как правильно заполнять
- org/ListItem»> Советы по заполнению атрибута alt
- Советы по заполнению атрибута Title для картинки
Как добавить Alt и Title
Заключение

Немного истории

Для лучшего понимания назначения этих двух атрибутов предлагаю сперва вернуться во времена dial-up’а на 56 Кб/сек и оплаты за каждый мегабайт трафика. Тогда скорость интернета была по современным меркам практически нулевой и одна картинка на странице могла загружаться минуту. А если добавить сюда оплату за трафик, то загрузка становилась настоящей роскошью.

Именно для быстрой загрузки страниц в браузерах добавили отключение картинок. Пользователь отключал загрузку медиа-файлов и вместо них на странице показывались пустые прямоугольники.

Так сайты работали быстро, а трафик с одной текстовой информации шел минимальный. Для понимания эффекта вот пример стартовой страницы Google и их знаменитого логотип с отключенными медиа:

Пример: отключенные изображения на главной странице Google.

Однако в картинках скрыта полезная информация, которую посетители не видели из-за такого режима просмотра сайтов. И вот тут на помощь пришли атрибуты тега <img>: alt и title. Они в текстовом виде передавали содержимое рисунка в том случае, если загрузка невозможна по каким-то причинам.

Что такое атрибут alt и title

Изображения на странице размещаются при помощи тега <img src=””>. Как и у многих других тегов, у него есть дополнительные параметры. Их называют «атрибуты» и используют для передачи дополнительной информации о теге. Пример кода с атрибутами alt и title:

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

Title картинки

Как следует из самого названия — это заголовок тега <img>.

title=»Текст тайтла»

Не нужно путать Title изображения с тегом Title страницы. В нашем случае это заголовок изображения. Служит он для передачи посетителю дополнительной информации о фото и появляется

при наведении курсора:

Так выглядит Title изображения

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

Поэтому я рекомендую

заполнять Title и тем самым повышать удобство вашего сайта.

Alt для картинок

Как и в случае с предыдущим атрибутом, в названии alt уже скрыта подсказка к расшифровке — alternative text или альтернативный текст. Данный атрибут является обязательным с точки зрения валидации и продвижения.

alt=»Альтернативный текст»

Это тот текст, который появляется в области фото при отключенных картинках. Да, сейчас редко кто отключает медиа-файлы для экономии трафика и увеличения скорости загрузки. Но такие посетители все ещё встречаются. Буквально на днях один клиент сообщил, что у него отключены изображения. Как это выглядит в браузере на примере предыдущего скриншота с орлом:

Атрибут alt показывается вместо картинки

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

Ещё одна польза от альтернативного текста — это его отображение при отсутствующем файле или “битой” ссылке. Возможно, вы разместили на странице ссылку на картинку с другого сайта, а он перестал работать. Или же у вас на хостинге произошел сбой и файл был удален. В этом случае посетитель не сможет увидеть фото, но зато прочтет основной смысл. То, что вы хотели показать. Это в любом случае лучше, чем пустой прямоугольник.

Все эти особенности знают поисковые системы, поэтому описание

влияет на seo-продвижение и его необходимо заполнять. Кроме того вы сможете получать дополнительный трафик из поиска по фотографиям:

Поиск по картинкам Яндекс

Атрибут alt не обязательно должен описывать непосредственно то, что изображено на картинке. Учитывайте контекст, в котором посетитель увидит этот текст. Например, на фотографии предупреждающего знака не стоит писать “треугольник с восклицательным знаком”. Вместо этого лучше написать “опасность” или “внимание”. Это добавит больше смысла, если только ваша страница не посвящена детальному описанию знаков.

Почему их нужно прописывать

Подводя итоги всего вышесказанного, вот две основные причины:

Повышение удобства использования вашего сайта;
SEO-продвижение и оптимизация страниц, а также трафик из поиска по фотографиям;

Польза от заполнения Alt:

Alt отображается вместо картинки в браузерах, если ссылка на файл “битая” или пользователь решил отключить отображение фото-контента;

Alt обеспечивает семантическое значение и описание, которые учитываются поисковыми системами. В последующем это помогает роботам определить содержание страницы, изображения и контента в целом;
Считывание браузерами, что позволяет передать смысл посетителям с определенными когнитивными нарушениями;

Польза от заполнения Title:

Всплывающие подсказки атрибута Title помогают лучше передать назначение фотографии и при необходимости дать пользователю подсказку;
Косвенно повышаются поведенческие факторы;

Определить прописан ли у вас на сайте alt и title для тета <img> вы можете, посмотрев исходный код тега <img>. Как это сделать:

Зайдите на страницу с изображением, которое надо проверить.

Наведите курсором на нужную фотографию.
Нажмите правой кнопкой и в появившемся меню выберите “Просмотреть код”.
В появившемся коде внутри тега <img> найдите нужный атрибут и посмотрите что написано после знака “равно”.

Как посмотреть alt в коде сайта

В примере выше значение альта равно “Extract text”. Этот текст увидит посетитель при отключенных медиа. А вот атрибут тайтл в примере не заполнен, т.к. это он не обязателен.

Как правильно заполнять

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

Алгоритм определил с вероятностью 98%, что это — мопс. 97% что это — собака. И ещё с десяток менее точных, но все же подходящих определений. Неплохо, Google, совсем неплохо.

И возникает логичный вопрос:

А нужно ли заполнять альты, если поисковики и сами отлично распознают изображения?

Да и посетители все с включенными картинками в браузерах. И ответ — «Да, нужно». Сейчас объясню почему.

Хоть Google и шагнул далеко вперед в распознавании, все же некоторые вещи ему даются с трудом. Например, вот эту картинку с маслом он определил как сыр. Что для нас вполне очевидно, бывает сложно для роботов:

Неточности в распознавании

Именно поэтому надо помогать поисковикам определять что именно изображено на фото через заполнение альтернативного текста. Алгоритмы в свою очередь наградят вас за такое внимание к деталям

более высокими позициями и релевантным трафиком. В этом видео гуру Google Matt Cutts на наглядном примере показывает почему нужно заполнять атрибут alt и как это делать правильно:

Если кратко передать суть видео, то заполнять альт нужно. И делать это необходимо осознанно, для людей, избегая спама и переоптимизации. Исходя из этого можно выделить основные рекомендации.

Советы по заполнению атрибута alt

Какими же должны быть альты, чтобы поисковики полюбили наш сайт? Воспользуйтесь табличкой:

Релевантность окружение	Создавайте релевантные окружающему тексту альтернативные описания для картинок. Не используйте в описании ключевые фразы, которые не имеют отношения к размещенному рядом тексту.
Оптимальная длинна	3-7 слов и не более 250 символов.
Используйте ключевик	И желательно разместить фото с ним как можно выше к началу документа.
Избегайте спама	В остальных картинках на странице употребляйте синонимы основного ключа или вовсе откажитесь от его использования. Времена, когда в альты помещали по 30 фраз, давно прошли. Сейчас за такое можно попасть под санкции.
Соблюдайте формат	Не пишите альт в виде «фото …» или «изображение …». Посетители и так понимают, что это фотография. Нет необходимости лишний раз указывать, если нет явного основания для этого.
Больше смысла	Не используйте слишком общие и краткие описания. Укажите на детали изображения, какие-то особенности. Например, «Фото города» несет в себе мало информации. Зато «Центр Москвы в солнечный летний день» намного более информативно.

Как придумать описание для картинки

Поделюсь с вами небольшой хитростью как легко составлять корректные atl. Посмотрите на фото и продолжите предложение «На этой фотографии изображен …» и вместо многоточия поставьте нужное описание. Именно этот текст и стоит поместить в атрибут alt. Вот несколько примеров:

«На этой фотографии изображен лабрадор, гуляющий на улице»

«На этой фотографии изображен Шоссейный велосипед Merida Reacto Team-E 2018 года»

И так далее. Принцип совсем не сложный, зато позволяет сэкономить кучу времени.

Примеры из практики

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

Худший вариант — когда описание отсутствует вообще:

Не намного лучше переоптимизированный alt:

Хороший вариант — указать хотя бы объект с фотографии:

Идеальным вариантом является полноценное описание изображение по технике, описанной выше:

Советы по заполнению атрибута Title для картинки

С заголовком все намного проще. Поисковые системы заявляют, что он не оказывает влияния на ранжирование. Т.е. заполнять его или нет решать только вам. С другой стороны это удобно для пользователей и многие веб-мастера наполняют тайтл таким же содержимым, что и альт. Да и сам Google в одной и той же статье использует как один alt, так и комбинацию alt+title:

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

Как добавить Alt и Title

Добавление атрибутов изображениям индивидуально для каждой системы управления сайтом (CMS). Я покажу как это происходит в WordPress. Для остальных систем принцип будет схожим.

Первым делом в библиотеке медиафалов находим нужную нам картинку. У нас это будет фото мопса, сидящего на скамейке. Кликаем по фотографии и справа появятся нужные поля:

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

Атрибуты заполнены на сайте

Всё верно. Атрибуты alt и title для WordPress прописаны. Теперь необходимо проделать те же действия со всеми изображениями на странице. Чтобы не пришлось потом редактировать все фото, лучше заполнять поля сразу при загрузке.

Заключение

В статье мы разобрали атрибуты alt и title тега картинок. Выяснили, почему важно их заполнять и как правильно это делать, на что влияет каждый атрибут и как выглядит. Подведем итог по каждому из них.

Атрибут alt:

обязателен к заполнению
влияет на ранжирование страницы
релевантный окружающему контенту
содержит 3-7 слов и не более 250 символов
включает в себя основное ключевое слово страницы
не должен быть спамным, т.е. перегруженным ключами

Атрибут title:

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

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

Присылайте ваши варианты атрибутов и\или вопросы в комментариях. Обсудим вместе!

Как правильно заполнять атрибуты ALT и TITLE для изображений?

Вы заполняете атрибуты ALT и TITLE для изображений на сайте? Как вы их заполняете? Зачем вы их указываете? Перед тем как читать дальше, ответьте себе на вышеуказанные вопросы.

В этой статье и видео я отвечу на следующие вопросы:

что такое атрибуты TITLE и ALT
стоит ли их указывать?
как их нужно указывать в картинках?
как это влияет на наш сайт?
спам ключевыми словами в атрибутах
автоматизация заполнения атрибутов с помощью плагинов — плюсы и минусы

Как правильно заполнять атрибуты ALT и TITLE для изображений?

Смотрите это видео на YouTube.
Подпишитесь на канал InwebPress, чтобы узнать больше о создании и настройке сайтов!

Важны ли атрибуты ALT и TITLE для нашего сайта? Как реагируют на них поисковики?

Атрибут ALT учитывают оба поисковика в поиске по картинкам. Но, если говорить об органическом поиске, то этот атрибут учитывает только Google. Т.е. по ключевым словам в этой картинке Google в поиске выдаст наш документ, а в поиске по картинкам нашу картинку. Т.е. Google учитывает текст в атрибуте ALT и этот текст играет роль в отображении вашего сайта в поисковой выдаче.

Атрибут TITLE игнорируют оба поисковика. Хотя, возможно со мной некоторые не согласятся.

Сделаем некоторые выводы:

атрибут Title — нужен для улучшения юзабилити (т.е. только для людей)
атрибут Alt — нужен для улучшения юзабилити, участвует в индексации сайта, учитывается поисковиками и является источником трафика (поиск по картинкам)

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

Автоматизация заполнения атрибутов с помощью плагинов — плюсы и минусы

Мое отношение к таким плагинам и к их использованию.

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

Если в статье используется 1 изображение, миниатюра, то плагины конечно нам облегчат жизнь. Например, в качестве альта укажите название статьи, а в качестве тайтла то же название, но добавьте слово «Изображение».

Плагины сыграют отличную службу для интернет-магазина, где обычно для одного товара добавляют несколько изображений. Но, беда в том, что все бесплатные плагины не работают с товарами Woo. Обязательно нужно покупать платную версию.

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

Ознакомьтесь со списком плагинов для автоматизации заполнения атрибутов изображений.

Таблица сравнения плагинов для автоматического заполнения атрибутов ALT и TITLE

Плагин	Атрибут	Записи/страницы	Товары Woo	Откуда берет значение	Для каких изображений в записи	Шаблон генерации
Bulk Auto Image Title Attribute	Title	Да	Нет	Название статьи	Для всех	Нет
Bulk Auto Image Alt Text	Alt	Да	Нет	Название статьи	Для всех	Нет
Auto Image Attributes From Filename With Bulk Updater	Alt/Title	Да	Нет	Название файла	Для всех	Нет
Update Image Tag Alt Attribute	Alt	Да	Нет	Название статьи или название файла	Для всех	Нет
Prostudio Auto Meta Images	Alt/Title	Да	Нет	Название файла	Для всех	Нет
SEO Friendly Images	Alt/Title	Да	Нет	Разное	Для всех	Да
PB SEO Friendly Images	Alt/Title	Да	Да (платная версия)	Разное	Выбор	Да
Seo Optimized Images	Alt/Title	Да	Да (платная версия)	Разное	Для всех (бесплатно), Выбор (платная версия)	Да
Clearfy PRO (платный)	Alt	Да	Нет	Название файла	Для всех	Нет
Clearfy (бесплатный)	Alt	Да	Нет	Название файла	Для всех	Нет
Clearfy Bussines (платный)	Alt/Title	Да	Да	Разное	Выбор	Да

Плагины для автоматизации заполнения атрибутов изображений

Ложка дёгтя портит бочку мёда 🙁

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

Я написал авторам этих плагинов с просьбой разобраться с этими моментами. Если они исправят ошибки, то я об этом напишу здесь и буду держать вас в курсе.

Атрибуты alt и title картинок — как правильно заполнять для SEO

Картинки и фотографии могут быть очень важным аспектом оптимизации интернет-сайтов, о том, как правильно заполнять тег title я рассказывал в одной из предыдущих статей. Продолжая развивать тему нюансов продвижения сайтов, сегодня поговорим об атрибутах alt и title, которые присваиваются для картинок, загружаемых на сайт.

Что такое alt и title картинки

Традиционно в начале начнем с определения, чтобы было понятно, о чем идет речь.

Итак, атрибут картинки alt – это html тег который призван установить альтернативный текст для изображения, при стандартной загрузке браузера пользователь данный текст не видит, он отображается только в случаях, когда изображение не удалось загрузить. В свою очередь title картинки – параметр задающий дополнительную информацию об изображении для пользователя сайта.

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

Правила заполнения title

Атрибут не очень важен для поискового продвижения. Как уже было сказано, он применяется для того, чтобы дать пользователям пояснения и комментарии насчёт изображения. Содержимое выводится в маленьком сером прямоугольнике рядом с курсором, когда пользователь наводит его на изображение.

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

Страницы, на которых присутствуют всплывающие пояснения к картинкам, субъективно воспринимаются посетителями лучше, чем страницы, не имеющие таких подсказок. Более того, часто возникают ситуации, когда трудно понять, что именно изображено на картинке, даже если она отлично подходит к тексту. Однако, чтобы не перестараться с заполнением title и не спугнуть потенциальных посетителей сайта, нужно знать несколько правил:

Информация в параметре должна соответствовать изображению. Посудите сами: наводя курсор на картинку, пользователи ожидают увидеть какие-то комментарии именно по поводу изображения. Ненужная и обманывающая их ожидания информация будет отталкивать посетителей;
Нужно знать меру. Длинные подсказки, написанные в несколько строк мелким шрифтом и норовящие исчезнуть при любом перемещении курсора, читать очень утомительно. Поэтому текст title всегда должен быть небольшим, дающим быстро понять пояснение;
Желательно присутствие в title ключевого слова. Поисковые системы это вряд ли заметят, зато пользователи будут довольны, в очередной раз убедившись, что сайт соответствует их запросу, он удобен и понятен, а это прямой путь к улучшению поведенческих факторов, о которых мы поговорим в ближайших публикациях;

Важным аспектом является то, что title изображения должен быть уникален. Не стоит заполнять заголовки (и не только title) и текст alt одной и той же информацией. Полностью изменять каждый из них не требуется, но можно хотя бы разбавить их содержимое синонимами.

Особенности атрибута alt

Едем дальше… Мы уже разобрались, что title влияет на поисковое продвижение сайтов, косвенно, только с помощью поведенческих факторов. Атрибут alt однозначно более полезен для оптимизации, так как с ним охотно работают поисковые системы, чтобы определить, что изображено на картинке. Именно по этой причине, правильно заполненный alt не только повышает релевантность сайта, но и позволяет быстрее найти его через поиск по изображениям.

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

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

При проблемах с отображением изображений в браузере. Такие ситуации случаются редко, но забывать о них не стоит. Вместо картинки на странице будет висеть обычная иконка незагруженного изображения с текстом, записанным в параметр alt. Именно поэтому он так и называется: «alt» — сокращение слова «alternative». Благодаря информации заполненной в alt пользователь сможет хотя бы примерно понять, что изображено на картинке, которую он не может в данный момент увидеть;
В описании картинки, найденной через поиск изображений. Именно поэтому продвижение в «поиске по картинкам» требует правильного содержимого атрибута alt.

Строгих ограничений тут нет, однако стоит помнить несколько закономерностей:

Параметр alt должен подходить по смыслу содержания изображения и тексту, к которому оно относится;
Длину текста стоит держать в рамках от 10 до 250 символов. Слишком короткие тексты малоэффективны для поискового продвижения, а слишком большие будут отпугивать посетителей;
В alt не стоит употреблять много ключевых слов. Ключевые слова — дело хорошее, но если их слишком много в одном месте, то поисковые роботы считают это спамом и могут наложить на сайт санкции вплоть до исключения его из выдачи по ключевым запросам;
Используйте один из главных ключей (можно приправить его парой второстепенных, но, опять же, важно знать меру!) и впишите его в текст как можно более естественно. Также можно взять текст из атрибута title и немного его изменить, чтобы не было дублирования: правила по употреблению ключевых слов в этих атрибутах одинаковы;

Помните еще одно правило, нельзя употреблять слова, коммерческой направленности для всех видов сайтов. В тексте alt нет места словам вроде «стоимость», «оформить», «купить» и т.д., исключение если только само изображение не лишает Вас выбора (например, если это меню ресторана).

Краткие выводы

Атрибут title:

Необязателен для заполнения;
Влияет на поисковое продвижение, но только на уровне поведенческого фактора;
Служит для повышения удобства пользования страницей.

Атрибут alt:

Напрямую влияет на продвижение сайта, так как учитывается поисковыми системами;
Даёт возможность найти сайт через поиск по изображениям;
Улучшает релевантность страницы ключевым запросам;
Даёт посетителю ознакомиться с дополнительным описанием изображения, если оно по каким-то причинам не отобразилось.

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

ALT и Title теги для изображений

Рекомендации, результаты экспериментов, разбор частных вопросов – эта статья расскажет, как настроить атрибут alt корректно.

Что такое атрибуты ALT (альт) и TITLE (тайтл)?

Атрибут альт – это текст, альтернативный изображению.

Бывают случаи, когда вместо картинки загружается только текст описания. SEO альт текст изображений – это не описание картинки, не её подпись, а тот текст, который браузер может показать ВМЕСТО рисунка.

Зато сама подпись к фото располагается в атрибуте title.
Она может быть видна посетителям, когда те наводят курсор на картинку.

Синтаксис тега IMG или html-код для атрибута alt + title выглядит так:

<img src=”foto.jpg” alt=”Описание картинки foto” title="Встплывающая подсказка к foto" />

Порядок расположения атрибутов может быть любой.

Зачем нужен мета тег альт (alt) для изображений?

Можно ли обойтись без него?

Отсутствие атрибутов, конечно, не имеет отношения к работоспособности сайта. Но они просто необходимы, когда речь идёт о SEO, а также об удобстве посетителей.

При медленном интернете фото могут не загрузится, тогда вместо них отображаются только описания (альты)

Бывают случаи, когда люди сами изменяют настройки браузера или телефона, отключая любую загрузку фото. Причины могут быть разные – экономия трафика, желание ускорить загрузку страниц, старая модель телефона.

А теперь самое важное, зачем нужно прописывать тег alt для изображений.

С помощью атрибутов тега img можно возглавить поисковую выдачу по изображениям. Особенно это актуально интернет-магазинам. Рисунки без смыслового описания поисковиками не ранжируются, т.к. их невозможно найти по запросам пользователей, ведь атрибут alt у тега не прописан.

Как не нужно прописывать alt

Это скриншот при плохом интернете. Обратите внимание: прописан альт тег на скорую руку и не продуманы с точки зрения SEO (man, номер 1, номер 2, номер 3).

Можно ли оставлять альт пустым, обязательно ли подписывать?

Правила Яндекса подчеркивают: атрибут alt особенно необходим тем сайтам, где большое количество фотоконтента. Поэтому нежелательно оставлять его пустым, особенно если Вы хотите получать трафик из поисковых систем через картинки. Если изображение имеет пустой атрибут alt или он вовсе отсутствует – это значит, что трафика из поисковой выдачи по картинкам не получить.

Изображения без атрибута alt допускаются у небольших рисунков (менее 150 пикселей), которые поисковая система расценивает как иконки, т.е. игнорирует.

Как верно заполнять атрибут alt для попадания изображений в топ поисковой выдачи?

Большую SEO-роль при ранжировании картинок играют следующие факторы:

Высокое качество фото, небольшой вес

Высокое качество фото, но при этом небольшой вес (от него зависит скорость загрузки страницы).

Кстати, гугл рекомендует указывать ширину/высоту картинки (атрибуты
«width»/«height»), чтобы некоторые браузеры могли зарезервировать место под изображение, продолжив загрузку страницы без ожидания загрузки фото.

Сжать изображение без потери качества можно с помощью сервиса TinyPNG.

Фото располагают максимально близко к относящемуся seo-тексту

Название

Название файла с изображением (не путать с альт и тайтл!) раскрывает его суть. Лучше писать название транслитом + тире вместо пробелов между слов. Пользуйтесь онлайн сервисами seo-транслитерации – выбор бесплатных широк.

Тексты ссылок (анкоры) на картинки

Корректно прописанные подписи картинок: теги alt (альт) и title (тайтл) изображения

SEO-рекомендации по правильному формированию подписей картинок

Уникальность подписи

Для магазина легко использовать название товара, его тип, модель, уникальных характеристик (цвет, материал, размер). Если требуется несколько фото одного товара, то можно добиться уникальности:

вид 1, вид 2…
вариант 1, вариант 2…
фото 1, фото 2…
рисунок 1, рисунок 2…

В таком случае легко попасть в топ выдачи сразу несколькими рисунками одного сайта (даже одной страницы).

2. Размер подписи:

min 3 слова
max 250 символов (+ экспериментально выяснено, что лучше уложиться до 15 слов, даже если они короткие)

3. Используются ключевые фразы, но нет переспама

По рекомендации Яндекс необходимо использовать только те ключевые слова, которые относятся к картинке, описывая ее содержание.

Если у вас интернет-магазин, воздержитесь от описательных фраз. Например, вместо «веселые дети играют конструктором лего» напишите «набор LEGO Пиратский корабль».
Откажитесь от использования чистых коммерческих запросы «заказать, сколько стоит, купить, цена»

4. Соответствие описанию

Описание изображения должно максимально соответствовать содержимому фото. Заранее хорошо продумайте, что писать в атрибут ALT у картинки, а также что прописать в TITLE к ним.

Могут ли атрибут alt (альт) совпадать с атрибутом title (тайтл) для изображения?

Напомню, арибут title – это название изображения, которое появляется у некоторых CMS при наведении курсора на фото. Не забудьте, что тайтл виден посетителям – формулируйте его человекопонятным языком. Атрибут тайтл пишется для посетителей сайта! Кто-то даже советует использовать атрибут title как дополнительную информацию о преимуществах товара/услуги.

Альт (alt) текст для изображений пишется поисковым системам, т.е. является частью SEO работ.
Alt и title фото могут совпадать. В top поисковой выдачи по картинкам попадаются оба варианта. Техподдержка Яндекс тоже разрешает совпадение.

Могут ли атрибут alt (альт) совпадать с тегом title (тайтл) страницы или заголовками h2, h3, h4?

Одно из требований к альт-текстам – их уникальность, поэтому 100%-ные совпадения исключены.

Но это правило легко обойти – достаточно разбавить заголовок словами «рисунок, фото, картинка». Есть мнение, что для alt (альт) стоит указывать те же самые ключевые фразы, что в тегах title страницы или Н1-Н3 (в зависимости от расположения фотографии).

Кстати, логика здесь есть, ведь рекомендуется размещать картинку поближе к связанному с ней тексту.

Не забудьте только проверить соответствие подписи остальным seo-рекомендациям.

Как подписывать изображения, если фото находится и на странице категории, и на карточке товара?

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

Поэтому можно продублировать атрибуты на обоих страницах (категория, карточка товара, подборка товаров по определенному признаку).

Конечно же, сомневающиеся могут перестраховаться и добавить к alt слова типа «подборка по цвету», «изображение товара», «категория».
Это уже на вкус seo-оптимизатора.

Что делать, если вместо alt и title высвечиваются иероглифы?

Такое изредка бывает, когда альт и тайтл написаны по-русски, а кодировка отличается от UTF-8. Ничего страшного, просто приведите свою кодировку к нужному формату.

В любом случае при рускогоговорящей аудитории сайта оба атрибута следует прописывать на русском языке.

Еще статьи:

Атрибут alt и title для картинок — что это и как правильно прописать для SEO

Атрибуты alt и title для картинок надо обязательно прописывать. Иначе сайт будет хуже ранжироваться алгоритмами ИИ. Это текст для юзеров, на экранах которых по разным причинам иллюстрации не отображаются. Ниже мы покажем на примерах, как правильно прописать для SEO эти теги. Грамотная оптимизация изображений — один из способов понравиться поисковым системам в 2022 году.

1. Что такое атрибут alt для картинок

2. Зачем нужен title для картинок

3. Alt и title для изображений — в чем разница

4. Как правильно прописать alt для SEO

5. Как правильно прописать title для SEO

6. Можно ли автоматически прописать alt на WordPress

7. Роль оптимизации изображений в продвижении сайта

8. Заключение

Что такое атрибут alt для картинок

Alt — это дескрипшен, который необходимо прописывать. Предназначен он, во-первых, для пользователей, у которых медленный интернет, подключен Screen Reader или просто выключено отображение изображений. Во-вторых, для роботов ПС, чтобы они лучше понимали смысл медиафайлов сайта. В-третьих, если вам нужен трафик из Яндекс и Гугл картинок — то без alt не обойтись.

Вот как отображается прописанный alt, если иллюстрация почему-то не показывается на экране пользователя.

Как прописывается на примере движка WordPress:

жмете в редакторе «Добавить медиафайл»;

загружаете картинку;
прописываете название в графе «Атрибут alt».

Внимание! Особенно важно уделять внимание alt, если на странице галерея изображений и нет текста, описывающего иллюстрации.

Когда alt прописывать необязательно:

аватарка;
миниатюра;
иконка в кнопке.

Однако если изображение не требует alt, то не нужно вписывать в код пробел или лишние символы. Например, вот плохие примеры.

Тут Screen Reader может посчитать картинку бессмысленной.

Зачем нужен title для картинок

Он дает дополнительную инфу. Пользователю будет легче определить смысл изображения. Отображается тег при наведении мыши (курсора) на иллюстрацию.

Некоторые вебмастеры старой школы считают, что органический трафик не зависит от title. Поэтому его не заполняют. Однако исследования, проведенные недавно, говорят об обратном.

Как заполнить тайтл для фото в WP:

загрузить медиафайл;
заполнить эту графу.

Alt и title для изображений — в чем разница

Оба являются тегами для картинок. Но разница в следующем:

alt — описание, передающее изображение на индексацию роботу ПС и влияющее на выдачу Google;
title — заголовок, выводящий подсказки для пользователя и влияющий на выдачу по картинке в Яндексе/Гугле.

Как правильно прописать alt для SEO

Крайне важно не просто прописать alt, но сделать это правильно. Разберем на примере. Допустим, у нас есть онлайн-шоп для домашних животных. Загружаем фото под товар — корм для кошек.

Способы прописания, от худшего к лучшему:

Фото 001, 002, 003. Текст есть, но он не несет никакой пользы. Яндекс точно не пустит это фото в выдачу, так как сам пишет об этом.

2. Корм для кошек. Описали картинку, но запрос получается чересчур высокочастотным. Аж 17613 показов по Вордстату — конкурировать странице будет сложно. Кроме того, непонятно — запрос информационный или коммерческий.

3. Купить корм для кошек Pro Plan. Отлично, вывели НЧ запрос с 78 показами.

Таким образом, вот основные правила для alt:

содержательным;
в меру коротким — например, популярный скринридер JAWS зачитывает длинные строки как несколько иллюстраций вместо одной;
уникальным — хватит и того, чтобы не повторять текст, уже имеющийся на странице;
включать ключевой запрос;
не иметь грамматических, орфографических ошибок;
не быть спамным — кей надо вписывать естественно, а не наобум (например, так нельзя «Купить корм для кошек Pro Plan, цена, Москва, быстро).

Как правильно прописать title для SEO

Примерно таким же надо делать title:

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

Можно ли автоматически прописать alt на WordPress

Этот движок не умеет автоматически прописывать alt. Но есть возможность использования плагинов.

Update Image Tag Alt Attribute. Надо в настройках плагина переключить кнопку в состояние On и отметить страницы, где нужно прописывать тег автоматически. Что именно делает расширение: берет все пустые теги медиафайлов и автоматически заполняет их на основании тематики страницы.

2. Clearfy. Многофункциональное расширение, одной из функций которого является прописание тегов для картинок. Все что нужно сделать — выставить галочку в настройках плагина.

Для крупного интернет-магазина лучше автоматизировать проставление alt/title через шаблон. Поручите технарю реализовать этот инструмент. Полезно это будет и для арбитражника, который льет органический трафик на офферы.

Чтобы проверить наличие/отсутствие тегов картинок на своем сайте, также можно использовать автоматизацию. Особенно, если на ресурсе много страниц. Для этого можно использовать специальные сервисы типа Screaming Frog, Netpeak Spider и другие. Они же могут помочь в сборе alt конкурентов, когда это нужно сделать массово. А это, если хотите узнать, как скопировать чужой сайт полностью и переделать под себя. Также вам могут быть полезны сервисы, где можно собрать ключевые слова конкурентов.

Роль оптимизации изображений в продвижении сайта

Раньше главные усилия в SEO были направлены на текстовый контент. Однако сегодня приоритеты изменились — ПС начали обращать пристальное внимание также на медиа файлы.

Что может дать вебмастеру грамотная оптимизация картинок:

дополнительный органический трафик — согласно исследованию западных агентств, до 25% поисковых запросов Гугла относится именно к изображениям;
повышение ПФ целевой страницы — Nielsen Norman Group утверждает, что почти 80% пользователей читают те отрывки контента, где есть иллюстрации;
улучшение в мобильной выдаче.

Alt и title — одни из главных способов оптимизации иллюстраций. Так, в ходе экспериментов в 2020 году было доказано, что эти теги влияют на SEO таким образом.

	Alt	Title
Обычный поиск	Влияет в Гугл, не влияет в Яндекс	Не влияет в Гугл и Яндекс
Поиск по картинкам	Влияет в Яндекс и Гугл	Влияет в Гугл/Яндекс

Что еще включает оптимизация картинок:

качество и размер — роботом больше нравятся большие и качественные фото, но надо понимать, что чересчур объемные файлы тормозят работу сайта;
релевантность — картинка должна быть тематической;
уникальность — поисковики просто обожают оригинальные фото;
правильный формат — роботы ПС с аппетитом кушают форматы jpg/jpeg/png/gif/svg, но не любят bmp/jpeg-xr/web;
права на использование — если нет своих картинок, то скачивать их желательно с проверенных стоков (иначе можно получить фильтр за нарушение авторских прав).

Заключение

Безусловно, грамотное заполнение тегов alt/title и другая оптимизация изображений важны для SEO. Однако это не единственные и не основные пункты, на которые вебмастер должен обращать внимание. В 2022 году, как и всегда, рулит общий контент сайта — он должен быть полезным, уникальным, интересным и в максимальной степени закрывать боли клиента. Да и вообще, сегодня можно не заморачиваться, и сразу купить качественный сайт с доходом.

Для чего используется атрибут alt?

Это описание для картинок. Его важно заполнять правильно, так как тег влияет на поисковую выдачу.

Зачем нужен title для изображений?

Это заголовок, отображаемый при наведении курсора на фото. Влияет на ранжирование в поиске по картинкам.

Как прописать alt и title для изображений в WordPress?

Обычно, это делается в процессе добавления медиафайла. Подробнее мы написали об этом выше.

Какая должна быть длина атрибута alt?

В пределах 20-160 символов.

Влияют ли эти атрибуты на продвижение сайта?

Да, они влияют на SEO и являются основными пунктами оптимизации изображений.

Оцените статью по 5-бальной шкале

Атрибут alt WordPress – что это и как его правильно заполнять

Поисковые системы давно научились определять, что изображено на картинках с помощью нейросетей и программ, распознающих пиксели. Наша задача как оптимизаторов подсказать ПС, что показано на изображении, поэтому есть специальные конструкции. Разберем где находиться в WordPress атрибут alt и как правильно заполнить.

Содержание

Что такое и как выглядит атрибут alt в коде изображения
Как прописать alt в классическом редакторе WordPress
Пишем альт в новом Gutenberge
Что писать и рекомендации по заполнению атрибута alt для тега img
Как автоматически проставить alt который имеет пустой атрибут

Что такое и как выглядит атрибут alt в коде изображения

ALT – от сокращения альтернативный текст, если фото не загрузиться, то на экране отобразится, то что в нем содержится. В любом современном браузере есть общепринятая клавиша F12, запускающая инспектор кода, либо нажимаем правой кнопкой на фото, показываю на примере Google Chrome, и выбираем «Посмотреть код».

Инспектор кода.

Выбираем объект.
Жмем правой кнопкой мыши и выбираем соответствующий пункт, в разных браузерах называет по другому, но смысл одинаков.
Появиться инспектор, в нем должно сразу перекинуть на то место где идет данная картинка в HTML коде страницы, определяется тегом img.
Видим заполненный атрибут alt. Тут можно посмотреть версию wlw manifest, дающая информацию хакерам.

Данная инструкция поможет нам дальше, чтобы определить и проверить наличие альтов на фотографиях.

Как прописать alt в классическом редакторе WordPress

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

Знак карандаша.

Далее откроется всплывающее окно, вверху будет область вставки надписи для атрибута alt. Заполняем поле и нажимаем Обновить. Далее можете пройти на сайт и проверить наличие. Ниже в WordPress можно сделать подпись, это такой же текст, как и остальные, прикрепленный непосредственно к объекту и расположен всех ближе к нему, заполнять или нет – решайте самостоятельно.

Где писать alt в WordPress.

Не советую заходить в библиотеку медиафайлов и проставлять к каждой фотографии по очереди альт – не сохраняться, это недочет самого WordPress, который до сих пор не устранили. Чуть ниже будет раздел, чтобы вставить еще один дополнительный атрибут title, показывающий какую–либо надпись при наведении на фото.

Пишем альт в новом Gutenberge

В новом блочном редакторе Гутенберг, намного проще создавать alt. Нажимаем на необходимое изображение в WordPress и обращаем свой взгляд на правую колонку панели. Там сразу срабатывает скрипт, прописываете в соответствующее поле необходимую комбинацию. Далее проверяем его наличие на WordPress блоге как показывал выше в первом разделе статьи. Советую прочитать про вредные подключения dns prefetch.

В Gutenberg.

Что писать и рекомендации по заполнению атрибута alt для тега img

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

Писать нормальный удобочитаемый отрывок, чтобы не было такого «описание 1».
Добавляем информацию именно о том что изображено, впоследствии можете получить трафик с поиска картинок в Яндексе, Гугле и других сервисах.
Не надо вставлять целые куски, только суть, чтобы было понятнее.
Люди с ограниченным зрением «видят» фото как размытое пятно, главное понять что показано, поэтому заполнять альтернативный текст обязательно, именно его скринридер и прочитает.
Не наполнять его бессмысленным количеством ключевых слов, можно лишь в одном из медиафайлов сделать намек на главный запрос, написав в разбавленном виде.
Вставлять по возможности «хвосты» из запросов и LSI фразы, но по смыслу без переспама и не логичной формулировки.
Делать их уникальными, чтобы не было одинаковых интерпретаций.

Как автоматически проставить alt который имеет пустой атрибут

Сравнительно не давно заполненность alt стала обязательной для валидации страниц, потому что в силу вступили требования для слабовидящих. Поэтому если даже там будет написан откровенный бред, то это защитит от ошибок при проверке HTML разметки.

Не всегда удается прописать их, просто потому что забываешь, либо случайно пропустил при написании большого поста. В любом случае данные проблемы нужно устранять. Советую использовать плагин Clearfy PRO – берет заголовок статьи и помещает в те места где alt пустой. Нужно лишь активировать соответствующую функцию в плагине.

Переключатель в клеарфай.

После этого действия все альты на сайте заполнятся автоматически. Плагин Clearfy PRO устраняет не только проблему с пустым атрибутами в WordPress, но и улучшает WP еще по 45 пунктам, от чистки кода, например удаление prev и next, до улучшения SEO показателей.

Обзор на Clearfy PRO

Надеюсь теперь понятно что такое alt, и как этот атрибут проставить в CMS WordPress, советую пользоваться новой панелью для создания статей, в ней делать операции легче и быстрее.

Доступность: лучшие практики альтернативного текста изображения

Перейти к основному содержанию Центр помощи

Изменено: 25 августа 2022 г., 14:05

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

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

В этой статье приведены примеры передового опыта использования тегов alt для изображений, которые помогут вам правильно реализовать эти теги на вашем веб-сайте.

Siteimprove Tech Talk video: Демистификация доступных имен

Основные правила замещающего текста

При использовании замещающего текста изображения он не должен включать: автоматически объявить изображение как изображение. Таким образом, альтернативный текст «Изображение яблока» будет прочитан программой чтения с экрана как «изображение, Изображение яблока».

Использование правильной грамматики может улучшить работу пользователей программы чтения с экрана:

Сделать первую букву заглавной
Заканчивать целые предложения точкой

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

Замещающий текст должен максимально кратко описывать изображение. Эмпирическое правило: избегайте текстовых альтернатив длиннее 100 символов. Наличие длинного альтернативного текста приведет к плохому взаимодействию с пользователем для тех, кто использует программы чтения с экрана. Если изображение требует более длинного описания, лучше описать изображение в содержимом и предоставить более короткий альтернативный текст.

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

Чтобы написать хороший замещающий текст, учитывайте контекст изображения. Какой дополнительный контент он поддерживает? Какие детали важны в изображении? Альтернативный текст должен соответствовать тону голоса сопровождающего контента.

Вопреки распространенному мнению, замещающий текст не обязательно должен быть объективным описанием, он может передавать нюансы, детали и эмоции, если они имеют отношение к пользовательскому опыту.

Например, если приведенное ниже изображение короля Англии Генриха VIII использовалось в статье об истории королевской семьи Англии, достойный альтернативный текст мог бы просто описать изображение как «alt=»Король Англии Генрих VIII. ». Чтобы создать более насыщенный опыт, альтернативный текст может быть таким: «Король Англии Генрих VIII выглядит суровым и носит роскошную королевскую одежду».

Если бы это же изображение использовалось в другом контексте: в статье, посвященной королевской моде в Англии XX века, подходящим альтернативным текстом мог бы быть «Король Англии Генрих VIII в шляпе с меховой отделкой и накидке, ослепительной рубашке и золотых украшениях». ».

HTML:

(Источник изображения короля Англии Генриха VIII)

Альтернативный текст ниже описывает изображение парка:

HTML:

  png" alt="Вид с воздуха на Центральный парк в Нью-Йорке" />

( Источник изображения Центрального парка в Нью-Йорке с высоты птичьего полета)

Альтернативный текст для декоративных изображений

Декоративные изображения — это изображения, которые не служат какой-либо конкретной цели, то есть не предназначены для передачи какого-либо значения или важной информации. В этом случае лучше всего использовать так называемый альтернативный текст NULL или пустой альтернативный текст.

HTML:

  (две кавычки после alt=)

HTML:

/>

(Источник декоративного изображения)

Обратите внимание, что атрибут alt все еще присутствует, даже если он пуст. Когда средство чтения с экрана встречает нулевой замещающий текст, оно полностью пропускает изображение, не сообщая о его наличии. Если атрибут alt отсутствует, программа чтения с экрана вместо этого прочитает имя файла изображения, что может сильно отвлекать тех, кто использует технологию чтения с экрана.

Изображение с текстом

Согласно WCAG, изображения текста не допускаются. Если вы не можете избежать изображений текста, лучше иметь точно такой же текст в атрибуте alt.
Например, для альтернативного текста этого несвязанного изображения вы можете использовать слова самого изображения:

HTML:

  png" alt=" Быстрая коричневая лиса прыгает через ленивую собаку" />

(Источник изображения быстрой коричневой лисы, прыгающей через ленивую собаку)

Функциональные образы (связанное изображение)

Функциональные образы используются для инициирования действий, а не для передачи информации. Они используются в кнопках, ссылках и других интерактивных элементах. Альтернативный текст для изображения должен передать действие, которое будет инициировано (назначение изображения), а не описание изображения.

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

Пример 1: Изображение, используемое отдельно в качестве связанного логотипа

Следующее изображение содержит ссылку, ведущую на веб-страницу Siteimprove, и показано без какого-либо другого текста ссылки. Он имеет альтернативный текст «Siteimprove home», чтобы указать, куда ссылка приведет пользователя.

HTML:

Пример 2: Изображение в тексте ссылки

В этом примере изображение используется для дополнения текста ссылки, ведущей на веб-сайт Siteimprove. Изображение не представляет полную функциональность и не передает другую информацию, кроме той, которая уже предоставлена в тексте ссылки, поэтому применяется нулевое (пустое) значение (alt=»»), чтобы избежать избыточности и повторения.

Siteimprove Home

HTML:

Siteimprove Home

Дополнительные ресурсы

Это дерево решений от W3C описывает, как использовать атрибут alt элемента в различных ситуациях. курсив и выделение
Считаются ли изображения, такие как навигационные крошки или значки в формате PDF, декоративными?

Вы нашли это полезным? Да №

Отправить отзыв

Извините, мы не смогли вам помочь. Помогите нам улучшить эту статью своими отзывами.

Создание пустого или нулевого атрибута Alt для декоративных изображений — рекомендации по доступному онлайн-дизайну

Хизер Капретт

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

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

Декоративные изображения требуют добавления пустого или нулевого атрибута alt в представлении кода HTML , который сообщит средству чтения с экрана пропустить изображение. Пустой атрибут alt записывается как alt=” ” с пробелом между двойными кавычками. Нулевой замещающий текст записывается как alt=»» без пробела между набором кавычек. Без нулевого или пустого атрибута alt средство чтения с экрана объявит, что есть изображение, и, возможно, сообщит его размеры, но оставит аудиторию в недоумении, что это за изображение и насколько оно важно.

Вы можете создать пустой атрибут alt (alt=» «), введя один пробел с пробелом в поле Описание изображения при вставке изображения с помощью редактора содержимого Blackboard. Это легкий маршрут. Когда контент считывается с помощью JAWS 17 в Firefox, он пропускает изображения, не объявляя их вообще. NVDA объявит «графический», но не предоставит никаких размеров или другой информации. Если вы используете null атрибут alt изображения, NVDA пропустит его, не объявляя об этом. JAWS 17 также будет пропускать изображение, не объявляя об этом, если установлен нулевой атрибут alt. Поэтому лучше всего создать нулевой атрибут alt для декоративного изображения или изображения, не передающего информацию, которой нет на странице .

Ниже приведен пример декоративного изображения росчерка, который можно использовать в верхней части страницы или в качестве разделителя разделов документа. Для этого потребуется нулевой атрибут alt для элемента изображения в HTML. Код HTML для этого изображения будет выглядеть следующим образом:

***ВАЖНО: Редактор содержимого Blackboard не будет создавать пустые атрибуты замещающего текста для изображения, если вы просто оставите Описание изображения пустым при вставке изображения. То есть, если вы оставите поле Описание изображения пустым, а затем нажмете кнопку Просмотр кода HTML после того, как вставили изображение, вы нигде не увидите .

Чтобы установить изображение с нулевым замещающим текстом, вставьте изображение с Вставьте/редактируйте изображение , как обычно, но оставьте поле Описание изображения пустым, как показано на изображении ниже. Не беспокойтесь об этом прямо сейчас.

При появлении всплывающего диалогового окна с предупреждением о необходимости включения описания изображения, чтобы сделать его доступным, нажмите кнопку ОК. Когда этот диалог исчезнет, нажмите Вставить , чтобы завершить вставку изображения.

Далее вам нужно переключиться на Просмотр кода HTML с помощью значка HTML , второго справа в третьем ряду, для редактирования кода.

Вы увидите код, созданный редактором контента Blackboard для изображения. Это будет выглядеть следующим образом:

Вы можете увидеть очень длинное изменение местоположения и имени, созданное Blackboard для изображения, заканчивающееся форматом файла, то есть gif. Вы также увидите атрибуты высоты и ширины. Вы можете добавить нулевой атрибут alt в любом месте после img плюс пробел. Мы добавим его сразу после исходного ( src ) пути к gif. Поместите курсор прямо перед высотой h и введите alt=»», а затем пробел. Теперь код будет выглядеть так:

alt =”” высота=”105″ ширина=”659″ />

Создание плавающего размера изображения

Мы заставим изображение реагировать на изменения размера окна браузера, изменив его ширину на процентное значение. Установка его ширины в процентах от контейнера, в котором он находится, позволит ему масштабироваться пропорционально вниз с уменьшением размера окна. Этот метод также позволяет избежать необходимости горизонтальной прокрутки, если окно становится меньше ширины изображения. Мы удалим высоту = «105» и ширину = «659».″ из приведенного выше кода, чтобы он выглядел следующим образом:

blackboard.com/sessions/3/4/2/0/8/8/4/7/session/ff9f70436e4a4ab9a27a283871716715/flourish%281%29.gif» alt=»» />

Теперь мы создадим ширину, которая использует проценты в качестве значения. Я использую 90%. Мне нравится делать изображение немного меньше, чем 100% его контейнера, чтобы создать пустое пространство слева и справа от изображения. Чтобы ввести ширину = «90%», я оставляю пробел после alt = «» и ввожу новое свойство. Окончательный код будет выглядеть так:

alt =”” ширина=”90%” />

Примечание о размере изображения. Если размер вашего изображения в пикселях составляет меньший процент родительского контейнера, чем указанный вами процент, произойдет некоторое увеличение масштаба, что может привести к менее детализированному отображению изображения. Область содержимого Blackboard уменьшается до минимальной ширины 1150 пикселей, после чего перестает реагировать на уменьшение ширины экрана браузера.

Ниже приведена сравнительная таблица, которую можно использовать для определения процента, который займет изображение с определенным количеством пикселей, когда область содержимого Blackboard уменьшена до минимальной ширины. Если окно браузера увеличено, изображение по-прежнему будет занимать указанный вами процент пространства, но пиксели не будут добавляться к вашему изображению для сохранения качества изображения.


Ширина изображения в пикселях	Ширина изображения в процентах
1150	100%
1092,5	95%
1035	90%
977,5	85%
920	80%
862,5	75%
805	70%
747,5	65%
690	60%
632,5	55%
575	50%
517,5	45%
460	40%
402,5	35%
345	30%
287,5	25%
230	20%
172,5	15%
115	10%
57,5	5%

Существует еще один способ заставить изображение реагировать на уменьшение размера экрана и устранить необходимость в горизонтальной прокрутке, но в Blackboard его реализация не идеальна. Blackboard обрезает небольшую часть изображения с правой стороны. Этот метод использует свойство max-width для изменения размера изображения. В представлении HTML-кода вы устанавливаете максимальную ширину изображения равной 100 % родительского элемента, а для высоты задаете значение auto. В этом случае изображение будет уменьшено, чтобы соответствовать размеру окна, меньшему, чем его исходная ширина в пикселях (до минимальной ширины 1150 пикселей в Blackboard), но не будет увеличиваться, если размер окна больше, чем его ширина в пикселях. пикселей. Код будет выглядеть следующим образом:

Пример декоративного изображения № 2:

В следующем примере показано использование изображения (кнопка «Пуск») рядом с текстом, чтобы привлечь внимание пользователя к важной информации. Это помогает зрячим пользователям и помогает ориентироваться людям со слабым зрением или когнитивными нарушениями. Изображение круглой кнопки с надписью «Старт» повторяет ту же информацию или имеет то же значение, что и текстовый заголовок «Начать здесь», расположенный над ним. Таким образом, это не добавит смысла тому, кто слушает программу чтения с экрана. Поэтому мы зададим этому изображению нулевой атрибут alt, чтобы средство чтения с экрана его пропустило.

Желтый значок папки указывает на то, что автор добавила папку с содержимым в свой курс Blackboard. Чтобы создать папку под названием «Начните здесь!» вы можете добавить папку содержимого из меню Build Content на панели действий Blackboard с режимом Edit On .

Введите имя папки с содержимым, например Start Here! в текстовом поле Имя .

Чтобы создать изображение кнопки «Пуск» слева от текстового описания папки, вы можете скопировать и вставить следующий код в течение Просмотр кода HTML для поля Текстовое описание:

blackboard.com/bbcswebdav/pid-2171115-dt-content-rid-11267299_1/xid-11267299_1″ =”поле: 0px 10px;” height=”50″ width=”50″ alt=”” /> Эта папка содержит инструкции и общий обзор курса.

На изображении ниже показан код, вставленный в диалоговое окно просмотра HTML-кода, наложенный поверх редактора WYSIWYG. Обратите внимание, что кнопка проверки орфографии, обведенная красным, отключена. Это значок ABC с галочкой. Это позволяет избежать ненужной вставки элементов в код из-за ошибки в текущей версии Blackboard Learn. Кнопка HTML, нажатая для входа в представление кода HTML, также обведена красным.

*** Примечание. Этот код будет работать для выравнивания по центру по вертикали для одного небольшого изображения и одной короткой строки текста рядом с ним. Если у вас есть изображение большего размера и вы хотите разместить абзац текста справа от него в редакторе содержимого Blackboard Learn, см. раздел «Создание плавного обтекания текста вокруг изображения» .

Как добавить атрибуты замещающего текста к изображениям WordPress за 1 минуту

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

Метод, показанный здесь, является самым простым, легким и быстрым способом вставки тегов alt в WordPress. Добавить (или изменить) alt-теги изображения в WordPress можно за 5 шагов:

Откройте свою статью или страницу и найдите изображение.
Выберите изображение и нажмите «Редактировать» в меню.
Добавьте замещающий текст в окно «Сведения об изображении».
Нажмите «Обновить», чтобы применить новый атрибут alt.
Нажмите «Обновить», чтобы сохранить новый контент.

Этот метод также позволяет вам добавлять очень релевантные замещающие тексты, поскольку вы можете видеть, где именно в содержании появится это изображение.

В этом видео мы также демонстрируем метод, описанный выше:

Альтернативные способы добавления тегов

С WordPress легко работать даже новичкам. Он поставляется с простым и понятным функционалом. Но с настройками и изменениями, пытаясь сделать наш веб-сайт идеальным для нашей целевой аудитории, мы часто вводим больше переменных, которые могут изменить эту функциональность. Если у вас возникли проблемы с перечисленным выше методом, вот два альтернативных метода, которые помогут вам добиться того же.

Альтернативный метод № 1: в медиатеке WordPress

Вот простой альтернативный способ добавления альтернативного текста. WordPress позволяет добавлять атрибут альтернативного текста к изображениям непосредственно в Медиатеке. Эта функция устанавливает «глобальный» альтернативный текст для изображения, который WordPress затем использует в каждом экземпляре изображения на каждой странице.

Это также здорово, потому что позволяет сэкономить время, выполнив работу всего один раз. Это прекрасно работает, если вы не хотите возиться с кодом и страницами, на которые вы ранее вставляли изображения.

Вот первый альтернативный метод:

Войдите в панель администратора WordPress вашего сайта.
Перейдите в «Медиа» -> «Библиотека» на панели управления WordPress.
Щелкните любое изображение в списке или загрузите новое.
Заполните поле «Альтернативный текст» справа.
Нажмите на поле «Альтернативный текст», чтобы WordPress сохранил ваши изменения.

Единственным недостатком этого метода является то, что вы не можете точно увидеть, где и как размещено изображение. Отсутствие этого контекста может сделать ваши альтернативные теги несколько неуместными.

Альтернативный метод № 2: непосредственно на странице Код

Наконец, если первые два метода не работают для вас, вот альтернативный способ сделать это. Вы можете добавить или перезаписать тег alt в HTML-коде для каждого изображения.

Вот второй альтернативный метод:

Откройте запись в блоге или страницу и найдите нужное изображение.
Выберите изображение, щелкнув и перетащив его мышью.
Теперь нажмите на редактор «Текст» в правом верхнем углу редактора WordPress.
Теперь в строке кода, начинающейся с «
Наконец, нажмите «Сохранить черновик» или «Обновить» сообщение, чтобы применить изменения.

Этот процесс полезен в некоторых случаях, когда к изображению добавлен глобальный тег alt, но вы хотите изменить его на определенной странице. Например, предположим, что у вас есть изображение с очень «обычным» тегом alt. Однако это изображение также играет более конкретную роль только на одной из ваших страниц.

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

Однако важно отметить, что этот процесс требует доработки и, следовательно, значительно больше времени.

Украсть мой процесс написания эффективных альтернативных тегов в WordPress

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

При создании постов в блоге добавляйте изображения последними и добавляйте тег alt при загрузке изображений. Чтобы продемонстрировать, как именно, я покажу вам шаги для этой самой статьи.

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

Таким образом, вы можете называть изображения чем-то, относящимся к абзацу. Это происходит потому, что теперь вы знаете, какая картинка относится к какому разделу.

Например, если вы создаете таблицу сравнения кормов для собак в виде изображения, вы можете назвать это изображение «таблица сравнения лучших кормов для собак в этом году.png».

Таким образом, как только я загрузил изображение в вашу медиатеку WordPress, все, что вам нужно сделать, это:

Скопируйте «Название» изображения (например, лучшая-собачья-корм-в-этом-году-сравнительная-таблица.png).
Вставьте его в поле «Альтернативный текст».
Удалите дефисы (например, сравнительная таблица лучших кормов для собак в этом году).

Так почему же этот процесс назван «следующим лучшим после нарезки хлеба™?» Ну, таким образом, вы:

Заставьте себя писать краткие имена изображений, чтобы уменьшить беспорядок.
Напишите хорошие имена файлам изображений для улучшения SEO.
Найдите более удобное расположение изображений в правильных местах.
У вас уже есть очень релевантный и описательный тег alt.
Соответствует эмпирическому правилу 125 символов, потому что вы, естественно, предпочитаете короткие имена файлов, чтобы сохранить чистоту.

В завершение, как вы можете видеть на примере скриншота выше, вы можете прямо в тексте отметить все места, где изображение должно быть добавлено квадратными скобками [вот так].

Эта практика позволяет вам искать в тексте после того, как вы закончите писать, и найти точные места изображения. Это также позволяет вам выяснить, пропустили ли вы изображение.

И последнее, но не менее важное: пакетная обработка также упрощает одновременное сжатие изображений.

Таким образом, вы также можете не упустить возможность оптимизации некоторых из них. Мой любимый для работы, который также является бесплатным, TinyPng.

Проверка того, успешно ли вы добавили текст

Есть два простых способа проверить, успешно ли вы добавили теги alt на свой сайт WordPress. Первый метод заключается в проверке кода вашей страницы, а второй — в сканировании вашего сайта с помощью инструмента SEO.

Чтобы проверить код вашей страницы:

Щелкните правой кнопкой мыши на активной странице.
В появившемся меню выберите «Просмотреть исходный код страницы».
На открывшейся странице нажмите CTRL+F на Win или CMD+F на Mac.
В поле поиска введите alt=».

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

Чтобы проверить изображения с помощью инструмента:

Войдите в выбранный вами инструмент — я, конечно, буду использовать Morningscore.
Перейти к инструменту аудита сайта.
Отсканируйте страницу, на которой вы внесли изменения.
Когда все будет готово, вы сделаете это, если изменение устранит проблему.

Наконец, люди иногда сталкиваются с тем, что их теги alt не отображаются или не обновляются в WordPress даже после их добавления. Если это случилось с вами, ознакомьтесь с нашей статьей об исправлении не отображаемых тегов alt в WordPress.

Заключительные слова

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

Alt-Text zu Bildern hinzufügen | Mailchimp

Hinweis

Wenn du zu unserem neuen E-Mail-Builder gewechselt hast, treffen einige der Schritte in diesem Artikel möglicherweise nicht zu. Wie du den neuen Builder verwendest, erfährst du in den Artikel Eine E-Mail mit dem neuen Builder gestalten.

Wir wissen, dass das Design deiner Kampagnen wichtig ist, und Bilder sind ein großer Teil dessen, был das Design ausmacht. Aber in einigen Fällen kann es vorkommen, dass ein Abonnent die Bilder in deinen Kampagnen nicht sehen kann. Hier kommt der Alt-Text ins Spiel.

In diesem Artikel erfährst du mehr über altern Text für Bilder und darüber, wie du Alt-Text zu deinen E-Mail Kampagnen hinzufügen kannst, damit jeder Abonnent ein hervorragendes Benutzererlebnis hat.

Убер альтернативный текст

Alt-Text – oder Alternativtext – ist eine kurze Beschreibung eines Bildes in deiner Kampagne, die angezeigt wird, wenn Abonnenten nicht auf deine Bilder zugreifen können. Dies kann passieren, wenn sie Bilder in ihrem E-Mail Client deaktiviert haben oder deine Kampagne mit einer Vorlese-Anwendung lesen.

Alt-Text hilft deinen Abonnenten zu verstehen, welchen Wert ein Bild zu deiner Gesamtbotschaft beiträgt, oder informiert sie darüber, dass ein Bild rein dekorativ ist und ignoriert werden kann. Es mag wie eine Nebensächlichkeit erscheinen, aber Alt-Text kann sehr wichtig sein, wenn die Abonnenten deine Bilder nicht sehen können, weshalb du ihn für jedes Bild in deiner Kampagne hinzufügen solltest.

Альтернативный текст и ограничение доступа

Альтернативный текст содержит ошибки для мужчин, которые поддерживаются программой Bildshirmleseprogramme verwenden, мы используем лучшие практики для ограничения доступа к электронной почте.

Ohne Alt-Text teilt eine Vorlese-Anwendung deinem Abonnenten mit, dass dort ein Bild vorhanden ist, aber der Abonnent hat keine Möglichkeit, zu ermitteln, welche Informationen das Bild enhält. Wenn du mehr über die Best Practices für Barrierefreiheit erfahren möchtest, solltest du «Barrierefreiheit im E-Mail-Marketing» lesen.

Альтернативный текст и изображение

Wenn deine Bilder nicht in den Posteingängen deiner Abonnenten angezeigt werden, werden sie möglicherweise von deren E-Mail Client blockiert. Aus Sicherheitsgründen schalten viele E-Mail-Clients Bilder standardmäßig ab, sodass Abonnenten die Bildanzeige manuell aktivieren müssen. Wenn deine Abonnenten Bilder blockiert haben, sehen sie deinen Alt-Text anstelle deines Bilders.

Таким образом, Alt-Text aus, wenn Bilder blockiert sind.

Dieses Bild шляпа с альтернативным текстом.

Dieses Bild с альтернативным текстом.

Советы по эффективности Alt-Text

Hier sind ein paar Tipps, die du beachten solltest, um einen angemessenen und effektiven Alt-Text zu schreiben.

Fasse dich kurz
Alt-Text sollte leicht lesbar und verständlich sein, damit deine Abonnenten mit dem Rest deiner Nachricht fortfahren können. Beschränke dich auf einen oder zwei Sätze.
Achte auf die Zeichensetzung
Vorlese-Anwendung verwenden Zeichensetzung, um zu wissen, wo beim Lesen von Inhalten pausiert werden muss. Daher ist es wichtig, die richtige Zeichensetzung in deinem Alt-Text zu verwenden.
Verwende keine Anführungszeichen
Alt-Attribut, das dem dem HTML-Code Deiner Kampagne hinzugefügt wird, verwendet Anführungszeichen, um zu identifizieren, wo dein eigentlicher Alt-Text beginnt und endet. Zusätzliche Anführungszeichen führen dazu, dass der HTML-Code nicht ordnungsgemäß funktioniert.
Wiederhole Text, der in Bildern erscheint
Es ist immer am besten, wenn wichtige Informationen im Haupttext deiner Nachricht anstatt in einem Bild enthalten sind. Wenn ein Bild jedoch Text enthält, wiederhole diese Informationen im Alt-Text, damit deine Abonnenten sie nicht verpassen.
Wiederhole nicht die Bildunterschriften
Bildunterschriften werden von Vorlese-Anwendungen gelesen und auch dann angezeigt, wenn Bilder blockiert sind, а также wiederhole die Bildunterschriften nicht in deinem Alt-Text. Alt-Text sollte Informationen über dein Bild liefern, die der Abonnent nicht allein aus der Bildunterschrift entnehmen kann.
Berücksichtige den Kontext
Der Kontext ist das Wichtigste, das es beim Verfassen von Alt-Text für ein Bild zu beachten gilt. In welcher Beziehung steht das Bild zu dem Inhalt, der es umgibt? Frage dich, welche Informationen deine Abonnenten bereits aufgrund der umgebenden Inhalte über das Bild haben könnten.
Kennzeichne dekorative Bilder
Wenn dein Bild rein dekorativ ist, gib dies kurz in deinem Alt-Text an, sodass deine Abonnenten das entsprechende Bild überspringen und mit dem Rest deiner Nachricht weitermachen können. Итак, könntest du z. Б. айнфах «Dekoratives Bild» Шрайбен.
Teste deine Inhalte
Manche E-Mail-Clients zeigen keinen Alt-Text für ein verlinktes Bild oder keinen Alt-Text an, der die Bildbreite überschreitet. Отправляйте тестовые сообщения электронной почты на различные клиенты электронной почты и деактивируйте файлы, которые можно использовать, с отключенным альтернативным текстом.
E-Mail-Kampagne in der Vorschau anzeigen und testen

Alt-Text zu Bildern hinzufügen

Es gibt verschiedene Möglichkeiten, Bilder in Mailchimp mit Alt-Text zu versehen, und die Methode, die du verwendest, hängt davon ab, wo sich dein Bild befindet.

Убер Эйнен Bildblock
Über einen Textblock
In Vorlagen mit benutzerdefiniertem Код

Убер Эйнен Bildblock

So fügst du Alt-Text zu einem Bild in einem beliebigen Bild-Inhaltsblock, wie beispielsweise Image (Bild), Image Group (Bildgruppe), Image Card (Bildkarte) или Image + Caption (Bild + Bildunterschrift) , hinzu:

Klicke im Abschnitt Content (Inhalt) des Kampagnen-Builders auf Редактировать дизайн (Design beiten) .
Klicke im Schritt Design auf den Bildblock, mit dem du arbeiten möchtest.
Klicke im Bearbeitungsbereich auf Alt .
Gib im Feld Image Alt-Text (Bild-Alt-Text) den Alt-Text für dein Bild ein.
Нажмите на обновление (Актуальное обновление) .
Нажмите на Сохранить и закрыть (Speichern und schließen) .

Jetzt ist alles startklar. Jetzt werden deine Abonnenten deine Inhalte nicht mehr verpassen, auch wenn sie deine Bilder nicht sehen können.

Über einen Текстовый блок

Um Alt-Text zu einem Bild in einem Text -Inhaltsblock hinzuzufügen, befolge diese Schritte.

Klicke im Abschnitt Content (Inhalt) des Kampagnen-Builders auf Edit Design (Design beiten) .
Klicke im Schritt Design auf den Textblock, der das gewünschte Bild enthält.
Doppelklicke auf das Bild, um das Content-Studio zu öffnen.
Щелкнуть по Показать параметры стиля изображения (Стиль изображения) .
Gib im Feld Альтернативный текст (Alt-Text) den Alt-Text für dein Bild ein.
Нажмите на кнопку «Сохранить и вставить изображение» (рассмотрите и загрузите информацию) .
Нажмите на Сохранить и закрыть (Speichern und schließen) .

Гуте Арбайт! Auch wenn Abonnenten deine Bilder nicht sehen können, verpassen sie jetzt deine Inhalte nicht mehr.

In Vorlagen mit benutzerdefiniertem Код

Wenn du deine Vorlagen selbst erstellst, musst du für jedes Bild, das du verwendest, ein Alt-Attribut einfügen. Füge das Alt-Attribut innerhalb des Bild-Tags ein und gib deinen Alt-Text ein.

Единый код, указанный таким образом:

Как добавить теги Alt к изображениям в WordPress

Опубликовано в SEO Эрин Майерс

Последнее обновление 6 июля 2022 г.

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

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

В этой статье мы немного подробнее поговорим о том, что такое замещающий текст, как он влияет на поисковую оптимизацию (SEO) и как добавить его к вашим изображениям. Давайте приступим!

1. Что такое замещающий текст изображения?

2. Как добавить замещающий текст к изображению в WordPress

3. Рекомендации по альтернативному тексту изображения

4. Решение ошибки «Атрибуты alt изображения отсутствуют» в Yoast SEO

4. 1. Узнайте больше с движком WP

Что такое замещающий текст изображения?

Альтернативный текст, альтернативный текст, альтернативное описание, альтернативные изображения или альтернативные теги относятся к одному и тому же. По сути, это удобочитаемое описание, которое вы добавляете к изображениям на своем веб-сайте на случай, если файл не загрузится. Например, возьмите это изображение с альтернативным текстом «Розарий», который вы можете проверить, если осмотрите элемент. Однако сам текст обычно не виден при просмотре веб-сайта, если что-то не пойдет не так. Есть две причины, почему замещающий текст важен:

Доступность: С описательным замещающим текстом посетители с нарушениями зрения все равно будут знать, что представляет каждое изображение с помощью программы чтения с экрана.
SEO: Альтернативные теги дают поисковым системам представление о том, что представляют ваши изображения, чтобы они могли лучше классифицировать ваш контент.

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

Кроме того, процесс добавления замещающего текста прост. Если вы используете простой HTML (или работаете с редактором кода WordPress), тег alt будет иметь следующий формат:

Тем не менее, все это еще более просто при использовании серверной части WordPress и Media Library , поскольку вам не нужно возиться с HTML, чтобы добавить теги alt.

Как добавить замещающий текст к изображению в WordPress

Всякий раз, когда вы загружаете изображение в WordPress, вы сможете редактировать его метаданные, что даст вам доступ к следующему меню.

С правой стороны находятся поля, которые вы хотите заполнить. Например, вы можете изменить название изображения, подпись, общее описание и замещающий текст.

Несмотря на то, что существует множество различных комбинаций замещающего текста, подходящей для этого изображения может быть фраза «Очень злая кошка». Просто введите точное описание в соответствующее поле, сохраните изменения, и все готово. Вы также можете вернуться и отредактировать альтернативный текст, когда это необходимо.

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

Что касается поля изображения Описание , оно содержит информацию, которая будет отображаться, если кто-то получит прямой доступ к URL-адресу изображения. Это не то же самое, что тег Alt Text , и в большинстве случаев вы можете не добавлять ничего в Описание поле.

Устранение ошибки «Атрибуты alt изображения отсутствуют» в Yoast SEO

Мы уже кратко упоминали плагин Yoast SEO в предыдущем разделе. Он предоставляет вам предложения и функции, которые вы можете использовать, чтобы убедиться, что SEO вашего сайта является первоклассным. Одна из метрик — напоминание о необходимости включения замещающего текста для ваших изображений.

Другими словами, когда Yoast обнаружит отсутствующий замещающий текст для нескольких изображений, он напомнит вам добавить их. Вы по-прежнему сможете опубликовать свой пост или страницу, но потеряете все преимущества, которые мы обсуждали до сих пор в тегах alt.

Если вы не добавили замещающий текст из медиатеки, вы можете сделать это в редакторе блоков WordPress. Просто выберите соответствующее изображение, и справа появится меню.

Здесь вы можете добавить или отредактировать замещающий текст вашего изображения аналогично Медиатеке . Это должно быть выполнено для каждого изображения, которое вы загружаете. Скоро это станет второй натурой, и вы больше никогда не забудете добавить замещающий текст.

Узнайте больше с помощью WP Engine

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

С WordPress вы получаете множество рекомендаций, которые помогут вам реализовать любую желаемую функциональность на вашем веб-сайте. Более того, с надежным и экономичным хостингом, таким как WP Engine, ваш сайт будет иметь оптимизированный и стабильный сервер, обеспечивающий максимально возможную производительность!

Пять золотых правил для соответствия замещающему тексту

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

Правило 1: Каждый должен иметь атрибут alt=
Правило 2: Описывайте информацию, а не изображение
Правило 3: Активные изображения требуют описательного замещающего текста.
Правило 4. Для изображений, содержащих информацию, требуется описательный замещающий текст.
Правило 5: Декоративные изображения должны иметь пустой замещающий текст.

Что такое «альтернативный текст»?

Замещающий текст — это текстовая альтернатива, определенная для изображений. Типичное изображение закодировано в HTML в следующей форме:

Возможно, вы никогда не увидите код страницы, когда редактируете свой веб-сайт или когда добавляете новый контент, вместо этого вы, вероятно, будете использовать CMS (систему управления контентом) какой-то. Что бы вы ни использовали для добавления контента на свой веб-сайт, когда вы добавляете изображение, вас должны попросить «замещающий текст» или альтернативный текст (он может называться немного по-другому, но вас должны попросить указать какое-то имя для изображение, скорее всего, это альтернативный текст).

Узнайте, как писать альтернативный текст со специальными возможностями в нашем учебном курсе «Специальные возможности для копирайтеров» .

Подробнее

Зачем нужен замещающий текст?

Не все пользователи могут видеть изображения. Посетители вашего сайта с ограниченными возможностями могут использовать вспомогательные технологии, такие как программы чтения с экрана или другое программное обеспечение для преобразования текста в речь, которое читает страницу вслух, и это программное обеспечение будет читать замещающий текст вместо изображения. Есть и другие ситуации, когда используется замещающий текст, например. если у пользователя отключены изображения (например, потому что он использует очень медленное интернет-соединение — иногда это все же случается!), то он увидит замещающий текст вместо изображения.

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

Итак, что вам нужно сделать?

Каждое изображение должно иметь атрибут alt:

Правило 1: каждое должен иметь атрибут alt=

Здесь нет исключений. Элемент должен всегда содержать атрибут alt=. Неважно, для чего используется изображение, что оно показывает и даже насколько оно маленькое.

Какой текст следует использовать для атрибута alt, зависит от типа изображения и поясняется ниже, но вы всегда должны включать либо alt=»» (пустой замещающий текст), либо alt=» описательный текст » (описательный замещающий текст) .

И еще одна ошибка, которую я несколько раз встречал на сайтах:

Правило 2: Описывайте информацию, а не картинку

Другими словами, вы почти никогда не описываете, как выглядит картинка, а объяснить информацию, содержащуюся на картинке.

Вот пример:

Альтернативный текст для этого изображения должен быть alt=»Twitter» или подобным (в зависимости от контекста и того, как изображение используется), но это не должно быть «синяя птица» или что-то подобное .

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

Типы изображений

Так каким же должен быть альтернативный текст? Ну, это зависит от изображения…

К счастью, есть только 3 основных типа изображений, которые вам нужно учитывать:

Тип 1 : «Активные» изображения, то есть изображения, выполняющие действие (ссылки, кнопки и т. д.). .)
Тип 2 : Изображения, содержащие информацию
Тип 3 : Изображения, предназначенные исключительно для украшения это из списка выше.

Хотите научиться создавать документы со специальными возможностями?
Изучите шаги, необходимые для того, чтобы сделать документы доступными, в том числе правильную реализацию альтернатив текста для графики в нашем учебном курсе.
Подробнее

Тип 1: активные образы
Что такое активный образ?
Проверить, является ли изображение активным, довольно просто: «Активное» изображение — это изображение, которое выполняет действие или имеет некоторые функции. Наиболее распространенным примером является изображение ссылки, т. е. когда изображение является единственным содержимым ссылки.
Примечание. Когда одна ссылка содержит изображение, а также текст, это не считается здесь активным изображением.
Как это реализовать?
Правило 3 гласит: Активные изображения требуют описательного замещающего текста.
Замещающий текст для активного изображения должен описывать действие, которое выполняет изображение. Итак, если у вас есть изображение ссылки, альтернативный текст должен сообщать пользователю, что делает ссылка. Если это ссылка на другую страницу, то это может быть название этой страницы, если ссылка выполняет действие на этой странице, назовите это действие (например, «развернуть», если она расширяет раздел, «отправить эту страницу по электронной почте», если это электронное письмо). ссылка и т.д.)
Тип 2: Изображения, содержащие информацию
Если изображение не является активным изображением (тип 1 выше), то необходимо проверить, содержит ли оно информацию или нет.
Иногда это просто, например. диаграмма или график будут содержать некоторую информацию, или изображение текста содержит информацию.
К сожалению, это не всегда просто. В некоторых случаях вам нужно будет использовать свое суждение, чтобы решить, содержит ли изображение информацию или нет.
Главный вопрос: не пропустит ли пользователь что-то, если вы удалите изображение?
Если пользователь пропустит какую-то информацию без изображения, то это изображение «типа 2».
Если изображение предназначено только для украшения или такая же информация уже есть где-то в тексте, то это декоративное изображение (Тип 3).
Как это реализовать?
Правило 4 гласит: Изображения, которые содержат информацию, требуют описательного замещающего текста.
Если изображение содержит информацию, то вам необходимо предложить эту информацию пользователю в альтернативном формате. Если пользователь не видит изображение, ему нужно получить информацию другим способом. Альтернативный текст должен быть кратким описанием информации.
Есть несколько особых случаев для изображений, содержащих информацию, на которую стоит обратить внимание:
Изображения текста
Старайтесь избегать использования изображений текста. В подавляющем большинстве случаев, когда я сталкиваюсь с изображениями текста, нет необходимости использовать изображения, вместо этого страница может просто использовать обычный текст с применением некоторого базового форматирования. Причина? Некоторые пользователи увеличивают размер текста, изображения не изменяются так же, как текст. При увеличении страницы изображения текста размываются, в отличие от обычного текста. Есть много других причин…
Если вам нужно использовать изображения текста, то почти во всех случаях замещающим текстом будет текст, показанный на изображении. В конце концов, это обычно информация, которую содержит изображение!
Диаграммы, графики и т. д.
Графики и диаграммы обычно содержат много информации, слишком много, чтобы включать ее в замещающий текст, поскольку замещающий текст должен быть очень кратким. Здесь будет отдельная статья, посвященная сложным изображениям.
Тип 3: изображения для украшения
Если изображение не является активным изображением (тип 1) и если оно не содержит информации (тип 2), то это декоративное изображение.
Изображения, предназначенные только для украшения, не должны иметь никакого (описательного) замещающего текста, вместо этого следует использовать пустую строку в качестве замещающего текста.
Как это реализовать?
Правило 5 гласит: Декоративные изображения должны иметь пустой замещающий текст.
Замещающий текст должен быть пустой (нулевой) строкой, т. е. alt=»». Код вашего изображения должен выглядеть так:

Даже если изображение предназначено для украшения, оно все равно должно иметь атрибут alt (помните правило 1!), но не должно содержать текста.
Если вы где-то читали, что некоторые изображения не должны иметь замещающий текст, это означает, что замещающий текст должен быть пустым. Повторюсь: никогда не определяйте без атрибута alt=!
Если атрибут alt не содержит текста (alt=»»), программам чтения с экрана следует игнорировать изображение.
Пользователям программ чтения с экрана не нужно знать о декоративных изображениях, это только усугубит «аудио помехи» на странице, поэтому, назначая изображению пустой замещающий текст, программе чтения с экрана предлагается игнорировать его.

Как заполнять Alt и Title картинок правильно: инструкция — Агентство REFORGE

Немного истории

Что такое атрибут alt и title

Title картинки

Alt для картинок

Почему их нужно прописывать

Как правильно заполнять

Советы по заполнению атрибута alt

Как придумать описание для картинки

Примеры из практики

Советы по заполнению атрибута Title для картинки

Как добавить Alt и Title

Заключение

Как правильно заполнять атрибуты ALT и TITLE для изображений?

В этой статье и видео я отвечу на следующие вопросы:

Важны ли атрибуты ALT и TITLE для нашего сайта? Как реагируют на них поисковики?

Рекомендации по поводу заполнения атрибутов ALT и TITLE

Автоматизация заполнения атрибутов с помощью плагинов — плюсы и минусы

Таблица сравнения плагинов для автоматического заполнения атрибутов ALT и TITLE

Рекомендуемые плагины для автоматизации заполнения атрибутов

Ложка дёгтя портит бочку мёда 🙁

Атрибуты alt и title картинок — как правильно заполнять для SEO

Что такое alt и title картинки

Правила заполнения title

Особенности атрибута alt

Краткие выводы

ALT и Title теги для изображений

Что такое атрибуты ALT (альт) и TITLE (тайтл)?

Зачем нужен мета тег альт (alt) для изображений?

Как не нужно прописывать alt

Атрибут alt и title для картинок — что это и как правильно прописать для SEO

Что такое атрибут alt для картинок

Зачем нужен title для картинок

Alt и title для изображений — в чем разница

Как правильно прописать alt для SEO

Как правильно прописать title для SEO

Можно ли автоматически прописать alt на WordPress

Роль оптимизации изображений в продвижении сайта

Заключение

Атрибут alt WordPress – что это и как его правильно заполнять

Что такое и как выглядит атрибут alt в коде изображения

Как прописать alt в классическом редакторе WordPress

Пишем альт в новом Gutenberge

Что писать и рекомендации по заполнению атрибута alt для тега img

Как автоматически проставить alt который имеет пустой атрибут

Доступность: лучшие практики альтернативного текста изображения

Siteimprove Tech Talk video: Демистификация доступных имен

Основные правила замещающего текста

Альтернативный текст для декоративных изображений

Изображение с текстом

Функциональные образы (связанное изображение)

Пример 1: Изображение, используемое отдельно в качестве связанного логотипа

Пример 2: Изображение в тексте ссылки

Дополнительные ресурсы

Создание пустого или нулевого атрибута Alt для декоративных изображений — рекомендации по доступному онлайн-дизайну

Создание плавающего размера изображения

Как добавить атрибуты замещающего текста к изображениям WordPress за 1 минуту

Альтернативные способы добавления тегов

Альтернативный метод № 1: в медиатеке WordPress

Альтернативный метод № 2: непосредственно на странице Код

Украсть мой процесс написания эффективных альтернативных тегов в WordPress

Проверка того, успешно ли вы добавили текст

Заключительные слова

Alt-Text zu Bildern hinzufügen | Mailchimp

Убер альтернативный текст

Альтернативный текст и ограничение доступа

Альтернативный текст и изображение

Советы по эффективности Alt-Text

Alt-Text zu Bildern hinzufügen

Убер Эйнен Bildblock

Über einen Текстовый блок

In Vorlagen mit benutzerdefiniertem Код

Как добавить теги Alt к изображениям в WordPress

Что такое замещающий текст изображения?

Как добавить замещающий текст к изображению в WordPress

Рекомендации по использованию замещающего текста изображения

Устранение ошибки «Атрибуты alt изображения отсутствуют» в Yoast SEO

Узнайте больше с помощью WP Engine

Пять золотых правил для соответствия замещающему тексту

Что такое «альтернативный текст»?