Оптимизация изображений, как правильно оформить теги alt и title

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

Содержание

• 1 Зачем на сайте картинки
• 2 Альтернативный текст — alt
• 3 Титульное изображение — title
• 4 Какой текст должен содержаться в alt и tiltle
• 5 Alt и title — одинаковые или уникальные

Зачем на сайте картинки

Благодаря алгоритмам поиска Google и Яндекс — письменный контент безраздельно «правит балом», но каждому королю нужна корона. Современные получатели информации привыкли воспринимать ее визуально. Любой текст легче читается и запоминается когда он дополнен даже самой банальной картинкой в виде фотографии, графики или инфографики. Кроме того картинки могут удачно дополнить и объяснить написанное.

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

Альтернативный текст — alt

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

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

Рекомендации по использованию атрибута alt можно найти в спецификации XHTML — alt является обязательной частью тега IMG. Базовый код этого оптимизированного изображения выглядит так:

<img src = «filename.jpg» alt = «описание изображения» />

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

Титульное изображение — title

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

Код изображения, содержащий как alt, так и title, в базовой версии должен выглядеть так:

<img src = «filename.jpg» alt = «описание того, что изображено на изображении» title = «image title» />

Какой текст должен содержаться в alt и tiltle

Alt — более важный из двух атрибутов. Именно на него в первую очередь обращают внимание сетевые роботы. Отсутствие атрибута alt на картинках может привести к ошибкам проверки и индексации страницы. Тем не менее, также стоит заполнить title. Мы можем рассматривать это как своего рода вишенку на торте, но следует помнить, что каждый, даже маленький элемент оптимизации страницы, определяет качество SEO всего ресурса.

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

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

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

Alt и title — одинаковые или уникальные

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

Некоторые специалисты по оптимизации изображений позволяют дублировать описание для alt и title изображения. Но знаете ли вы, что почти 1/3 страниц в Интернете не содержат уникального текста и могут быть классифицированы как дублированный контент? Дифференциация alt и title для одного изображения — это такой кирпичик, который говорит о качестве веб-сайта и, как сумма большего целого, может помочь веб-сайту занять более высокое место в результатах поиска по определенным ключевым словам.

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

Еще одна проблема — дублирование описания alt и title для разных картинок. Этот вопрос также относится к вышеупомянутым указаниям на дублированный контент. Содержание альтернативных текстов и заголовков каждого оптимизированного изображения на вашем веб-сайте должно быть уникальным!

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

Как правильно использовать теги alt и title вы узнаете из видео.

Заметили ошибку? Выделите ее и нажмите Ctrl+Enter, чтобы сообщить нам.

разница, как заполнять для SEO, как правильно прописать в WordPress

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

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

Зачем нужны?

Как отображаются в коде и на сайте

Как влияют на SEO

Как правильно использовать alt для картинок?

Как правильно использовать title для картинок?

Можно ли делать Alt и Title одинаковыми?

Как прописать в WordPress?

Заключение

Зачем нужны?

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

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

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

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

Важно! У Яндекса и Google атрибут Alt выступает в роли одного из факторов ранжирования в поиске по картинкам.

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

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

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

Title для изображений в свою очередь помогает повысить конверсию, особенно коммерческим сайтам, если вставить в него призыв, мотивирующий пользователя осуществить целевое действие. К примеру: «закажите наши услуги со скидкой 20%».

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

Как отображаются в коде и на сайте

Когда браузер не подгружает картинки на странице, показывается описание изображения alt:

В коде атрибут alt задается так:

<img border="0" alt="[альтернативное описание]" src="izobrazhenie.jpg">

На сайте тег title отображается следующим образом:

В коде title к картинке задается так:

<img border="0" alt="[альтернативное описание]" title="[дополнительный текст]" src=​" izobrazhenie.jpg">

Но если картинка будет использоваться в качестве ссылки, Яндекс советует вставлять title в ссылку:

<a href="link.html" title="[дополнительный текст]"><img border="0" alt="[альтернативный текст]" src=​"izobrazhenie.jpg"></a>

Как влияют на SEO

В 2014 году Андрей Левчук провел эксперимент, в ходе которого выяснилось, что важнее для поисковой системы: вхождение ключа в контент или вхождение ключа в alt картинки? И как сильно оптимизированные посредством альтернативного текста изображения сказываются на продвижении в целом?

Для этого он:

1. Нашел слово, по которому в результатах поиска не выдает ни единой ссылки:

2. Создал два практически идентичных поддомена kvadro1.optimizer.co.ua и kvadro2.optimizer.co.ua – так он уравнял их факторы настолько, насколько это было возможно.

3. На первом поддомене (kvardo1) опубликовал текст с пятью вхождениями ключевого запроса, процент вхождения составил 5,8%.

4. На втором поддомене (kvadro2) создал практически аналогичный текст и добавил 5 уникальных изображений, слегка изменив их в Paint.

5. Посредством Webmaster Tools (WMT) обе страницы попали в поисковый индекс.

Спустя 3 минуты результаты были получены.

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

Вывод – текст индексируется слегка дольше. Что же наблюдалось после попадания страниц в выдачу:

Хотя kvadro1 уже тоже попал в индекс Гугла, в результатах выдачи он отобразился не сразу:

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

Далее в поисковой строке было вписано ключевое слово с добавлением оператора «intext:». Был получен ответ:

А еще через 5 минут он увидел такие изменения:

Первый веб-ресурс уже в поиске и отображается на первом месте. За 5 минут изменились сниппеты – у первого сайта сниппет взят из тега Description, а у второго сформирован из фрагмента текста, при этом Google распознает атрибут Alt и тоже добавляет его в описание.

Еще через 2 минуты сниппеты вновь изменяются:

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

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

Отмечу, что после индексации по прямому запросу в «Поиске по картинкам» результаты выдачи пустые. Значит, либо поисковая машина не привязывает изображения к их альтернативному тексту, либо прошло еще недостаточно времени:

Спустя два дня в результатах поисковой системы по основному ключевому слову осталась лишь первая страница, в то время как вторую страницу с картинками Google забросил в «скрытые результаты»:

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

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

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

Одно остается неизменным: «Поиск по картинкам» до-сих пор пустой. Alt не привязался к изображениям, и это спустя неделю. Также Андрей Левчук отметил, что спустя 5 дней после первой индексации страницы были отсканированы повторно.

Через 3 дня выдача стабилизировалась и получились такие результаты:

Наконец-то добавились в поиск картинки. При этом они расположились в том же порядке, что и в тексте. То есть Google не отдал предпочтение ни одной из них:

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

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

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

Как правильно использовать alt для картинок?

Наиболее полезный текст в теге Alt для изображения пишется по принципу «чем проще, тем эффективнее». Просто посмотрите на картинку и напишите двумя-тремя словами в поле то, что видите. Если на картинке изображен пример тега alt в HTML-коде страницы, то так в альте и напишите: «Тег Alt в html страницы». Чем точнее описание, тем выше изображение отобразится в «Поиске по картинкам».

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

Способ №1. В альте указываем «Изображение №1», «Фото 1» или другой подобный текст. Данное содержание абсолютно бесполезно для поисковика и пользователя в качестве описания к картинке. Яндекс негативно относится к такому заполнению тега, сообщая что:

«Фото без содержательных описаний не будут включены в индекс, потому что их не найдут по релевантным запросам».

Способ №2. В alt прописываем «Девочка кормит игрушку кашей». Таким способом мы описываем непосредственно то, что изображено на фото. Но подобный запрос подойдет для информационного сайта, а для интернет-магазина понадобится иное описание.

Способ №3. Содержание альта: «Каша детская». Данный вариант более актуальный для интернет-магазина. Но детских каш много и лучше уточнить название товара.

Способ №4. Указываем в Alt «Каша детская Царь». Самый оптимальный запрос, где в атрибуте содержится название каши с брендом. Если у производителя много каш, можно в описании уточнить цвет, вес, модель и прочие характерные отличия товара от других похожих.

Способ №5. Описание «Каша детская Царь, рецепт семейного счастья Царь, купить недорого, Сочи». Подобное содержание alt поисковые системы воспримут как спам. Поэтому избегайте таких описаний.

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

1. Если сайт русский – заполняйте альт кириллицей.
2. Ограниченный объем тега. Допускается 3-5 слов до 250 символов.
3. Релевантность. Как и название файла, атрибут по смыслу должен соответствовать содержимому картинки и быть релевантным тексту, который ее окружает.
4. Использование наиболее подходящего ключа. Но только в том случае, если он описывает картинку. При этом ключевое слово, под которое оптимизируется страница, должно быть вписано органично и понятно для человека. Не пытайтесь перечислять в теге сразу несколько ключей, это может только навредить.
5. Уникальность. Каждая картинка должна содержать описание, отличающееся от описания других изображений.

Но бывает так, что в тех же интернет-магазинах есть одинаковые товары, просто сфотографированные с разных сторон/ракурсов и т.д. И как же их разделять, если нельзя писать идентичные тексты для картинок? Все просто. Допустим, у вас есть несколько фотографий телефона Iphone X. Подписать их можно так:

• «Телефон Iphone X Вид 1»
• «Телефон Iphone X Вид 2»

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

• «Телефон Iphone X черный 32 ГБ»
• «Телефон Iphone X белый 16 ГБ»

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

Alt можно писать и с маленькой, и с большой буквы. Важно сказать и про имя файла – его название должно соответствовать описанию картинки. Лучше всего изображения делать транслитом, а вместо пробелов вставлять дефис. Например если вы загружаете на свой сайт фото черного iphone x, то файл картинки должен называться так iphone-x-black.jpg

Как правильно использовать title для картинок?

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

1. Небольшой объем. Дополнительная информация к картинке должна состоять не более чем из 3-5 слов либо содержать до 250 символов.
2. Релевантность. Title должен обязательно соответствовать тому, что изображено на фотографии. Иначе это оттолкнет пользователей.
3. Содержание одного из ключей (по возможности). Поисковым системам, по сути, все равно, что вы укажете в данном атрибуте ключевое слово. Но для пользователей это лишний сигнал о релевантности контента введенному запросу. Главное, чтобы ключи отвечали содержанию страницы и описывали изображение. Не допускайте переспама.
4. Уникальность. Желательно, чтобы title картинки не повторял title страницы, h2, h3 и прочие подзаголовки. Да, добиться полной уникальность иногда сложно, однако разбавляющие слова добавить не так и сложно.
5. Если сайт русский – заполняйте Title кириллическими символами.

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

Можно ли делать Alt и Title одинаковыми?

Сегодня распространено два мнения касательно содержания атрибутов:

1. Они должны быть уникальными.
2. Они должны быть идентичными.

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

Один из сотрудников поисковой системы Яндекс касательно вопроса содержания Alt и Title однажды сообщил:

«Применение одинаковых текстов для alt и title не наказывается».

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

Как прописать в WordPress?

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

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

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

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

Заключение

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

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

Обучение использованию Title и Description

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

Какие мета-теги и атрибуты бывают

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

• title (тайтл) — заголовки страниц;
• description (дискрипшн) — краткое описание страницы;
• keywords (кейвордс) — ключевые слова.

К атрибутам относятся Alt и Title картинок:

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

Что такое title? 

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

Рекомендации по составлению тега Title для Яндекс и Google

Чтобы пользователь перешел из поисковой выдачи именно на ваш сайт, тег title должен быть привлекательным и информативным, в противном случае, он может сделать выбор в пользу других, более проработанных сниппетов сайтов-конкурентов.

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

Размер title

В идеале тег должен иметь длину не более 70 и не менее 50 зн. с пробелами +/-10 зн. (лично я не рекомендую писать заголовки длиннее 90 зн.). Слишком короткие заголовки будут малоинформативными, а излишне длинные распыляют суть текста и могут быть восприняты поисковой системой как попытка манипуляции, что может повлечь за собой санкции. Также не забываем, что чем больше слов в тайтле, тем меньше “вес” каждого из слов (значимость с точки зрения поисковой системы), поэтому нет смысла писать излишне длинные тексты.

Уникальность тайтла

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

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

Формирование тайтла из ключевых запросов по частотности

В начале тега должны идти самые важные слова и фразы, ближе к концу должны идти наименее важные ключевые слова данной страницы (обычно важность запроса определяют по его месячной частотности в сервисе Яндекс.Вордстат, (так называемая “!истинная !частотность”).

Формирование из ключевых запросов по геозависимым запросам

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

Отсутствие переспама и информативность

Title не должен быть перенасыщен ключевыми словами и фразами (так называемый “переспам”). Нельзя просто взять и перечислить все ключевые фразы через запятую. В переспамленном виде текст выглядит непривлекательно как для поисковых систем, так и для обычных пользователей. Обычно бывает достаточно пары-тройки основных ключевых запросов для написания корректного и в тоже время оптимизированного под SEO title. 

При написании тайтлов не рекомендуется, но не запрещается использовать:

• Союзы, предлоги, междометия и частицы излишнее число раз. Их можно и нужно включать в текст заголовка для лучшей читабельности, однако по возможности использовать их нужно как можно меньшее число раз.
• Прилагательные превосходной степени, такие как “лучший, выгодный, большой, самый”, также не рекомендуется использовать в текстах, если только они не соответствуют содержимому страницы.
• Не рекомендуется использовать знаки препинания “.!?“, так как они разбивают смысловые пассажи, что снижает релевантность title с точки зрения поисковых систем. Лучше использовать “,:-” иногда используют вертикальный слэш | для разделения смыслов.
• Неплохо смотрятся в тайтле цифры, и заглавные буквы, они неплохо привлекают внимание, но их использовать стоит только в уместных случаях.
• Использование названия компании в заголовке допускается, но располагать его в таком случае лучше в конце текста.

Цепляющий заголовок

Заголовок title нужно составлять так, чтобы он был читабельным и привлекательным для пользователя – он должен цеплять пользователя, например, своим уникальным предложением, чтобы у пользователя возникало желание нажать на заголовок и перейти на сайт из поисковой выдачи.

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

Признаки неправильного title

Если поисковая система игнорирует ваш title и использует другой текст в качестве заголовка в выдаче, это может свидетельствовать о некачественном заголовке (например, он слишком длинный, либо не соответствует содержанию страницы и в нем нет поискового запроса). В этом случае Яндекс или Google могут сами формировать тайтл из анкоров внутренних ссылок или текста целевой страницы (заголовки h2-h6, контент, анкоры).

Title и h2: название страницы и заголовок статьи – в чем разница 

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

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

Важно. Основная цель Title — передать поисковой системе информацию о том, чему посвящена данная страница. Используемые здесь ключевые запросы способствуют продвижению конкретной страницы и улучшению ее позиций в выдаче. Чтобы понять, в чем разница между Title и h2, достаточно изучить особенности их формирования.

5 основных правил составления Заголовка h2

1. Заголовок Н1 можно использовать на странице строго один раз; 
2. Тематика Н1 пересекается исключительно с тем, о чем идет речь в текстовой части; 
3. Нельзя допускать переспам ключевых фраз; 
4. Можно использовать частотный запрос, который не поместился в Title.
5. Не рекомендуется делать одинаковыми title и h2 – в этом нет какого-то криминала, однако хоть какое-то минимальное различие между ними должно быть.

Примеры отличия title и h2: фото и пояснения

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

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

• Высокочастотные запросы включайте в начало заголовка Title, разбавляйте их словами и фразами из семантического ядра.
• Title мотивирует перейти на сайт и совершить действие, Н1 описывает в 4-6 словах всю контентную часть страницы.
• Длина Title может быть 60-70 символов и более, Н1 лучше делать коротким.
• Не допускается переспам, перечисление ключевых запросов.
• Заголовки Title и Н1 должны пересекаться по смыслу, но не полностью совпадать.
• Перед публикацией страницы посмотрите, как заголовки будут отображаться в сниппете и на странице.

Метатег Description: что это такое?

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

В отличие от тега title описание не является фактором ранжирования — поисковики не учитывают его при определении позиции сайта в выдаче. Но, тем не менее, description оказывает значительное влияние на восприятие пользователя. Чем точнее текст в нём соответствует запросу, тем больше вероятность перехода по ссылке. Соответственно, повышается CTR и улучшаются поведенческие факторы.

5 правил составления Description

При составлении описания должны соблюдаться следующие правила:

1. Дескрипшен должен быть создан для людей, быть читаемым и информативным. При естественном описании пользователь получит больше информации и быстрее оценит поисковую выдачу.
2. При создании блока нужно соблюдать уникальность. Каждая страница должна иметь свой индивидуальный мета тег.
3. В дескрипшен запрещено вставлять Title. К таким копированиям поисковики относятся негативно и воспринимают информацию как спам.
4. Если вы перечисляете в теге преимущественные характеристики, то они должны соответствовать действительности. Вносите в блок только правдивые сведения, иначе может пострадать ваша репутация, и пользователь не захочет возвращаться к такому контенту.
5. Не создавайте агрессивных описаний, в которых прослеживается явное принуждение к посещению сайта.

Хороший эффект имеют различные цифровые значения: «100% качество, 20% скидка, 3 вещь в подарок, 20 лет гарантии и т.д.». Не менее важна экспертность: «ГОСТы, СНиПы, статистика, рейтинги, ТОП».

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

Какого размера должен быть Description

В классическом исполнении дескрипшен должен быть составлен из 150-200 символов. Однако если такой объём превышен – это не считается ошибкой. Поисковые системы всё равно индексируют весь блок, поэтому урезать его не имеет смысла.

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

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

Сниппет

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

У некоторых сайтов в поисковой выдаче Google и «Яндекс» иногда появляется не только заголовок и описание, но и дополнительная информация. Выдача конкретного сайта вместе title и description называется «сниппетом».

На что влияет сниппет

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

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

Как повлияет на то что формируется в сниппете поисковиками

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

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

Сниппеты «Яндекса» и «Google» различаются. В Google система чаще всего использует метатеги заголовка и описания. Особенно если они релевантны содержимому страницы. В ином случае система формирует их сама (возьмет отрывки текста из страницы и h2). «Яндекс» же добавляет к сниппету картинку Favicon и показывает чат. 

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

Alt и Title – атрибуты для картинок: как инструмент оптимизации контента

Для большинства вебмастеров размещение изображений на веб-сайте – процесс простой и привычный, однако существуют возможности, на которые некоторые предпочитают не обращать внимания. К примеру, атрибуты Title и Alt: что это такое, знают многие, но пользуются ими далеко не все. Тем не менее, это важные параметры, которые способны повлиять и на оптимизацию сайта, и на восприятие ресурса посетителями, особенно в случаях, когда скорость интернета не позволяет им посмотреть изображение. Этими атрибутами пользуются не только люди, но и поисковые алгоритмы, и их использование позволит улучшить позиции сайта в рейтинге «поисковиков».

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

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

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

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

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

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

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

• Атрибут Title должен соответствовать изображению, т.е релевантным. Не следует писать в нем то, что не имеет к картинке никакого отношения. Иначе это оттолкнет пользователей.
• Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке. Она должна состоять не более чем из 3-5 слов либо содержать до 250 символов.
• Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое. Поисковым системам, по сути, все равно, что вы укажете в данном атрибуте ключевое слово. Но для пользователей это лишний сигнал о релевантности контента введенному запросу. Главное, чтобы ключи отвечали содержанию страницы и описывали изображение. Не допускайте переспама.
• Желательно, чтобы title картинки не повторял title страницы, h2, h3 и прочие подзаголовки. Да, добиться полной уникальность иногда сложно, однако разбавляющие слова добавить не так и сложно.
• Нет разницы, писать текст в теге с маленькой или с большой буквы. Со временем в поле title можно вносить изменения – когда боты переиндексируют страницу, измененные описания учтутся

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

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

HTML-атрибуты Alt и Title

Главная / Блог / Веб-разработка / HTML / HTML-атрибуты Alt и Title

17 марта 2008 г. / 7 комментариев

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

Атрибут HTML

<  элемент   alt="  текст  "  ... />
 

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

Вот как Opera 9 отображает alt текст изображения, когда само изображение не может быть показано:

Opera 9 отображает alt текст для отсутствующего изображения

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

Internet Explorer для Windows также отображает текст HTML alt в качестве всплывающей подсказки, которая появляется при наведении курсора на элемент, даже если сам элемент также отображается. Однако не полагаются на эту функцию , так как большинство других браузеров не отображают всплывающую подсказку для текста alt . Если вам нужна всплывающая подсказка (или эквивалент), используйте атрибут title (описан ниже).

Альтернативные теги

Иногда атрибут HTML alt неправильно называют «тегом alt ». Тег HTML — это все, что находится между скобками < и > . alt — это всего лишь один из диапазона атрибутов , которые могут появляться внутри тега.

Атрибут alt может использоваться только со следующими элементами HTML:

изображение

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

площадь

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

ввод

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

апплет

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

<  элемент   title="  текст  "  . .. />
 

 ...