Title img – Img — Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background) — Вебджем.рф

Содержание

Что такое теги alt и title. SEO картинки — как оптимизировать изображение

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

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

Подпишись на рассылку и получи книгу в подарок!

SEO атрибуты изображений – alt и title

Иллюстрации, фотографии, схемы и прочие графические изображения помогают «разбавить» сухой текст и сделать контент более наглядным. Однако графика предназначена не только для того, чтобы ею любовался пользователь. Изображения можно задействовать в качестве одного из элементов поискового продвижения. Для этой цели предназначены специальные теги alt и title, которые применяются в качестве атрибутов для основного тега <img>.

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

Атрибут title – это описание, составляемое для посетителя. Пользователь увидит его, если на некоторое время задержит курсор мыши на картинке. Как правило, для заполнения этого тега используют развернутое описание из 1-2 предложений.

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Пример кода изображения с хорошей оптимизацией

<img src="../img/dom_u_morja.jpg" width="300" height="195" title="домик у моря" alt="аккуратный домик у моря с окнами на побережье">

Зачем нужны вспомогательные атрибуты тега img
Разумеется, графическое изображение корректно загрузится даже в том случае, если у тега <img> отсутствуют атрибуты title и alt. Но в этом случае возможности SEO картинки останутся незадействованными. Затратив немного времени на составление альтернативного описания, вебмастер сможет:
передать необходимые сведения поисковому роботу;
получить дополнительных посетителей на сайт;
повысить лояльность читателей.
Поисковики умеют распознавать уникальность графических изображений, но они не способны анализировать их тематическую принадлежность. Поэтому если вебмастер желает, чтобы робот отнес картинку к той или иной категории, то он должен составить текстовое описание для тега alt.

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

Как использовать alt в SEO продвижении
Чтобы привлечь дополнительных посетителей по продвигаемым запросам, вебмастер должен составить для alt и title описания с вхождением ключевых фраз. Текст, предназначенный для тега alt, может выглядеть следующим образом: «прилагательное + ключевая фраза». Для атрибута title рекомендовано использовать расширенное описание «прилагательное + ключ + дополнение».
К примеру, есть ключ «недвижимость Москвы». Для данной фразы можно составить описание alt «элитная недвижимость Москвы», а также title «элитная недвижимость Москвы в Центральном административном округе». В качестве ключа для оптимизированного описания изображения наиболее подходят фразы, в которых присутствуют слова «фото», «иллюстрации» и т.п.

Что такое атрибуты Alt и Title для картинок и как их правильно составлять
Сейчас трудно представить сайты без изображений, тем более интернет-магазины и каталоги товаров. Ведь это отличный способ привлечь внимание посетителей, показать товар «лицом» и сподвигнуть потенциальных клиентов к совершению целевых действий: покупке товара или заказу услуги. Подробнее о том, для чего еще нужны картинки и на каких страницах они должны быть, можете прочитать в нашей статье «Подбор и оптимизация изображений для сайта».
Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).
Что такое атрибут Alt для картинок
Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

Давайте сравним. Так будет выглядеть незагруженное изображение без заполненного атрибута Alt:
А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:
Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.

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

Обязательное условие – использование ключевых запросов.

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

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

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

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

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

Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.

Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

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

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

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

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

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

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

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

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

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

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

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Что такое альт-теги?
Альт-теги — это текстовое описание содержимого графического изображения на странице, позволяющего получить более полную информацию о нём и улучшить навигацию на сайте. Для тех пользователей, которые выключают графические изображения в браузере, удобно будет по тегу alt определить, что должно было быть на картинке. А title содержит в себе подсказку для изображения, всплывающую при наведении курсора.

Все мы уже знаем, как важно разбивать текст на блоки, добавлять картинки, визуально делающие текст привлекательным и более лёгким для восприятия. Если представить SEO как скачки на ипподроме, то к финишу первой всегда придёт лошадь, которая выложилась на полную. Где надо ускорилась или прошла по внутреннему кругу, да и жокей был максимально лёгким в облегающем костюме. Так и здесь — нужно выжать из продвижения по максимуму. Поисковый робот, который пробежит по вашей странице и увидит оптимизированное изображение, прекрасно поймёт, что там изображено, когда прочтёт тег alt. Он внесёт эту информацию в индекс, и вы получите SEO-плюс для своей странички и преимущества в выдаче.

Атрибут alt (alternative text) — это атрибут тега <img>, позволяющий поисковому роботу «увидеть» изображение и проиндексировать его. По сути, краткое описание того, что изображено на картинке
Атрибут title — это атрибут <img>, выполняющий роль заголовка для изображения. Он формирует всплывающие подсказки для картинки.

Так выглядят теги альт и тайтл в коде страницы:
<img itemprop=»image»/upload/iblock/61f/pg_600g_pervyy_prikorm.jpg» alt=»Фото Pedigree — сухой корм первый прикорм с курицей и рисом педигри для щенков всех пород от 3 недель» title=»купить pedigree первый прикорм с курицей и рисом для щенков с 3 недель» data-giftd-block-id-product=»11″>

Правила написания текста в атрибутах alt и title
Описание должно полностью соответствовать содержимому картинки.
Должны содержать ключевое слово.
На одной и той же странице должны быть разные alt теги. Если использовать одни и те же ключи для всех изображений, эта страница будет плохо ранжироваться, и есть шанс попасть под фильтр АГС
Оптимальный объём — от 3-ех до 10-ти слов для alt. Title должен быть длиннее, более развёрнутым.
Тексты для alt и title должны отличаться

Задаём alt для изображений
В большинстве CMS задать такой атрибут довольно просто. Например, в Wordpress кликаем правой кнопкой на картинку -> «Редактировать» -> добавляем описание атрибута alt.
Во множестве CMS функционал похожий. В некоторых есть даже плагины для шаблонной постановки этих тегов. Для того, чтобы вручную прописать атрибут alt — ориентируйтесь на синтаксис тега <img>, представленный выше.
Если хотите развёрнутой информации, то она есть в статье нашего блога.

Допустим, посещаемость вашего сайта растёт на глазах, но даже в этом случае не нужно пренебрегать оптимизацией изображений. Это возможность получать больше трафика, на уже вложенные ресурсы. Ключи вписаны в тексты идеально, техническая сторона сайта на высоте, посетителей немало, но может быть ещё больше. В этом поможет оптимизация изображений на сайте, ведь в ранжировании поисковых запросов так же участвуют и фото. А ещё, есть шанс собирать дополнительный трафик с запросов «+ фото».
Как правильно заполнять alt и title для картинок
Атрибуты alt и title в роли помощников по оптимизации
В одной из наших первых статей о внутренней оптимизации веб-сайтов мы вкратце рассказывали, насколько важными могут быть изображения для SEO продвижения. Если копнуть в этой теме немного глубже, первое, с чем придется столкнуться – это атрибуты alt и title.
Именно так будут называться пустые поля параметров, которые увидит контент-менеджер при загрузке изображения на веб-страничку.

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

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

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

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

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

Не дублировать заголовки на странице (основной title, h2, h3 и т. д.) и содержимое атрибута alt. 100%-й уникальности тут, конечно же, добиться невозможно. Но добавить разбавляющие слова вроде «фото» или «картинка» по силам каждому.

Важность и нюансы заполнения атрибута alt изображений
В отличие от атрибута title, по своей сути ориентированного на посетителей, заполненный атрибут alt у картинок более существенен для поискового продвижения.
Он охотно индексируется ботами поисковиков и используется ими для определения содержимого обнаруженных изображений. А это важно как для улучшения релевантности страничек сайта, так и для привлечения на него дополнительного трафика из «Поиска по картинкам».
Поэтому нужно помнить, что забывая или не желая заполнять атрибут alt изображений, Вы лишаете свой веб-ресурс дополнительных пунктов рейтинга, которые вполне могли бы улучшить его позиции в выдачах поисковиков.
Что касается посетителей сайтов, то они могут увидеть содержимое атрибута alt лишь в нескольких случаях:
При отключении в браузере отображения графического контента (что по сути случается довольно редко).
В этом случае вместо опубликованных картинок пользователь будет наблюдать стандартную иконку изображения и прописанный в атрибуте alt текст. Отсюда и его название «alt» – сокращенное от «alternative».
Т. е. речь идет об альтернативном варианте (когда стандартный режим отображения не устраивает или по какой-то причине недоступен пользователю), позволяющему все же в общем понять, что было изображено на скрытом в данный момент фото.

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

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

Длина текста не должна быть меньше 3–4 слов и длиннее 250 символов.

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

Не употреблять слова вроде «купить», «оформить», «цена», если они напрямую не относятся к изображению (если это не прайс-лист, например).

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

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

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