Изображения и медиафайлы (снимки, инфографика, схемы, рисунки) являются важными компонентами любого веб-сайта, и их значение только увеличивается. Однако для того чтобы поисковые системы (ПС) смогли распознать, что изображено на этих картинках, необходима небольшая помощь. Именно по этой причине крайне важно заполнить атрибуты alt и title для всех изображений на вашем сайте. Об этом также сообщит любой валидатор, который вы будете использовать для проверки своего интернет-ресурса.
Сегодня я расскажу, что такое alt, какую роль он играет и как правильно прописать его в WordPress. Также обсудим методы ручного и массового заполнения.
Атрибут alt (альтернативный текст) используется для описания изображения. Он играет ключевую роль в доступности, позволяя пользователям с нарушениями зрения понять, что изображено на картинке, через текстовые считыватели. Кроме того, поисковые системы используют этот текст для индексирования изображений, что может способствовать улучшению позиций в поисковой выдаче.
Правильный атрибут alt должен быть коротким и содержать ключевые слова, относящиеся к изображению. Например, вместо обобщенного «кот» лучше использовать «черный кот сидит на окне».
В WordPress вы можете добавить атрибут alt при загрузке изображения. Для этого просто введите текст в соответствующее поле в разделе «Медиа» при добавлении файла. Также у вас есть возможность изменять его позже, редактируя уже загруженные изображения.
Для массового заполнения атрибутов alt можно использовать плагины, такие как SEO Friendly Images или Media Library Assistant, которые позволяют автоматически генерировать альтернативные тексты на основе заголовков изображений или описаний.
Заполнение атрибутов alt является не только хорошей практикой, но и важным аспектом SEO-оптимизации, что помогает улучшить видимость вашего сайта в поисковых системах.
Что такое alt и его роль в SEO
Атрибут alt — это внесенная в изображение специальная информация, которая призвана, прежде всего, помочь поисковым системам, хотя не только им.
При стандартной загрузке он не виден пользователям на сайте, но включен в исходный код тега . Этот атрибут задает альтернативный текст, который будет показан на странице, если пользователь отключит загрузку изображений в своем браузере. По сути, alt должен предоставить краткое описание содержания картинки.
Заполненный атрибут alt необходим Google и Яндексу для определения содержания изображения и его соответствия теме страницы. Это позволяет улучшить ранжирование в поисковых системах и привлечь дополнительный трафик через поиск картинок.
В настоящее время поисковые системы уже могут определять, что изображено на фотографиях, какая цветовая палитра используется и многое другое. Вследствие этого значимость дескриптора alt несколько снизилась, однако его важность все еще подтверждается официальными источниками, такими как Яндекс.Справка.
Особое внимание следует уделить заполнению атрибута alt для сайтов, состоящих в основном из фотографий, картин, графиков, мемов, обоев для телефонов и другого медиа-контента.
Кроме того, правильное использование атрибута alt способствует улучшению доступности сайта для людей с ограниченными возможностями, которые используют экранные читалки. Альтернативный текст позволяет таким пользователям понять, что изображено на картинках и как это связано с содержанием страницы.
Рекомендуется также включать ключевые слова в атрибут alt, но делать это следует разумно, чтобы избежать наполнения текста ключами (keyword stuffing). Правильное описание должно быть естественным и логичным. Идеальной длиной для alt-текста считается от 5 до 15 слов.
В случае если изображение является чисто декоративным и не несет смысловой нагрузки, лучше использовать пустой атрибут alt (alt=»»). Это поможет поисковым системам понять, что такое изображение не требует внимания и не должно восприниматься как часть контента.
Как правильно заполнять alt и title: секреты оптимизации
Следующие рекомендации по заполнению трех атрибутов тега актуальны не только для ресурсов на платформе WordPress, но и для других онлайн-проектов:
- Alt, title и подпись к изображению должны содержать разные тексты.
- Язык атрибутов должен соответствовать языку сайта (с некоторыми исключениями).
- Каждый атрибут должен передавать смысл изображения. Частое нарушение этого правила может привести к фильтрации со стороны поисковых систем.
- Запрещено чрезмерное использование ключевых слов (их следует указывать умеренно и не для каждой картинки).
Оптимизация alt
Aльтернативный текст alt на сайте WordPress должен содержать чёткое описание изображения.
Вот несколько советов, которые помогут вам создавать идеальные атрибуты:
- Ключевые слова. SEO-специалисты часто заполняют этот атрибут словами-ключами, которые не удалось ввести непосредственно в текст.
Обязательно используйте ключевые слова в разнообразной форме, дополняя их так называемыми «хвостами» LSI (словами, относящимися к теме).
- Длина. Существует негласное правило по длине: лучше ограничить количество символов до 50 знаков вместе с пробелами.
- Уникальность в рамках страницы. Избегайте повторного использования одного и того же контента из title и подписей к изображениям, чтобы не попасть под фильтр «Переспам».
Также не забывайте заполнять атрибуты alt для миниатюр ваших постов, которые обычно отображаются в карточках на главной странице и в рубриках.
Правила для title
Как title отличается от alt? Часто начинающие веб-мастера путают эти два атрибута при создании своего первого сайта. Они помогают поисковым системам понять тематику и содержание графических элементов, но имеют свои отличия.
Title — это заголовок изображения, который не виден на страницах браузера, он присутствует только в коде и нужен исключительно роботам поисковых систем. Поэтому если на изображении изображён автомобиль, так и прописывайте в title.
В отличие от alt, который может отображаться на сайте, если изображение по какой-либо причине не загрузилось. Он более важен для SEO и подходит для разумного включения разбавленных ключей.
Подпись — это также значимый атрибут для SEO изображений. В качественных шаблонах WordPress, таких как Reboot, предусмотрен вывод таких описаний на страницах.
Используйте его, когда необходимо добавить более детальные пояснения к изображению, включая околотематические фразы, которые не поместились в alt.
Дополнительные советы по оптимизации
Для успешной оптимизации изображений стоит запомнить несколько дополнительных рекомендаций:
- Образец. Постарайтесь составлять описания на основе того, что непосредственно изображено на картинке, и старайтесь избегать общих фраз. Например, вместо «пейзаж» пишите «летний пейзаж с зелеными полями и голубым небом».
- Тестирование. Проверяйте, как ваши атрибуты отображаются на разных устройствах и в различных браузерах. Это поможет понять, корректно ли интерпретируются поисковыми системами ваши изображения.
- Постоянное обновление. Следите за новыми стандартами и рекомендациями SEO, так как они могут меняться. Регулярно обновляйте свои старые записи, добавляя новые атрибуты для изображений.
Помните, что правильное использование атрибутов alt и title не только улучшает видимость вашего контента в поисковых системах, но и положительно влияет на пользовательский опыт, помогая пользователям лучше понимать, что изображено на ваших картинках.
Как проставить alt у картинок в CMS WordPress
Пока атрибут alt еще существует и правила его корректного заполнения по-прежнему указаны в справках Яндекса и Google, стоит его использовать.
Если ваш ресурс работает на платформе WordPress, вы можете самостоятельно и вручную заполнять данный атрибут для каждой загруженной картинки, ориентируясь на свою семантику.
В классическом редакторе Tiny MCE
Вот пошаговая инструкция по заполнению alt для новичков:
- Щелкните на изображение в классическом редакторе CMS WP.
- Всплывающее меню предложит вам выбрать значок «Карандаш». При наведении увидите подсказку «Изменить». Кликните на него.
- Откроется окно с параметрами для выбранного изображения. Первое пустое поле вверху предназначено для альтернативного текста. Заполните его.
- Не забудьте нажать кнопку «Обновить» в правом нижнем углу, чтобы сохранить изменения.
Если вы редактируете уже опубликованный контент, обязательно обновите и саму запись или страницу.
Тот же элемент можно задать для изображения на этапе его загрузки в редактор, воспользовавшись кнопкой «Добавить медиафайл».
При этом окно настроек будет немного отличаться, но также предложит вам поле для ввода alt. После его заполнения достаточно просто нажать кнопку «Вставить в запись».
В блоковом редакторе Gutenberg
В редакторе Gutenberg, который разработан для WordPress, процесс ввода альт-текста был значительно упрощён и теперь состоит всего из трёх шагов.
- Добавьте фото или картинку с помощью блока «Изображение». Нажмите «Загрузить» или выберите «Библиотека файлов» (если хотите использовать ранее загруженное изображение).
- Кликните на изображение, затем в правой боковой панели введите или измените alt и другие атрибуты, которые предусмотрены в WordPress для медиафайлов.
Теперь просто обновите запись, и всё готово.
Как прописать альт автоматически: лучшие плагины
Иногда веб-разработчику может понадобиться массово установить атрибуты для всех изображений на сайте.
если вы ранее не обратили должного внимания на заполнение альт-текстов;
не проконтролировали работу контент-менеджера;
или приобрели сайт, где этот аспект был проигнорирован, а публикаций на вашем ресурсе великое множество.
Что в этом случае предпринять? Решение очевидно: автоматически заполнить alt для всех изображений, где он отсутствует. Хотя сам движок не предлагает такие функции, вы можете воспользоваться надежным плагином.
Clearfy Pro
Простой и безопасный плагин Clearfy Pro от WPShop давно стал популярным среди профессионалов в области веб-разработки. Этот инструмент стал жизненно важным для любого сайта на WordPress, будь то информационный портал, интернет-магазин, лендинг или агрегатор услуг и товаров.
Функция автоматического заполнения атрибутов alt для изображений в нём также доступна и работает безупречно:
- Зайдите в админку WordPress и в настройках плагина выберите вкладку SEO.
- Просто активируйте необходимый переключатель и нажмите на кнопку «Сохранить изменения» внизу.
Clearfy Pro предлагает более пятидесяти интуитивных настроек, которые помогут улучшить работу вашего сайта на WordPress. Он очищает код от ненужных элементов, эффективно сотрудничает с известными SEO-плагинами (Yoast SEO и Rank Math), оптимизирует HTML, защищает от кражи контента и многое другое.
Если вы еще не стали одним из поклонников этого замечательного инструмента, не забудьте использовать промокод на его покупку со скидкой и откройте для себя все его возможности.
Скидка на Clearfy WPShop
Update Image Tag Alt Attribute
Альтернативный бесплатный вариант — плагин Update Image Tag Alt Attribute.
К недостаткам можно отнести отсутствие русского языка и то, что, кроме добавления alt, он не выполняет других важных функций по настройке сайта, что делает его использование неэффективным.
Процесс работы с плагином:
- Установите и активируйте плагин в админ-панели из репозитория WordPress.
- Перейдите на вкладку «Update Images» в админ-панели и запустите индексацию всех изображений, нажав кнопку «Start Indexing».
- По завершении процесса здесь же появится информация о всех атрибутах ваших изображений. Эта возможность появилась относительно недавно и, пожалуй, стала основным «функционалом» этого плагина.
- Затем перейдите на вкладку «Automatic Updaters», где есть более подробные настройки, включая выбор типов контента для массового обновления полей alt (вкладка «Update Post Content») и правила для других атрибутов изображений (вкладка «Settings»). Установите нужные вам параметры.
- Чтобы автоматически заполнить alt-тексты для изображений, перейдите на вкладку «Update Media Images», где вы увидите прогресс-бар.
- По окончании процесса появится таблица с данными о том, для каких изображений какие alt-тексты были заданы. В моем примере столбцы с другими атрибутами пустые, так как их создание было отключено в настройках.
Как вы можете видеть, в WordPress достаточно легко массово задать атрибуты alt для всех ваших изображений, даже если их много и вручную это делать неохота. Используйте плагины, чтобы автоматизировать рутинные задачи, и освободите время для более важных дел.