Атрибут alt для картинок WordPress: как добавить вручную и автоматически

атрибут alt для картинок wordpress
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

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

Зачем нужно проставлять 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 для картинки WP

Тайтл проставляют через поле «Заголовок» в том же окне.

Как прописать alt и title изображений WordPress через редактор Tiny MCE

Добавление фотографий в классическом WordPress редакторе Tiny MCE происходит путем вызова диалогового окна библиотеки медиафайлов.

Как добавить Alt в визуальном редакторе

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

Как указать alt в редакторе Gutenberg

Блочный редактор Gutenberg предлагает три варианта вставки изображений на сайтах WordPress:

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

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

Alt добавить в Гутенберг

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

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

Добавить необходимый элемент тега IMG можно с помощью специальных плагинов.

Clearfy Pro: комплексное решение задач SEO-оптимизации

Комплексный СЕО-плагин Clearfy PRO

С помощью премиального плагина Clearfy Pro от WPShop можно решить множество задач по SEO, безопасности сайта, защите контента WordPress от кражи и пр.

Рекомендую ознакомиться с подробным обзором Clearfy Pro.

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

  1. Купить лицензию, установить и активировать Clearfy Pro.
  2. В админке WordPress зайти на страницу настроек плагина.

Расширение Clearfy Pro в настройках

  1. Перейти на вкладку «SEO» и передвинуть ползунок напротив пункта для автоматической вставки alt.

Включить alt для картинок

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

Скидка 15% на Clearfy Pro

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

Auto Image Attributes: массовое заполнение атрибутов тега IMG

Автоматическое заполнение альтов

Полное имя этого бесплатного плагина на офсайте WordPress — Auto Image Attributes From Filename With Bulk Updater. Он берет название файла и вставляет в поля заголовка, альтернативного текста, подписи и описания картинки.

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

Опции расширения

Auto Alt Text: добавление атрибута при загрузке в медиатеку

Auto Alt для WP

Особенность бесплатного WordPress плагина Auto Alt Text — автоматическая подстановка альтернативного текста при загрузке изображения. В настройках вы можете указать, какой контент должен использовать модуль для заполнения альтов.

Есть выбор из двух вариантов:

  • Добавление текста из заголовка материала.
  • Вставка контента, сгенерированного с помощью ИИ.

Alt Manager: динамическая вставка alt-атрибута картинок

Динамическая вставка Alt

Alt Manager — бесплатный модуль WordPress, который может массово заполнить или изменить alt-текст у всех картинок. Базовая версия работает только с материалами блога, а премиальная также обрабатывает карточки товаров интернет-магазина.

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

Image Alt Text: подстановка имени файла к картинкам с отсутствующим атрибутом альт

Быстрое добавление Alt к картинкам

Бесплатный плагин Image Alt Text предлагает несколько вариантов решения проблемы с незаполненным атрибутом альт на WordPress:

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

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

Какие требования к заполнению title для тега img

Поскольку элемент title служит для разъяснения смысла картинки, при его заполнении следует придерживаться правил:

Атрибут title должен кратко описывать то, что изображено на картинке. Не стоит туда писать ключевые слова, номер телефона, название компании и другую нерелевантную информацию.

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

Сколько символов должно быть в этом элементе? Четких критериев нет, но желательно, чтобы заголовок состоял из нескольких слов.

Рекомендую отнестись к заполнению атрибута alt у картинок со всей серьезностью. Это влияет на поисковое продвижение и удобство пользования сайтом WordPress. Лучше добавлять альтернативный текст вручную при вставке изображения, но допустимо также использовать автоматическую вставку.

Создай свой первый сайт на WordPress

Александр

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

Оцените автора
Добавить комментарий

×
Обнови свой WordPress!

Держи скидку 15% на премиум тему Reboot

Купить со скидкой ⋙