Максимальное использование изображений на сайте WordPress: альтернативный текст, SEO и доступность

  1. Что такое альтернативный текст?
  2. Как я могу редактировать альтернативный текст?
  3. Что я должен написать как альтернативный текст
  4. Больше способов описать изображение
  5. Название изображения
  6. Подпись к изображению
  7. Описание изображения
  8. Альтернативный текст вынос

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

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

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

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

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

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

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

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

Alt text эффективно делает изображение видимым для поисковых систем и программ для чтения с экрана. Что, как вы вскоре выясните, часто очень хорошая вещь, если все сделано правильно.

Как я могу редактировать альтернативный текст?

Чтобы изображение, показанное ниже, появилось в этом сообщении, необходим код HTML:

<img src = ”https://www.calliaweb.co.uk/wp-content/uploads/2017/05/dog-walking-740 × 494.jpg” alt = ”выгула собак” />

jpg” alt = ”выгула собак” />

Здесь img src означает «источник изображения» и является местоположением файла изображения. Кроме того, хорошей практикой будет называть ваши файлы логически - вы заметите, что это включает в себя имя файла «dog -alking.jpg». Это связано с тем, что люди, программы чтения с экрана и поисковые системы могут читать и распознавать имя файла после его загрузки на ваш сайт.

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

Хорошая новость: вам не нужно знать какой-либо HTML-код для редактирования вашего изображения или текста. Когда вы загружаете изображение, вы можете редактировать альтернативный текст на экране сведений о вложении:

Когда вы загружаете изображение, вы можете редактировать альтернативный текст на экране сведений о вложении:

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

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

Что я должен написать как альтернативный текст

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

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

Возьмите, например, изображение ниже:

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

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

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

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

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

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

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

Больше способов описать изображение

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

• Заглавие
• Подпись
• Описание

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

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

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

Название изображения

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

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

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

Подпись к изображению

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

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

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

Описание изображения

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

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

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

Максимальное использование альтернативного текста - это быстрый и простой способ улучшить SEO и доступность. Чтобы обновить, вот некоторые ключевые выводы:

  • Alt text - это текстовое представление любого нетекстового содержимого сайта, включая изображения
  • Alt text - это текст, который отображается, если изображение повреждено, но он также распознается поисковыми системами и программами чтения с экрана.
  • Без альтернативного текста изображение фактически невидимо для программ чтения с экрана и поисковых систем.
  • После загрузки изображения на свой веб-сайт WordPress вы можете редактировать альтернативный текст на экране сведений о вложении.
  • Вы также можете редактировать заголовок и описание изображения, но альтернативный текст и подписи обычно более важны для SEO и доступности
  • Держите альтернативный текст коротким и соответствующим контексту страницы
  • Используйте ключевые слова в альтернативном тексте, когда это возможно, но только если они актуальны

Нужна помощь в оптимизации вашего сайта для пользователей и поисковых систем? Связаться !