Alt, title и description

Время чтения: 2 мин. 2867 просмотров

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

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

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

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

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

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

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

описывать изображение точно, не в общих словах
содержать от 30 до 150 знаков, оптимальное количество 50-60 знаков
включать в себя объект изображения
не содержать спам

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

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

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

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

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

описывать изображение максимально содержательно
содержать от 50 до 250 знаков, оптимальное количество 150 знаков, описание не должно быть слишком длинным, иначе пользователю будет некомфортно воспринимать текст
включать упоминание содержимого объекта
не содержать спам
отличаться от Alt, чтобы избежать дублирования (спама)

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

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

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

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

Общие названия, не относящиеся напрямую к тому, что изображено на картинке. Например, «фото 1», «картинка 2» не подходят. Это имеет такой же эффект, что и пустой атрибут.

Общие слова, которые, с одной стороны, подходят по тематике, а с другой все равно не содержат конкретики. Для нашей картинки с виноградом неудачным вариантом будет «кукла», «teddy bear».

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

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

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

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

Слишком длинные описания, как правило, содержат в себе еще и спам. Избегать переспама необходимо не только в мета-тегах, H1 и тексте на сайте, но и в описании изображений.
Не стоит засорять атрибуты такими фразами, как «Кукла интерьерная Анна фарфор ручная работа купить в магазине Дивный Мир, цена 1000, недорого, заказать, быстрая доставка».
С большой вероятностью это будет негативно принято поисковыми системами и могут быть наложены санкции в виде пессимизации позиций.

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

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

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

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

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

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

Яндекс:

Google:

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

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

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

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

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

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

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

зайти в Настройки – Настройки сайтов – Картинки

отключить пункт “Показать все”

обновить страницу

Проверить атрибуты Alt и Title можно через код. Нужно:

нажать сочетание клавиш Ctrl + Shift + C

щелкнуть на на изображение

проверить код на наличие атрибутов

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

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

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

Description — это короткий и емкий анонс содержания страницы. Он показывает поисковым системам и пользователям, какой контент ждет их на странице. Часто поисковые системы используют метатег description как краткое описание (сниппет) — которое видно в результатах выдачи.

Работа с метатегом description помогает увеличить видимость магазина и его кликабельность в поисковой выдаче — а значит, помогает увеличивать трафик, который приходит в магазин из поисковых систем.

Как заполнить метатег description

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

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

Видимый размер description в сниппете различается в зависимости от поисковой системы. Стандартная длина description для Google — 150–160 символов. Для «Яндекса» — 160–170 символов. В Google сниппет менее предсказуемый: он чаще, чем «Яндекс», использует для сниппета просто фрагменты текста страницы.

Общий объем description может доходить до 250–300 символов. Некоторое время назад «Яндекс» дал своим пользователям возможность увидеть сниппет (очень часто это именно description) полностью. Это значит, что теперь каждый человек может узнать больше о вашем сайте, даже не переходя на него. Таким образом растет значимость мета-тега description.

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

Примеры description: хорошо и плохо

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

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

Плохо:

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

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

«Картины для интерьера нужны всем. Относитесь серьезно к выбору картин для интерьера, заходите в наш магазин Картины Люкс».

Хорошо:

«Мебель для кукольных домиков в магазине “Дом Кулол”. 18 модульных комплектов, 135 предметов, свободная комплектация. Бесплатная доставка по всему миру».

«Женские полуверы LUX в интернет-магазине “LUXME”. 44 модели, размеры 40-52, натуральная пряжа, стильный дизайн. Скидка 20% до 1 октября. Вяжем под заказ. Бесплатная доставка».

«Магазин детских развивающих игрушек “Домик” ждет мамочек и их малышей. Развивающие книжки и игрушки, азбука, мягкие книжки, сказки, басни, развивающие коврики. Доставка в любую точку мира».

7 советов, как сделать правильный метатег description

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

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

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

Интегрируйте в текст преимущества товара и услуги. Используйте неагрессивные мотивирующие приемы. Не «Спешите! Только сегодня!», а «Распродажа уже началась». Не «Только у нас и только для вас!», а «Собрали 145 моделей спортивных костюмов для женщин».

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

Добавляйте динамические показатели: «На складе 86 наборов посуды», «До повышения цен осталось 3 дня». Это мягкий способ указать на дедлайн и мотивировать пользователя к переходу на сайт.

Попробуйте использовать в description эмодзи. Точных данных нет, но есть гипотеза, что 1–2 эмодзи в сниппете хорошо «цепляют» взгляд пользователя — значит, кликов по такому сниппету может быть больше. Ориентируйтесь на свою тематику и ключевые слова.

Где найти мои ключевые слова.

Ключевые слова— это совокупность слов, по которым пользователи ищут нужную информацию в интернете. Например, если человек захочет найти подарок, то он пропишет запрос состоящий из ключевых слов: «купить подарок для….(кого-то)».

С чего начать?

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

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

Кстати, вы можете установить расширение для браузера «Yandex Wordstat Assistant», которое позволит значительно ускорить ручной сбор слов из Яндекс Wordstat. С его помощью вы сможете одним кликом выбрать все ключевые слова на странице и копировать их в буфер обмена.

Keyword Tool

Бесплатная версия Keyword Tool генерирует до 750 + ключевых слов для каждого поискового запроса. Собирает поисковые подсказки, частотность и может анализировать домены конкурентов.

Из фишек — кроме Google, сервис собирает фразы из Bing, eBay, AppStore, Amazon и YouTube.

Google Trends

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

Из интересного в Google Trends:

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

Заключение

Сигнал ранжирования

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

Результаты поисковой системы

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

Социальные сети и веб-браузеры

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

Пишите для людей

Да, мы только что посоветовали вам добавить ключевые слова в заголовок, чтобы угодить поисковым системам. Но не забывайте о своей самой важной аудитории – посетителях. Как и в случае с соотношением молока и хлопьев, вам необходимо найти правильный баланс при вставке ключевых слов. Я не уверена, насколько хорошо это выглядело бы, если бы вы написали «Куклы авторские | Интерьерные авторские куклы | Авторские куклы на заказ».
Перегрузка тегов заголовков ключевыми словами отпугнет людей от перехода на вашу страницу. Если у вас есть дополнительные ключевые слова, которые вы хотели бы использовать, то мета-описание — лучшее место для их добавления.

Проверьте длину заголовка

Google и компания предоставляют вам ограниченное пространство для отображения вашего заголовка. Хотя ограничение заголовка мы не устанавливаем, но мы рекомендуем вам оставить мета-заголовок в пределах 55–60 символов, включая пробелы. Один из способов уменьшить длину заголовка — удалить все «стоп-слова», такие как «the», «to», «in» и т. д. Помните, что важен каждый символ. Воспользуйтесь такими инструментами, как SEOmofo , чтобы проверить, является ли ваш заголовок оптимальной длины.

Пишите уникальные заголовки

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

Сделайте это привлекательным

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