Руководства

Как написать эффектный альтернативный текст для изображений

28.12.2019
20459
0
67

Есть много факторов, которые влияют на ранжирование в поисковых системах. Еще один способ дать сигнал Google для влияния на ранжирование — это использование альтернативного текста в фоновых изображениях.

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

Подпишись на наш Телеграм и читай все статьи и новости первым

Как альтернативный текст может быть использован и добавлен к вашим изображениям?

Это зависит от вашей CMS, но, как правило, изображения будут иметь расширенный текстовый модуль, в котором вы сможете редактировать и оптимизировать изображения на вашем сайте. Если это не доступно, альтернативный текст может быть добавлен в HTML.

Чтобы добавить Alt-Text в исходный код HTML непосредственно в Chrome:

  1. Загрузите страницу из локальной файловой системы, в которой находится изображение, и откройте «Инструменты разработчика»  из меню «Инструменты» в ленте Chrome.
  2. Нажмите на вкладку «Source», чтобы выбрать файл JavaScript.
  3. В Chrome нажмите Ctrl + Shift + O, чтобы быстро найти «img src», а затем «alt=».
  4. Внутри этих маркеров вы можете ввести правильное форматирование, что можно увидеть в примерах ниже.
  5. Нажмите Ctrl + S / Command + S, чтобы сохранить изменения в коде. Новые изменения можно сохранить в исходном файле, щелкнув правой кнопкой мыши редактор и выбрав «Сохранить».
  6. В случае, если код введен неправильно, щелкните правой кнопкой мыши на редакторе и выберите «Локальные изменения», чтобы вернуться к предыдущему коду.

Пример формата:

<img src = «apparel.png» alt = «футболка с оригинальными принтами»>

Дополнительные советы по добавлению альтернативного текста

  • Реализуйте стратегию ключевых слов в свой альтернативный текст:
  • С учетом вышесказанного, не используйте ключевые слова и не усложняйте alt tag (например, лучшее поле для гольфа, лучший игрок в гольф);
  • Подумайте «что происходит на этом изображении» и сделайте это как можно более конкретным;
  • Если вы включаете альтернативный текст для кнопки CTA — укажите, что конкретно говорит эта кнопка (совершите покупку сейчас, изучите сейчас и т. д.). 

Вопросы, которые следует задать себе при добавлении альтернативного текста

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

  1. Это точно описывает то, что происходит на изображении?
  2. Точно ли это связано с вашими ключевыми словами?
  3. Это звучит нормально, когда читается вслух?

Если ответ на эти три вопроса положительный, вы движетесь в правильном направлении.

Простой альтернативный текст: <img src = «golfer.jpg» alt = «Тайгер Вудс»>

Хороший альтернативный текст:  <img src = «golfer.jpg» alt = «Тайгер Вудс играющий в гольф»>

Лучший альтернативный текст:  <img src = «golfer.jpg» alt = «Тайгер Вудс, размахивающий клюшкой Тейлормад m5»>

Почему Alt Text важен?

Alt Text — это SEO-практика, которая может привести к большим результатам. Согласно последним обновлениям, первая страница Google развивается и оставляет больше места для каруселей изображений, видео и PAA, что означает, что место на первой странице становится более конкурентоспособным. Приложив немного усилий, чтобы включить альтернативный текст, вы можете использовать ранжирование внутри SERPS. Это все сводится к доступности. Если ваши изображения недоступны для Google, то вы можете терять трафик, нацеливание на потребителей из-за отсутствия точных описаний изображений, повышение рейтинга кликов и, следовательно, снижение общего пользовательского опыта.

Как избежать путаницы в индексах

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

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

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

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

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

Давайте рассмотрим еще несколько примеров с сайта TaylorMade:

Простой альтернативный текст: <img src = «golf bag.jpg» alt = «сумка для гольфа»>

Хороший альтернативный текст:  <img src = «golf bag.jpg» alt = «синяя сумка для гольфа taylormade»>

Лучший альтернативный текст:  <img src = «golf bag.jpg» alt = «синяя сумка для гольфа flextech от taylormade»>

Простой альтернативный текст:  <img src = «golfer.png» alt = «Рикки Фаулер»>

Этот альтернативный текст хорош но есть несколько нюансов, потому что он не очень описательный. Да, это изображение Рики Фаулера. Но есть еще, что сказать об этом изображении.

Лучший альтернативный текст:   <img src = «golfer.png» alt = «Рикки Фаулер в перчатке для гольфа от taylormade с мячом для гольфа tp5x в оранжевом поло»>

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

Не рекомендуется:

<img src = «golfer.png» alt = «»>

или

<img src = «golfer.png» alt = «поле для гольфа pro golfer pro golfer us open профессиональный игрок в гольф лучший игрок в гольф лучший бренд гольфа»>

Это не лучшая практика.

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

Простой альтернативный текст: <img src = «golfer.jpg» alt = «Джон Рам»>

Хороший альтернативный текст:  <img src = «golfer.jpg» alt = «качающийся гольф-клуб Джона Рама»>

Лучший альтернативный текст: <img src = «golfer.jpg» alt = «Джон Рам, играющий в гольф-клубе Тейлормад на поле для гольфа»>

SEO — это долгосрочная стратегия

SEO — это долгосрочная стратегия роста. Реализация этих методов может повысить потенциал повышения рейтинга ключевых слов и повлиять на рейтинг страницы.  Если приложить больше усилий, вы убедитесь, что передовые практики SEO для изображений сайта могут привести к дополнительной узнаваемости бренда в постоянно меняющемся ландшафте SERP и поставить вас впереди ваших конкурентов.

Рекомендуем: 10 лучших способов оптимизации мобильных целевых страниц

Комментарии

наверх