Что такое alt и title для картинки

Атрибуты Alt и Title для картинок: искусство составления

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

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

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

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

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

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

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

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

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

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

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

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

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

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

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинкиЧто такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

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

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

Источник

Правильные атрибуты alt и title

Содержание:

Атрибуты alt и title в роли помощников по оптимизации

В одной из наших первых статей о внутренней оптимизации веб-сайтов мы вкратце рассказывали, насколько важными могут быть изображения для SEO продвижения. Если копнуть в этой теме немного глубже, первое, с чем придется столкнуться – это атрибуты alt и title.

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Что же из себя представляют атрибуты alt и title? Нужно ли их заполнять? Какова их роль в поисковой оптимизации? Продолжайте читать и Вы получите ответы на перечисленные и некоторые другие не менее важные вопросы.

Атрибут title. Необходимость и основные правила использования

Если честно, атрибут title является далеко не обязательным элементом SEO-оптимизации. Основная цель его использования – давать подсказки пользователям насчет содержимого просматриваемого изображения. При наведении курсора на картинку выводится содержимое атрибута title в белом прямоугольнике.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Важность и нюансы заполнения атрибута alt изображений

В отличие от атрибута title, по своей сути ориентированного на посетителей, заполненный атрибут alt у картинок более существенен для поискового продвижения.

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

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

Что касается посетителей сайтов, то они могут увидеть содержимое атрибута alt лишь в нескольких случаях:

В этом случае вместо опубликованных картинок пользователь будет наблюдать стандартную иконку изображения и прописанный в атрибуте alt текст. Отсюда и его название «alt» – сокращенное от «alternative».

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

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

Коротко подведем итоги

Атрибут title:

Заполненный атрибут alt изображений:

Все вышеперечисленные моменты однозначно являются положительными. И поэтому выводы по поводу необходимости заполнения атрибутов alt и title Вы вполне сможете сделать сами.

Благодарим за внимание. Ждем Ваших вопросов под этой статьей.

Источник

Атрибуты Alt и Title для картинок. Ответы на популярные вопросы

В сегодняшней статье я хочу рассмотреть, почему всё-таки стоит заполнять HTML-атрибут Alt у картинок, чем он отличается от атрибута Title. Материал рассчитан на новичков и начинающих веб-мастеров, которых интересует вопрос, зачем и почему нужно заполнять атрибут Alt. В конце статьи я подготовил ответы на популярные вопросы по этим атрибутам. Начнём с основ.

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

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

В HTML-коде атрибут прописывается следующим образом:

Рассмотрим на примере.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Для примера я взял фото с сайта обоев для рабочего стола. Основной контент страницы – изображения.

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?

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

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Есть несколько вариантов заполнения атрибута:

Вариант 1. В качестве альтернативного текста используем «Фото №1», «Картинка 1» и т. д. Такой альтернативный текст не несёт никакой пользы, так как не даёт информации об изображении. Более того, как пишет Яндекс: «Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам». Подробнее: «Индексирование картинок».

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

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

Вариант 4. Alt «Мячик для собак Humunga Chomp» – этот вариант оптимален для нас. Атрибут содержит название товара и его производителя. Если такого товара много, можно расширить Alt, используя цвет, название модели.

Вариант 5. Alt «Мячик для собак Humunga Chomp, игрушка Humunga Chomp, купить, недорого, Москва» – такой вариант может быть воспринят поисковой системой как спам и нужного результата не принесёт.

Из этих примеров следует, что атрибут Alt:

Зачем нужен атрибут Title?

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

На картинке выше видно, как отображается атрибут на странице.

В HTML-коде атрибут прописывается следующим образом:

Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке:

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

Основные требования к Title похожи на требования к Alt:

Зная это, перейдём к вопросам.

Ответы на популярные вопросы по Alt и Title

Alt это описания к изображениям?

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

Обязательно ли заполнять атрибуты Alt и Title для картинок?

Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.

Alt и Title должны быть разными или одинаковыми?

Существует два основных мнения по этому поводу:

1) Alt и Title должны быть уникальными;

2) атрибуты должны быть одинаковыми.

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

Яндекс по этому поводу пишет следующее:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Я считаю, что эти атрибуты могут быть одинаковыми. Главное, чтобы они давали чёткое структурированное описание вашей картинке.

Нужно ли прописывать возле атрибута Alt ещё и Title?

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

В Alt картинки надо ставить те же ключевые слова, что и у статьи, или другие?

Желательно. Главное, чтобы Alt был содержательным и описывал картинку.

Нужно ли прописывать в этих атрибутах ключевые слова?

Если эти ключевые слова будут описывать картинку, то да.

Как правильно писать атрибут Alt: кириллицей или латиницей?

Если ваш сайт на русском, заполняйте кириллицей.

Как писать – с большой или маленькой буквы?

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

Можно. Когда поисковики переиндексируют вашу страницу, они учтут эти описания.

Где заполнять Alt и Title?

Всё зависит от того, на какой CMS сделан ваш сайт.

Если это чистый HTML, то:

Обычно поля для заполнения Alt и Title находятся в параметрах изображения. Например, если ваш сайт сделан на WordPress, открыв параметры изображения, вы увидите поле для заполнения атрибута Alt. В дополнительных настройках есть поле для атрибута Title.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Если же ваш сайт на 1С-Битрикс, в дополнительных настройках параметров изображения есть поле для атрибута Alt. Атрибут Title будет подтягиваться из поля «Заголовок».

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Нужно понимать, что всё индивидуально. Многое зависит от того, на какой CMS сделан ваш сайт и как настроен.

Стоит ли и возможно ли прописывать Alt и Title для своих картинок в комментариях?

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

Когда к картинкам пишу тайтл и альт на русском, на сайте высвечиваются иероглифы, что делать?

Такое происходит из-за кодировки. Нужно преобразовать текущую кодировку в UTF-8.

Итоги

Ещё раз пробежимся по тому, какими же должны быть Alt и Title.

Основные требования к атрибуту Alt:

Почему стоит заполнять Alt:

1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;

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

Почему стоит заполнять Title:

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

Источник

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

Alt и Title – SEO-параметры фото, которые помогают в раскрутке страниц сайта. Далеко не все сеошники тратят время на такие нюансы, как оптимизация иллюстраций. Но именно от подобных мелочей и зависит успешная раскрутка веб-проекта. Обратив внимание на этот момент, вы обойдёте своих конкурентов. Тем более что сделать это совсем несложно.

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

Рекомендуем: Click.ru – маркетплейс рекламных платформ:

Что такое атрибуты Alt и Title в теге img и зачем нужны в SEO

Оптимизация иллюстраций подразумевает три этапа:

Сегодня мы остановимся именно на последнем этапе. Готовы увеличить посещаемость своего сайта за счёт правильного использования Alt и Title? Тогда читайте дальше!

Итак, Alt представляет собой альтернативный текст, благодаря которому поисковики распознают картинку. Эти данные помогают ботам безошибочно индексировать вашу иллюстрацию. Альт считается неотъемлемой частью картинок, отсутствие при валидации равносильно ошибке кода. По сравнению с Title Альт больше ориентирован на SEO. Описание фотографии улучшает релевантность страницы и позволяет привлечь дополнительную аудиторию из поисковой выдачи по картинкам.

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

В коде Alt виден так:

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

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

Как и в случае с Alt, Тайтл можно указать в настройках изображения или прописать в HTML-коде:

Вот как это выглядит в административной части сайта на «Вордпресс»:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Как использовать Альт и Тайтл у изображений

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Поиск по изображениям включает в себя оба варианта.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Alt и Title могут быть идентичными. Гораздо важнее – предельно чёткое, точное описание изображения.

Необходимо ли включать в атрибуты ключевики? Здесь также не существует единого мнения. Среди лидеров поисковой выдачи есть иллюстрации без ключевых слов в атрибутах. В инструкциях популярна рекомендация по добавлению главного ключа из H1. Но есть нюанс: если иллюстраций в посте десятки, и все они включают этот поисковый запрос, страница будет с переспамом. А значит, вас ждёт наложение санкций от Яндекса, Гугла и ухудшение позиций в серпе.

Менее рискованным решением является использование в атрибутах Тайтл и Альт разных низкочастотников.

Как лучше прописать Alt

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

Придерживайтесь этих правил:

Рассмотрим на примере, как лучше оптимизировать Alt. Допустим мы продвигаем сайт по автопрокату. В карточке товара для основного фото нужно задать Alt и Title. Если в качестве Альт использовать «image_123» и «Фото для сайта 345», то это не принесёт никакой пользы. Такой Alt не даст нужных сведений о картинке, значит, она не отобразится в поиске. По словам техподдержки Яндекса, в выдачу попадают лишь картинки с чётким описанием, которые могут быть найдены по конкретным запросам. Лучше вписать в Alt «Toyota на прокат в СПБ», можно даже кратко рассказать об особенностях авто.

Что написать в Тайтл

Требования напоминают советы по настройке Альт:

Снова вернёмся к примеру с автопрокатом. Нам следует указать следующий Title: «Серебристая Toyota Allex на прокат в СПБ: 5 пассажирских мест, расход топлива – 7,2 л на 100 км».

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

Способ добавления атрибутов зависит от движка сайта.

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

Чтобы сделать это, откройте файловую систему сайта на хостинге или через специальную программу по FTP. Найдите код иллюстрации ( тег

Это должно выглядеть так:

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

WordPress

Здесь всё проще. Если ваш сайт расположен на этом движке, перейдите в консоль (административную часть), а дальше в пункт «Медиафайлы». Затем зайдите в библиотеку и отыщите графику. После чего вам останется ввести данные.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Источник

Как заполнять атрибуты Alt и Title для изображений. Инструкция.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Alt у изображений – это один из атрибутов тега в html. Он передает текстовую информацию о картинке в случае, когда сама она не отображается на сайте. Например, у пользователя слабый сигнал интернета или отключено отображение картинок в браузере.

Не стоит его путать с названием файла.

Пример кода с заполненным атрибутом Alt:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

В стандартной ситуации мы видим изображения на сайте следующим образом:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Для атрибута Alt существует ряд требований. Он должен:

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

Что такое атрибут Title изображений

Title у изображений – это еще один атрибут тега в html. Он описывает изображение при наведении на него курсора.

Пример кода с заполненным атрибутом Title:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Ниже показано, как отображается атрибут Title при наведении курсора на изображение:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Требования, предъявляемые к атрибутам Title и Alt похожи. Атрибут Title должен:

Яндекс в разделе «Какие тексты использует робот для поиска изображений» советует вебмастерам указывать атрибут Title в ссылке, если картинка является таковой.

Пример показан ниже:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Какие ошибки необходимо избегать при заполнении атрибутов Alt и Title

Ниже приведены самые частые ошибки, которые совершают при заполнении атрибутов Alt и Title.

Несодержательные Alt и Title

При заполнении атрибутов не стоит использовать:

А вот формулировка «виноград белый б/к 300 г в стакане» дает достаточное количество подробностей и при наличии других товаров в разделе «Виноград» и будет легче уникализировать атрибуты для каждой картинки.

Слишком длинные атрибуты Alt и Title

Для атрибута Alt достаточно 3-5 слов. Для атрибута Title допустимо немного больше. Этого количества слов хватит, чтобы передать смысл изображения. А вот, например, длинный атрибут Title, переходящий на вторую строку воспринимается трудно:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Спам в атрибутах Alt и Title

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

Одинаковые атрибуты для похожих картинок

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

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

Влияют ли атрибуты Alt и Title на ранжирование

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

Ниже приведена информация, взятая из поисковых систем Яндекс и Google.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

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

Влияние на ранжированиеПоиск GoogleПоиск Google по картинкамПоиск ЯндексПоиск Яндекс по картинкам
даданетда
нетданетда

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

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

Как проверить Alt и Title на сайте

Проверить, что указано в атрибутах Alt и Title можно несколькими способами.

Для того, чтобы отключить отображение картинок в браузере, например в Chrome, нужно:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Букмарклет «Теги изображений» за один клик заменит все картинки на указанный для них атрибут Alt.

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Автоматические инструменты для проверки атрибутов

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

Screaming Frog SEO Spider – это программа,с помощью которой можно просто и быстро собрать весь список картинок и отдельно выгрузить те, чей атрибут Alt отсутствует или превышает заданное количество символов. Для этого обходим сайт, заходим на вкладку Images. Здесь будут представлены все изображения, чтобы их выгрузить нажимаем пункт в меню Bulk Export – All images. Чтобы посмотреть картинки, например, с незаполненным атрибутом Alt, выбераем пункт «Missing Alt Text».

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Картинки также можно выгрузить отдельным отчетом. Для этого выбираем в меню Bulk Export – Images – Images Missing Alt Text Inlinks (или другой пункт в зависимости от того, какой отчет хотим получить).

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

NetPeak Spider – краулер, который поможет собрать все изображения без атрибута Alt.

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Как заполнить атрибуты Alt и Title

Заполнить атрибуты Alt и Title можно через свою CMS. Обычно они указываются в окне загрузке или редактирования изображений.

Например, в CMS Bitrix окно выглядит следующим образом:

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

Что такое alt и title для картинки. Смотреть фото Что такое alt и title для картинки. Смотреть картинку Что такое alt и title для картинки. Картинка про Что такое alt и title для картинки. Фото Что такое alt и title для картинки

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

Как автоматизировать заполнение Alt для интернет-магазинов

Стоит автоматизировать все, что можно, чтобы не тратить время на рутинную работу.

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

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

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

Заключение

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

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *