Как добавить замещающий текст к изображениям в WordPress (отдельным, групповым, изображениям продуктов и галерее)? –

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

Атрибут альтернативного текста в HTML

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

Итак, когда вы добавляете замещающий текст, WordPress вставит тег alt в исходный HTML-код. Некоторые конструкторы веб-сайтов, такие как Weebly, автоматически добавляют замещающий текст ко всем загруженным изображениям как «Изображение». Это неверно, поскольку все изображения на вашем сайте не могут иметь замещающий текст «Изображение». Кроме того, вы не сможете обнаружить проблемы с отсутствующим альтернативным текстом при проведении SEO-аудита вашего сайта. Чтобы избежать этих проблем, WordPress по умолчанию оставляет поле альтернативного текста пустым. Поэтому вам придется заполнять поле вручную для каждого изображения. Однако, если ваши изображения предназначены исключительно для декоративных целей и не связаны с содержанием статьи, оставьте альтернативный текст пустым.

1. Добавьте замещающий текст для нового изображения в медиатеке редактора Gutenberg.

• Создайте или отредактируйте публикацию в редакторе Гутенберга.
• Вставьте блок «Изображение» и нажмите «Медиабиблиотека».

Доступ к медиатеке из Гутенберга

• Перейдите на вкладку «Загрузить файлы» и нажмите кнопку «Выбрать файлы», чтобы просмотреть и загрузить изображение. Либо перейдите на вкладку «Медиатека», чтобы выбрать существующее изображение, ранее загруженное на ваш сайт.

Загрузите новое изображение

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

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

Вы можете использовать тот же метод, когда используете опции «Загрузить» или «Вставить из URL» в блоке «Изображение».

2. Добавьте замещающий текст для существующего изображения в Гутенберге.

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

Добавить замещающий текст в настройках блока изображения

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

Сбросить введенный альтернативный текст

3. Добавление замещающего текста в медиатеку (внешний редактор)

Также возможно добавить атрибут вне редактора Gutenberg.

• Находясь в панели администратора WordPress, перейдите в раздел «Медиа > Библиотека».
• Нажмите на изображение из списка или воспользуйтесь полем поиска, чтобы найти и открыть изображение.

Выберите изображение в медиатеке

• Во всплывающем окне «Сведения о вложении» введите альтернативный текст в поле «Альтернативный текст».
• Закройте всплывающее окно, и WordPress автоматически сохранит ваши изменения.

Добавить замещающий текст в сведениях о вложении

4. Добавление замещающего текста в классическом редакторе

Альтернативный текст, введенный в разделе «Медиа > Библиотека», будет отображаться при вставке изображения в Gutenberg или Classic Editor. Выполните следующие шаги, если вы хотите изменить или добавить замещающий текст непосредственно из классического редактора. Это вариант для пользовательских типов сообщений, таких как продукты WooCommerce, которые не используют редактор Gutenberg.

• Нажмите кнопку «Добавить медиа» при создании или редактировании сообщения.

Открыть медиатеку из классического редактора

• Выберите изображение и введите текст в поле «Замещающий текст» справа.

Параметр альтернативного текста в классическом редакторе

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

Редактировать изображение в классическом редакторе

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

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

5. Массовое редактирование альтернативного текста в WordPress

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

• Перейдите в раздел «Плагины > Добавить новый» в панели администратора WordPress.
• Найдите плагин «bulk at text» и «Image Alt Text». Установите и активируйте плагин на своем сайте.

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

• Перейдите в меню «Замещающий текст изображения», добавленное плагином, и перейдите на вкладку «Медиа без альтернативы».
• Нажмите кнопку «Массовый замещающий текст», чтобы автоматически добавить имя изображения в качестве замещающего текста для всех изображений в списке.

Массовое добавление замещающего текста в WordPress

• Если вы хотите добавить текст вручную, введите альтернативный текст для каждого изображения и нажмите кнопку «Добавить».
• После добавления замещающего текста изображения будут перемещены на вкладку «Медиа с альтернативным вариантом». Перейдите на эту вкладку, чтобы проверить текущий текст и при необходимости отредактировать его.

Массовое обновление альтернативного текста

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

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

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

Замещающий текст для изображений галереи

Вы можете использовать блок «Галерея» в редакторе Gutenberg или создавать галерею при вставке изображений в классическом редакторе.

Проверка альтернативного текста

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

• В Гутенберге — выберите изображение и щелкните значок «Параметры» на панели инструментов. Выберите в меню опцию «Редактировать как HTML» и убедитесь, что код имеет атрибут alt вместе с введенным вами текстом. Нажмите кнопку «Редактировать визуально», чтобы вернуться в визуальный режим.

Редактировать блок HTML

Просмотр атрибута Alt в исходном коде блока

• В классическом редакторе нажмите вкладку «Текст», чтобы переключить текстовый редактор. Найдите тег img для изображения, где вы должны увидеть атрибут alt, добавленный к вашему тексту.

Проверьте текстовый редактор