Многие забывают заполнять атрибут alt для картинок WordPress. В статье рассмотрю, почему такую, казалось бы, ерунду не стоит игнорировать. А также расскажу, что делать, если на сайте WordPress накопилось много картинок с пустующим атрибутом альт.
- Зачем нужно проставлять ALT для картинок WordPress
- В чем отличие alt от title и других атрибутов
- Title: название фотографии
- Align, hspace, vspace: позиционирование картинки
- Src, width, height, border: путь и внешний вид
- Какие есть требования к заполнению alt
- Какие существуют способы проставления альт и тайтл в ВордПресс
- Как прописать alt и title изображений WordPress через редактор Tiny MCE
- Как указать alt в редакторе Gutenberg
- Какие есть методы автоматической простановки alt на WordPress
- Clearfy Pro: комплексное решение задач SEO-оптимизации
- Auto Image Attributes: массовое заполнение атрибутов тега IMG
- Auto Alt Text: добавление атрибута при загрузке в медиатеку
- Alt Manager: динамическая вставка alt-атрибута картинок
- Image Alt Text: подстановка имени файла к картинкам с отсутствующим атрибутом альт
- Какие требования к заполнению title для тега img
Зачем нужно проставлять ALT для картинок WordPress
ALT не является обязательным для html-тега img, который отвечает за отображение фотографий. Если его не добавить к тегу, то ничего плохого не произойдет. Картинка все равно будет отображаться.
Но лучше все-таки проставлять этот атрибут. Дело в том, что при пустом альт не успевшее подгрузиться фото выглядит как неинформативный элемент. Вместо изображения появляется стандартная иконка браузера в виде битой картинки. Смотрится это непривлекательно.
Допустим, у тега img есть заполненный alt. В этом случае, если изображение по каким-либо причинам не загрузится, посетитель страницы увидит содержимое этого элемента. Обычно в этот атрибут добавляют текст с описанием фото.
Проставление alt повышает удобство пользования сайтом WordPress и положительно влияет на поведенческие факторы.
Хорошие поведенческие, в свою очередь, дают сигнал поисковикам, что ресурс качественный, и его можно выдвигать на первые строчки в серпе. Вот почему поисковые системы обращают внимание на корректность заполнения поля «альт» для изображений.
Также по тексту из alt производится картиночная индексация поисковиками. Когда пользователи что-то ищут в сервисах Яндекс или Google картинок, они находят искомое по этому описанию. Теоретически они могут перейти на сайт по изображению, но фактически это происходит крайне редко.
В чем отличие alt от title и других атрибутов
Кроме alt, у тега IMG есть и другие атрибуты. Все они необязательные, картинки будут работать и без них. Расскажу, какую роль они играют, и чем отличаются от альта.
Title: название фотографии
Что такое тайтл (англ. title)? Это SEO-заголовок, который всплывает, если навести курсор на изображение. Он выручает, когда на фото изображено что-то не совсем понятное.
Поисковики используют контент из этого элемента только для определения смысла фотографии. Поэтому, в отличие от alt, title не играет столь важной роли для SEO-продвижения.
Align, hspace, vspace: позиционирование картинки
Align отвечает за выравнивание изображения в тексте, а остальные два атрибута — за горизонтальные и вертикальные отступы.
Правильный выбор позиции картинки улучшает восприятие контента. Косвенно это может влиять на поведенческие факторы, а, следовательно, и на ранжирование сайта WordPress в поисковиках.
Src, width, height, border: путь и внешний вид
Через src мы задаем путь, где лежит картинка на сервере. width и height — это ширина и высота, а border — рамка вокруг изображения.
Src — единственный обязательный атрибут тега img. В отношении остальных элементов можно сказать то же, что и для предыдущей группы. Они улучшают поведенческие факторы и, тем самым, оказывают опосредованное влияние на SEO.
Такие элементы тега img, как align, hspace, vspace, width, height и border, в большинстве случаев можно и нужно заменять свойствами css. Иногда их целесообразно использовать инлайн, например, когда нужно определить динамически через JS-скрипт.
Остальные элементы тега img, такие как ismap, longdesc, lowsrc, usemap, используются редко, и они не оказывают ощутимого влияния на SEO.
Какие есть требования к заполнению alt
Лучшая практика — заполнять alt вручную для каждого изображения. Текст для этого атрибута должен содержать ключевую фразу, но при этом не должен совпадать с мета-тегами title и description.
Перечислю остальные правила заполнения:
- Количество символов не должно превышать 250. Желательно уместить описание в одно небольшое предложение.
- Описание изображения не должно быть переспамлено ключевыми словами.
- Текст должен соответствовать тому, что изображено на картинке.
На многих сайтах заполнение элемента вручную для каждой картинки — неподъемный труд. Например, когда ежедневно приходится грузить в каталог интернет-магазина сотни или тысячи товаров. Что писать в alt-атрибуте? В этом случае можно заполнять его автоматически. Как правило, при массовой вставке в него дублируется содержимое тега H1 с дополнительными параметрами.
Какие существуют способы проставления альт и тайтл в ВордПресс
CMS WordPress по умолчанию содержит инструменты для добавления атрибутов альт и тайтл. Вы можете вручную вводить текст в соответствующие поля при загрузке каждой отдельной картинки через библиотеку медиафайлов. Для этого достаточно заполнить поле «Атрибут alt» в свойствах картинки.
Тайтл проставляют через поле «Заголовок» в том же окне.
Как прописать alt и title изображений WordPress через редактор Tiny MCE
Добавление фотографий в классическом WordPress редакторе Tiny MCE происходит путем вызова диалогового окна библиотеки медиафайлов.
При этом следует заполнять alt и title способом, указанным выше.
Как указать alt в редакторе Gutenberg
Блочный редактор Gutenberg предлагает три варианта вставки изображений на сайтах WordPress:
Через библиотеку медиафайлов. Вы можете добавить фотографию стандартным способом и указать alt в соответствующем поле.
Путем прямой загрузки. В этом случае атрибут можно добавить через поле «Альтернативный текст», которое находится в настройках блока.
Указав ссылку на изображение. WordPress загрузит картинку из внешнего источника, после чего вы сможете установить для нее альт в настройках блока.
Какие есть методы автоматической простановки alt на WordPress
Добавить необходимый элемент тега IMG можно с помощью специальных плагинов.
Clearfy Pro: комплексное решение задач SEO-оптимизации
С помощью премиального плагина Clearfy Pro от WPShop можно решить множество задач по SEO, безопасности сайта, защите контента WordPress от кражи и пр.
Рекомендую ознакомиться с подробным обзором Clearfy Pro.
Автоматическое добавление alt — одна из его полезных опций. Чтобы указать этот атрибут у всех картинок сразу, нужно сделать следующее:
- Купить лицензию, установить и активировать Clearfy Pro.
- В админке WordPress зайти на страницу настроек плагина.
- Перейти на вкладку «SEO» и передвинуть ползунок напротив пункта для автоматической вставки alt.
Плагин добавляет альты только к картинкам с пустым атрибутом. В качестве текста для заполнения используется название материала.
Скидка 15% на Clearfy Pro
Данную опцию стоит включать, если вы вставляете в посты не больше 1-2 картинок. Если вы обычно добавляете в контент много фотографий, лучше заполнять alt вручную. Иначе у всех изображений внутри одного поста будут одинаковые описания.
Auto Image Attributes: массовое заполнение атрибутов тега IMG
Полное имя этого бесплатного плагина на офсайте WordPress — Auto Image Attributes From Filename With Bulk Updater. Он берет название файла и вставляет в поля заголовка, альтернативного текста, подписи и описания картинки.
Чтобы заполнить эти поля для всех изображений, нужно запустить массовую обработку в настройках плагина. Там же вы можете выбрать, какие поля нужно заполнять, а какие — нет.
Auto Alt Text: добавление атрибута при загрузке в медиатеку
Особенность бесплатного WordPress плагина Auto Alt Text — автоматическая подстановка альтернативного текста при загрузке изображения. В настройках вы можете указать, какой контент должен использовать модуль для заполнения альтов.
Есть выбор из двух вариантов:
- Добавление текста из заголовка материала.
- Вставка контента, сгенерированного с помощью ИИ.
Alt Manager: динамическая вставка alt-атрибута картинок
В качестве контента для заполнения плагин может брать как данные из поста, так и название медиафайла.
Image Alt Text: подстановка имени файла к картинкам с отсутствующим атрибутом альт
Бесплатный плагин Image Alt Text предлагает несколько вариантов решения проблемы с незаполненным атрибутом альт на WordPress:
- Для всех таких картинок в поле альтернативного текста вставить название файла.
- Ко всем изображениям с пустующим атрибутом alt подставить готовый шаблон текста, указанный в настройках.
- Вручную заполнить поле альтернативного текста для всех медиафайлов, у которых он отсутствует, через удобную таблицу.
После выбора подходящего варианта вы можете массово внести изменения, нажав на соответствующую кнопку.
Какие требования к заполнению title для тега img
Поскольку элемент title служит для разъяснения смысла картинки, при его заполнении следует придерживаться правил:
Атрибут title должен кратко описывать то, что изображено на картинке. Не стоит туда писать ключевые слова, номер телефона, название компании и другую нерелевантную информацию.
Он должен отличаться от alt. При автоматическом способе заполнения тайтл и альт могут совпадать. Но лучше использовать для них разный текст.
Сколько символов должно быть в этом элементе? Четких критериев нет, но желательно, чтобы заголовок состоял из нескольких слов.
Рекомендую отнестись к заполнению атрибута alt у картинок со всей серьезностью. Это влияет на поисковое продвижение и удобство пользования сайтом WordPress. Лучше добавлять альтернативный текст вручную при вставке изображения, но допустимо также использовать автоматическую вставку.
