Как добавить ALT-тег к изображениям – Справочный центр Vigbo

ALT (альт) – это атрибут, позволяющий добавить текстовое описание содержимого картинки. ALT-теги  используются для двух целей: увеличение рейтинга страницы в поисковых системах в режиме поиска картинок и отображение текстового описания в случае, когда загрузка изображения невозможна или слишком медленна у пользователя.

Виджет Фотография

1. Добавьте виджет Фотография на страницу или наведите курсор мыши на уже добавленный ранее виджет.

2. Откройте настройки виджета Фотография, кликнув по значку шестеренки в верхнем правом углу виджета.

3. Укажите текст — описание изображения в поле ALT-текст для изображения и сохраните изменения.

Виджет Фотогалерея

1. Добавьте виджет Фотогалерея на составную страницу или выберите уже добавленный виджет.

2. Чтобы добавить ALT-теги к изображению в галерее, наведите курсор мышки на область фото и нажмите иконку, которая появится при наведении.

3. В открывшемся окне укажите текст — описание изображения в поле ALT-текст для изображения и сохраните изменения.

Добавление ALT-тегов доступно для галереи в виде ленты, грид, галереи с одним фото.

Alt-тег для изображений товаров

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

1. Перейдите к редактированию нужного товара в разделе Магазин > Товары. 

2. Откройте вкладку Фотографии и наведите курсор на область фото. Нажмите иконку карандаша, которая появится при наведении.

3. В открывшемся окне укажите текст — описание изображения в поле Альтернативный текст (тег alt) и сохраните изменения.

Правила заполнения alt-тегов

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

2. Длина текста не должна быть меньше 3–4 слов, но не более 250 символов с пробелами. Оптимальный вариант – 5-6 слов.

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

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

что это такое, что значит тег

Москва г. Москва, ул. Нобеля 7, п. 56 +7 (800) 700-59-30

Alt (Альт) – это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Название «alt» HTML-тег получил от слова alternative – альтернативный вариант текста.

Зачем заполнять атрибут alt

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

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

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

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

Правила правильного заполнения alt

Для достижения максимального результата от заполнения тегов alt нужно придерживаться следующих правил.

• Поисковые системы игнорируют длинные описания, поэтому регулируйте длину alt до 5–6 слов, но не превышайте 200–250 символов.
• Описание изображения должно четко соответствовать его содержимому. Например, бессмысленно вставлять фразу «домашний кот» для изображения с автомобилем.
• Для увеличения эффекта от оптимизации картинок рекомендуется использовать ключевые слова из тега h2 или заголовка статьи, но только в том случае, если они похожи по смыслу.
• Не используйте в тексте большое количество ключевых слов, не допускайте спама в описании.
• Не оптимизируйте атрибуты alt у изображений, которые относятся к фону вашего сайта, элементам меню. У них тег должен быть пустым или вовсе отсутствовать. Изображения для элементов дизайна по возможности можно выносить в CSS-спрайты.
• Не придумывайте дополнительные теги alt для похожих картинок из одного материала или товара. Например, у вас интернет-магазин курток, у каждой несколько фотографий. Это значит, что для всех вы пишете одно и то же название, только можете добавить цифры 1, 2, 3 для разграничения.

Правила заполнения тега ALT

Что такое атрибуты Alt и Title для картинок и как их правильно составлять

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

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).

Что такое атрибут Alt для картинок

Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:

Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.

Как правильно составить атрибут Alt для картинок

1. Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
2. Обязательное условие – использование ключевых запросов.
3. Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
4. Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
5. Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Атрибут Title для изображений

Кроме атрибута Alt следует также прописывать текст в атрибуте Title. Данный параметр задает вспомогательную информацию о картинке, когда пользователь наводит курсор на изображение:

В html-коде заполненный атрибут Title для картинок выглядит так:

Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.

Как правильно составлять Title для картинок

1. Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
2. Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
3. Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега <img>

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

Трудности при заполнении Alt и Title

1. Несколько фотографий одного и того же товара

   Как же быть интернет-магазинам, в которых для разнообразия и удобства пользователей представлено несколько изображений одного и того же товара? В этом случае, нормальное явление – составить одинаковый текст для Alt и Title ко всем картинкам.

2. Один и тот же товар, но разного цвета

   В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».

3. Большое количество товаров

   Крупные интернет-магазины могут столкнуться со следующей проблемой: на сайте слишком много товаров и изображений для них. Чтобы составить атрибуты Alt и Title для тысячи товаров вручную, потребуется очень много времени. Поэтому, в данном случае, можно автоматизировать вывод этих атрибутов из названия продукции и/или заголовка Н1, а также добавить цвет или артикул товара.

Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.

Атрибут ALT (HTML тега img )

Alt (альт) – это атрибут тега img, позволяющий внести текстовое описание содержимого картинки. В HTML этот тег используется для добавления альтернативного описания изображения. Отсюда и такое название (alt – сокращенно от alternative). Теги альт используются для двух целей:

• ранжирование в поиске по картинкам для получения дополнительного трафика;
• показ текстового описания в случае, когда загрузка изображения невозможна или слишком медленна.

Ранжирование по картинкам

Известный факт, что в поисковиках «Яндекс», Google и др. помимо органической, есть и другие виды выдачи. Одной из них и является выдача по картинкам.

Многие веб-мастеры пренебрегают данным разделом поиска и не стремятся к попаданию в топ. И это большая ошибка. Миллионы пользователей ежедневно ищут материалы среди изображений. Для ресурсов, находящихся в топе, это дополнительный источник трафика. Чтобы картинка попала на как можно более высокие позиции, у нее должен быть грамотно прописан тег alt. Именно на него смотрят поисковики при ранжировании данного раздела выдачи. Следовательно, к альтернативному описанию предъявляются следующие требования.

• Не должен превышать 200–250 символов с пробелами. Оптимальный вариант – 5-6 слов.
• Обязан быть релевантным запросу пользователя.
• Описание должно совпадать с содержимым самой картинки.
• В тег alt желательно вписать ключевое слово/фразу, которое содержится в заголовке страницы title или в названии статьи h2. Это увеличивает шансы на попадание в топ.
• Альт должен быть только у контентных картинок. У фона и элементов интерфейса данный атрибут должен оставаться пустым.

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

Альтернативное описание

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

Как заполняется

В HTML alt является лишь атрибутом, несмотря на то, что все его привыкли называть тегом. Тегом в данном случае является img и записывается он следующим образом:

[img alt=”текст”]

По умолчанию он пустой. Задача веб-мастера – добавить вместо «текст» альтернативное описание содержимого:

[a href=»/index.php»][img src=»images/home.png» alt=»Вернуться на главную страницу»][/a]

Так выглядит alt, когда изображение представлено в виде ссылки.

Как прописать тег ALT — советы и примеры

Тема сегодняшней статьи – SEO — оптимизация изображения с помощью атрибута ALT. Многие не знают, что при оптимизации данного атрибута вы повышаете вероятность посещения вашего сайта. Итак, более подробнее расскажу далее в статье:

Что такое атрибут ALT?

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

Так же, как и Title и Description он учитывается поисковой системой

До и после загрузки изображения в браузер

Синтаксис html описания картинки

</head>

<body>

<img src=”image.jpg” alt=”Описание картинки image” />

</body>

</html>

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

Читайте в нашем блоге: Как правильно составить ТЗ для дизайнера с точки зрения SEO

Как правильно прописывать описание картинки

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

Пустые атрибуты ALT и TITLE. Как правило, многие SEO оптимизаторы не заморачиваются по поводу этого тега. Да, возможно, если ваш сайт очень крупный имеет посещаемость 100000 в сутки заморачиваться не стоит, но если вы только раскручиваетесь и вам нужен первый трафик, то указать атрибуты все же стоит.

Не соответствие изображения и атрибутов.  Допустим если на вашей картинке отображена BMW X5, а в атрибуте прописываете Audi A3, то не ждите что человек перейдет по вашей картинке на сайт.

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

Так же поисковые системы могут наложить на вас санкции, поэтому не увлекайтесь.

А как же нужно прописывать теги для картинок?

Краткое и понятное описание картинки. Как можно точнее опишите изображение и если ALT был создан автоматически перепроверьте все страницы.

Длина атрибута ограничена. Поисковые системы учитывают 3-4 слова (около 250 символов) что затрудняет описание картинки.

Вхождение ключевых слов. Собственно, из-за чего атрибут ALT и стоит указывать. Пишите ключевое слово понятным для пользователя текстом.

Например:

alt=”Ремонт компьютеров в Чебоксарах”

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

Пример бренда Ситилинк, где указан один и тот же товар с одинаковым ALT

Как же разделять картинки одного и того же товара, если спамить нельзя и нужно прописывать все уникальное? Допустим “Сплит-система HYUNDAI H-AR6-07H” можно расписать так:

“Сплит-система HYUNDAI H-AR6-07H Вид 1”

“Сплит-система HYUNDAI H-AR6-07H Вид 2”

Пример как прописывает ALT у похожих товаров MediaMarkt

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

Размер изображения – чем больше разрешение картинки, тем лучше. В любом случае ее отображение можно подкорректировать благодаря атрибутам “width” и “height”. Но не стоит делать картинку слишком маленькой, в противном случае поисковые системы не будут учитывать изображение меньше 150 пикселей и будут считать ее за иконку.

Расположение изображения – как можно ближе к тексту, который содержит ключевые слова. Вот почему многие оптимизаторы учитывают этот фактор и стандартная схема расположения картинок выглядит так:

<h3> Текст заголовка с ключевым словом</h3>

<img alt=”Product 1”/>

<p>Дальнейшее описание</p>

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

Формат изображений. Рекомендую использовать проверенные временем и не запрещенные поисковыми системами – JPG, PNG, GIF.

Подпись под картинкой

Если на вашем сайте очень много картинок и почти нет текста, подпись картинкой будет полезна, поэтому именно с точки зрения SEO необходимо ее оптимизировать:

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

Например, у вас картинка динамиков Iphone 7.

В подписе укажите данный факт: “Звучание звука в Iphone 7 стало заметно лучше благодаря Lighting” Отношение Яндекса к атрибуту ALT

Яндекс открытым текстом говорит, что ALT важен.

Далее в хелпе Яндекса наткнулся на очень интересный ответ:

“Как поместить мою картинку на первое место?»

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

Дополнительные факторы картинки влияющие на SEO

Текст под картинкой несет гораздо большую пользу для поисковика, чем собственно сам ALT.

Ранжирование картинок в Google

Помимо вышеупомянутого ALT, вот что учитывает Google в ранжировании изображений.

Самые значимые факторы для Google

Давайте пробежимся по главным факторам для Google.

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

Отдельные страницы для каждой картинки – интересная мысль, но честно редко встречаю такие сайты. Проблематичным становится оптимизировать: интернет-магазины, одностраничные сайты, сайты каталоги, где хранится большое количество изображений.

А что по поводу атрибута Title

Google не упомянул, а Яндекс по минимуму атрибут Title. (Не путать с тегом <Title>). Указать лишним точно не будет, только можно по тому что Title при наведении на картинку отображается и несет в себе смысл. В этом плане, как и с текстом под картинкой можно экспериментировать, указывать полезную информацию: различные факты, преимущества и так далее.

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

Вот и все. Задавайте вопросы в комментариях, кто что думает по поводу атрибутов ALT, TITLE. Как вы оформляете изображения?

что это такое и как прописать в тексте

Alt – это текстовый атрибут, который есть у HTML-тега ‘img’, описывающего изображение. Идея примерно такая же, как у метатегов веб-страницы: атрибут коротко описывает, что изображено на картинке. По сути, это альтернативное текстовое содержание изображения, отсюда название alt – сокращение от alternative.

Атрибут был придуман во времена, когда высокоскоростной интернет еще не был доступен практически каждому и его назначение было практичным: рассказать пользователю, что находится на картинке, если она не загружается. Вместо изображения человек видел короткий текст – содержание атрибута Alt. Также прочитать этот текст можно было, наведя курсор на картинку (такую функцию до сих пор поддерживают некоторые блогосервисы).

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

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

Такие ситуации встречаются довольно редко, так что основное назначение Alt сейчас – поисковая оптимизация. Благодаря альтернативному описанию понять, что изображено на картинке, сможет не только человек с медленным интернет-соединением, но и поисковый робот. В Alt добавляют короткий текст, содержащий ключевые слова. В результате картинки индексируются, отображаются в поиске в разделе «Изображения», а значит, приносят сайту дополнительный трафик.

Прописывая атрибуты картинок, оптимизаторы придерживаются тех же правил, что и в случае с текстами. Наполнение страницы должно отвечать конкретному поисковому запросу. Это касается и изображений: они обязаны быть тематическими. На них что-то изображено, задача специалиста – сообщить поисковому роботу, что это такое: Alt должен быть информативным.

• Оптимальная длина – не больше 200–250 символов, 5–6 слов.
• Описание в точности соответствует картинке.
• Желательно включать ключевые слова из заголовков, но нужно избегать переспама и переоптимизации.
• Графическим элементам меню и страницы Alt не нужен, их лучше отделять в CSS-файлы.
• Для нескольких однотипных картинок вроде фотографий одного товара в разных ракурсах Alt желательно делать одинаковым, для уникализации описания можно пронумеровать.
  

Синонимы:

Что такое alt тег? — TemplateMonster

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

Alt тег (альтернативный текст) — это слово или фраза, которые могут быть вставлены как атрибут в документе HTML (язык гипертекстовой разметки), чтоб сообщить посетителям веб-сайта природу или содержимое изображения. Альт тег  появляется в пустом поле, которое обычно содержит изображение. Такие tags полезны, когда ссылка на изображение недоступна из-за разбитого или измененного URL-адреса или какой-либо другой проблемы.

Атрибут alt начинается с символьной последовательности alt =, а затем содержит текст alt в кавычках. Например, атрибут alt = «девочка и робот» может отображаться в теге изображений HTML для фотографии девочки с роботом.

В большинстве браузеров наведение указателя на изображение, содержащее атрибут alt, приведет к тому, что текст alt появится в маленьком поле под указателем.

Синтаксис

Пример

Как применять альт теги?

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

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

Значение альт тегов для SEO

СЕО очень важно для любого сайта, особенно для лендинг пейдж. Что такое alt тег для SEO? Это хорошее место для размещения релевантных ключевых слов для улучшения поисковой оптимизации вашего сайта (SEO). Однако, практика вставки большого количества ключевых слов в веб-контент — не оправдывает ожиданий. Согласно Google, такая практика не только неэтична, но и неэффективна. Поэтому сильно усердствовать, заполняя все альт теги ключевыми словами, не рекомендуется. Все должно быть в меру, чтоб поисковая система не расценивала это как спам.

Не можете найти ответ на вопрос?

Как оптимизировать замещающий текст и текст заголовка • Yoast

Йост де Валк — основатель и директор по продуктам Yoast. Он интернет-предприниматель, который незадолго до основания Yoast инвестировал и консультировал несколько стартапов. Его основная специализация — разработка программного обеспечения с открытым исходным кодом и цифровой маркетинг.

Добавление изображений к статьям побуждает людей читать их, и хорошо подобранные изображения также могут служить резервной копией вашего сообщения и обеспечить вам хороший рейтинг в результатах поиска изображений.Но вы всегда должны помнить о том, чтобы давать своим изображениям хорошие атрибуты alt : альтернативный текст усиливает сообщение ваших статей с помощью пауков поисковых систем и улучшает доступность вашего веб-сайта. В этой статье объясняется все об атрибутах alt и title, а также почему вы должны их оптимизировать.

Содержание

Есть ли у вас оранжевая отметка для ключевой фразы в атрибутах alt в Yoast SEO? Прочтите, как сделать эту пулю зеленой.

Что такое атрибуты alt и атрибуты заголовка?

Это полный тег изображения HTML:

Атрибуты alt и title изображения обычно называют тегом alt или тегом alt и заголовком. Но технически это не теги, это атрибуты. Альтернативный текст описывает, что изображено на изображении, и его функции на странице. Поэтому, если вы используете изображение в качестве кнопки для покупки продукта X, в замещающем тексте должно быть написано: «кнопка для покупки продукта X».

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

Каждое изображение должно иметь альтернативный текст. Не только для целей SEO, но и потому, что слепые и слабовидящие люди иначе не будут знать, о чем изображение. Атрибут title — , а не .Более того, в большинстве случаев добавлять его не имеет смысла. Они доступны только для пользователей мыши (или других указывающих устройств), и единственный случай, когда атрибут title равен , требуется для доступности, — это теги

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

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

Они являются частью HTML-кода в теге изображения и выглядят следующим образом:

.

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

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

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

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

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

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

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

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

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

Альтернативные теги должны быть абсолютно релевантными.

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

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

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

Но как на практике выглядит хорошо оптимизированный замещающий текст? Давайте напишем один для этого изображения двух котят:

Описательный, релевантный и уникальный тег alt может выглядеть так:

alt = "два милых рыжих котенка спят с клубками шерсти"

Это является описательным для поисковых систем и программ чтения с экрана, включая ключевые слова.

На некоторых платформах веб-сайтов уже настроены параметры альтернативного текста; вам просто нужно получить к ним доступ.

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

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

Также можно щелкнуть изображение из библиотеки мультимедиа, и здесь вы также увидите параметры.

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

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

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

Чтобы добавить замещающий текст к изображениям тем, зайдите в Интернет-магазин > Темы и щелкните, чтобы настроить тему вашего магазина.

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

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

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

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

Щелкните изображение, и вы можете редактировать замещающий текст.

Кредит изображения: 121 eCommerce

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

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

Отсюда вы увидите вариант «Что на изображении?» и здесь вы можете добавить свой альтернативный текст.

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

Скорее всего виноваты большие изображения, и это имеет смысл.

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

В этом руководстве вы можете узнать больше о том, как улучшить свой PageSpeed.

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

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

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

Вот 7 наиболее эффективных советов по расширенной оптимизации ссылок, которые вы можете использовать:

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

В качестве примера используется « jordan-air-1-mid-front.jpg лучше, чем IMG00353.JPG . «

Когда вы экспортируете изображения с камеры или смартфона (или даже делаете снимок экрана), им присваиваются общие имена файлов. Не загружайте изображение с именем файла, которое оно присвоило по умолчанию. Вместо этого дайте ему описательное имя, которое помогает придать контекст тому, что он показывает, и разделяйте слова тире, а не подчеркиванием.

Сделайте эту задачу частью вашего контрольного списка при загрузке изображений.

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

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

Например, основная камера iPhone X создает изображения размером 4032 x 3024 пикселей.

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

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

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

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

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

Один из самых простых способов уменьшить размер файла ваших изображений — это изменить их размер до максимальных размеров экрана, но это не единственный способ.

Фактически, это снова то, что Google рекомендует в своем руководстве по оптимизации изображений:

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

— Google

Как уменьшить размер файлов изображений?

Используя один из трех рекомендованных Google инструментов с открытым исходным кодом:

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

Или, если вы используете WordPress, попробуйте плагин Smush.

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

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

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


xmlns: image = "http: //www.google.com/schemas/sitemap-image/1.1 ">

http://example.com/sample.html

http://example.com/image.jpg


http: // example.com / photo.jpg




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

Как говорит Google, «карты сайта для изображений могут содержать URL-адреса из других доменов, в отличие от обычных карт сайта, которые обеспечивают междоменные ограничения. Это позволяет вам использовать CDN (сети доставки контента) для размещения изображений».

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

Чаще всего весь веб-сайт размещается на одном сервере.

Но давайте представим сценарий, когда веб-сайт размещен в США, но пользователь посещает его где-то в Европе.

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

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

Популярные CDN включают Cloudflare, Fastly, KeyCDN и Amazon CloudFront.

Вы можете легко настроить CDN на WordPress с помощью плагинов, таких как W3 Total Cache, или для получения дополнительных указаний вы найдете полезные руководства по интеграции от каждого поставщика, например, от Cloudflare.

Мы также рекомендуем вам ознакомиться с нашим руководством по обязательным методам SEO для CDN.

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

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

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

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

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

Если взглянуть, опять же, на то, что Google говорит по этому поводу, наряду с предоставлением ленивой загрузки в качестве рекомендации в PageSpeed ​​Insights:

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

— Google

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

Вы часто будете видеть, что Google PageSpeed ​​Insights рекомендует использовать кеширование браузера.

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

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

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

Подробнее о том, как Google рекомендует использовать кеширование, можно узнать здесь.

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

Google недавно объявил о том, что они собираются выпустить обновление Page Experience Update в какой-то момент в 2021 году.

Это обновление будет учитывать ряд существующих факторов ранжирования, включая штраф за безопасный просмотр, штраф за навязчивые межстраничные объявления, HTTPS как фактор ранжирования, обновление для мобильных устройств, обновление Page Speed ​​и Core Web Vitals.

Если вы пропустили объявление, это, по сути, означает, что, как определено в Search Engine Land: «При прочих равных условиях это обновление означает, что Google с большей вероятностью повысит рейтинг ваших страниц, если они обеспечат хорошее взаимодействие с пользователем.«

Но как это связано с оптимизацией изображений?

Во-первых, вы заметите, что Core Web Vitals является одним из факторов, которые будут приняты во внимание, и это включает LCP — самую крупную Contentful Paint. По сути, это показывает, насколько быстро выглядит страница; когда пользователь считает, что страница загружена.

LCP рассчитывается Google по времени отрисовки самого большого элемента контента на странице, и это часто изображения.

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

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

Теперь мы рассмотрели, как вы можете оптимизировать изображения вашего сайта, но как вы можете найти проблемы, которые уже существуют на вашем сайте?

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

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

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

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

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

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

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

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

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

ОБНОВЛЕНИЕ: С 5 августа 2020 года вы можете использовать все форматы изображений, поддерживаемые Google Image, включая BMP, GIF, JPEG, PNG, WebP и SVG, в структурированных данных.Узнайте больше здесь.

Доступность в Пенсильвании | Советы по тегу изображения ALT для HTML

Содержание страницы

Основные методы

Сложные изображения

Изображения как ссылки

Терминология

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

• ALT текст — концепция добавления удобного для чтения с экрана текста альтернативного описания изображения.Это может быть реализовано по-разному для разных типов документов.
• Атрибут ALT (HTML) — В HTML текст ALT вставляется в атрибут ALT в теге IMG.
• ALT «Тег» — Сокращенная ссылка на атрибут ALT.

Демонстрация ALT Text

Назначение

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

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

Руководство WCAG

Руководство WCAG 2.0 1.1.1. — «Весь нетекстовый контент, который предоставляется пользователю, имеет текстовую альтернативу, которая служит аналогичной цели».

Примеры кнопок изображения

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

Вывод программы чтения с экрана с тегом ALT

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

Вывод устройства чтения с экрана без тега ALT

Без текста ALT никто не может знать, каким было бы содержимое изображения.

Реализация атрибута ALT

Ниже приведены несколько примеров того, как текст ALT может быть реализован в зависимости от контекста.

Джордж Вашингтон Живопись

Посмотреть код

Реализуйте текст ALT как атрибут в теге IMG. См. Пример ниже.

Другие атрибуты, такие как HEIGHT и WIDTH, все еще могут быть включены.

Примечание: Рекомендуемая длина текста ALT составляет около 125 символов. Это вмещает текстовое поле ALT программы чтения с экрана JAWS.Однако это не соответствует рекомендациям WCAG.

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

Любая информация об изображении, такая как информация об авторских правах, источнике изображения или дополнительная информация, должна быть помещена в текст подписи под изображением, а не в тексте ALT. См. Пример ниже.


Подпись: Картина Джона Уорда Дансмора «Вашингтон и Лафайет в Вэлли-Фордж» 1907 года. Изображение любезно предоставлено Библиотекой Конгресса.

Логотипы

Для логотипов, особенно логотипов, которые повторяются, достаточно указать, какой это логотип, не обязательно полностью описывать его

alt =" Логотип лагеря 2011 "

Неправильное использование текста ALT

ALT-текст следует использовать ТОЛЬКО для описания изображения .

Следует использовать НЕ для:

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

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

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

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

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

Панель инструментов Rainbow

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

Код изображения доступной панели инструментов

alt = "" >
OR
alt = "" >

Программа чтения с экрана ничего не говорит и переходит к следующему разделу

Примечание. Атрибут ALT с пробелом считается менее правильным, но может быть единственной опцией, разрешенной в некоторых системах управления контентом.

Менее используемая панель инструментов Код изображения

alt = "Линия радуги, используемая в качестве панели инструментов" >

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

Нет тега ALT

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

Резюме замещающий текст

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

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

Пример текста с изображением

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

Доступная сводка ALT Tag

<... alt = "молекула насыщенного жира с 18 Cs">

Менее доступный, подробный тег ALT

<...alt = "Диаграмма показывает ряд Cs, соединенных горизонтальными линиями с H над каждым C, соединенным с вертикальными линиями. Справа третья H, а справа C соединена с O, затем H с одинарные линии, а также O с двумя линиями. ">

ПРИМЕЧАНИЕ: Этот вид описания был бы полезен, если бы он был необходим для понимания содержания, хотя лучшая стратегия может состоять в том, чтобы включить описание в саму веб-страницу или сделать ссылку на более подробное описание, как обсуждается в следующий раздел.Предположительно, любым студентам курса потребуется расширенное описание, чтобы понять структуру насыщенных жиров

  
 Подробное описание 
 
<подробности>
 Список 10 лучших штатов с числами 
На гистограмме выше показаны 10 штатов с наибольшим количеством жителей Пенсильвании, говорящих на немецком языке.Состояния от большинства до наименьшего числа ораторов:

 
 PA (51 760)
 
 ОН (28 705)
 
 IN (15 895)
 
 Висконсин (7205)
 
 Нью-Йорк (6 485)
 
 Миссури (4 085)
 
 Мичиган (3 370)
 
 Нью-Джерси (3020)
 
 Иллинойс (2315)
 
 MD (2 040)

 

 подробности {
    граница: 1px solid # 333;
    цвет: # 333;
    заполнение: 1em}

резюме {
font-weight: жирный;
    цвет: # 018;
    граница: 2px сплошная прозрачная;
    маржа: -1em;}

summary: focus, summary: hover {
    цвет: # 018;
    оформление текста: подчеркивание;
    цвет фона: #def;
    граница: 2px solid # 018
}