Для чего нужен атрибут title
Оптимизация картинок и ссылок.
Практически в каждой статье и странице в интернете есть ссылки и картинки, а если вдруг у вас их нету тогда немедленно добавляйте и оптимизируйте. Оптимизировать картинки и ссылки можно путем использования атрибутов title и alt. Как это правильно делать рассмотрим в данной статье.
Ранее мы рассматривали оптимизацию статьи в целом, теперь поговорим более конкретно об картинках и ссылках.
Грамотное использование атрибутов title и alt позволит вам оптимизировать ваши картинки и ссылки и поспособствует увеличению трафика на ваш сайт.
Отличие атрибутов title и alt
Чем же отличаются атрибуты title и alt? На первый взгляд они несут похожую информативную нагрузку, тем не менее у них есть отличия и очень существенные.
Атрибут title (не стоит путать с тегом Title) описывает элемент в котором находиться, при наведении на элемент вы увидите описание скрытое в атрибуте. Основное предназначение атрибута — это предоставление дополнительной информации для посетителя сайта. Title должен раскрывать суть элемента, будь это картинка или ссылка.
Атрибут alt — является атрибутом тега img, предназначение которого отображение сути картинки в случае невозможности загрузки изображения или же когда прорисовка картинок отключена нарочно настройками браузера. Вторым свойством которым не стоит пренебрегать это факт чтения атрибута alt поисковыми роботами. Так как они не умеют на данный момент читать картинки, атрибут alt является для них информацией об изображении, которую они заносят к себе в базу.
Атрибуты alt и title для картинок.
При добавлении картинок в записи в обязательном порядке используйте атрибуты title и alt. В данных атрибутах стоит включать ключевые слова релевантные вашей записи, это не только придаст концентрацию ключевиков в общей “картине” контента, но и позволит продвигаться в поиске по изображениям.
Что писать в атрибутах title и alt?
Атрибут title предназначен для посетителей, для получения подробной информации об изображении. При наведении курсора на картинку мы получим текст который был прописан в тайтле. В title стоит вносить обширное описание, которое даст понять суть картинки.
Alt несет большую информативность для поисковых роботов, потому что это альтернатива графическому изображению и вписывать в данный атрибут стоит более конкретные слова, которые обобщают суть представленного.
Пример использования атрибутов title и alt при оптимизации картинок.
Давайте рассмотрим на примере использование атрибутов title и alt, и их оптимальное заполнение. Есть у нас вот такая картинка:
Тег img в данном случае имеет вот такой вид:
.
С данного примера мы видим что используется значение alt в более строгой форме, оно будет отображено при отключении показа картинок или неполадок с загрузкой изображения. Почему именно в сжатой форме? Дело в том что если мы напишем большой текст и у нас не загрузиться картинка, тогда мы увидим скорее всего дублирование текста. Другими словами не стоит передавать в атрибут alt фрагмент с текста, требуется оптимально короткое его внесение.
Теперь рассмотрим атрибут title, он более обширно представлен, и более информативно для читателя, при наведении курсора на картинку мы увидим действие атрибута title.
Важно: старайтесь не дублировать главный заголовок записи title и alt, это может привести к заспамленности, что негативно скажется на продвижении. Видоизменяйте текст в атрибутах.
Оптимизация внутренних ссылок с помощью атрибута title
Для того что бы оптимизировать ссылку используют только один атрибут title. Предназначение атрибута title в ссылке — предоставление информации о предполагаемом переходе, для лучшего понимания куда ссылается автор, и что мы увидим в итоге.
Что писать в атрибуте ссылки title?
Описание в title ссылке должно нести информативный характер и быть релевантным к тексту как самой записи где размещена ссылка, так и к целевой странице перехода. Другими словами, ссылаться стоит только на схожие по тематике статьи.
Текст title должен отличаться от анкора (текста ссылки), это важно и не стоит этого забывать. Так же стоит использовать в title ключевые слова, что увеличат вес целевой страницы.
Пример использования атрибута title при оптимизации ссылки
Синтаксис ссылки должен быть следующим:
Как мы видим мы внесли атрибут title в описание ссылки, и анкор отличается от текста тайтла, но и тот и другой информативно рассказывает нам о ссылке, что нам и нужно было добиться.
Если вы впервые перевариваете эту информацию, тогда у вас предстоит большая работа по оптимизации ваших ссылок и картинок, это долгий трудный путь, но он вам воздастся.
На этом урок посвященный оптимизации картинок и ссылок закончен, впереди еще много интересного, а пока вы можете изучить остальные уроки WordPress и поисковой оптимизации.
Будьте оптимизированными и да прибудет с вами ТОП 1)))
Атрибуты Alt и Title для картинок. Ответы на популярные вопросы
В сегодняшней статье я хочу рассмотреть, почему всё-таки стоит заполнять HTML-атрибут Alt у картинок, чем он отличается от атрибута Title. Материал рассчитан на новичков и начинающих веб-мастеров, которых интересует вопрос, зачем и почему нужно заполнять атрибут Alt. В конце статьи я подготовил ответы на популярные вопросы по этим атрибутам. Начнём с основ.
Что такое атрибут Alt?
Alt у картинки – это альтернативный источник информации для пользователей, у которых по какой-то причине (слабый интернет, отключено отображение картинок и т. д.) не выводятся изображения на странице. Выводится он в виде текста там, где должна быть картинка.
В HTML-коде атрибут прописывается следующим образом:
Рассмотрим на примере.
Для примера я взял фото с сайта обоев для рабочего стола. Основной контент страницы – изображения.
После того, как я отключил отображение картинок в браузере, вся графика на странице перестала отображаться и можно увидеть альтернативное описание изображения.
С его помощью мы понимаем, что находится на странице. Кроме того, этот атрибут полезен не только пользователю, он также помогает понять поисковому роботу, что изображено на картинке. И Google, и Яндекс используют Alt как один из критериев ранжирования при поиске по картинкам.
Появляется следующий вопрос: что же нужно добавлять в Alt, чтобы он был максимально полезным и для пользователя, и для поисковика?
Как правильно заполнить атрибут Alt для картинок
Что понять, как правильно заполнить атрибут Alt, рассмотрим следующий пример: у нас есть интернет-магазин зоотоваров, и мы хотим прописать Alt для карточки товара с «мячиком для собак».
Есть несколько вариантов заполнения атрибута:
Вариант 1. В качестве альтернативного текста используем «Фото №1», «Картинка 1» и т. д. Такой альтернативный текст не несёт никакой пользы, так как не даёт информации об изображении. Более того, как пишет Яндекс: «Картинки, у которых отсутствуют содержательные описания, не попадают в поиск, так как не могут быть найдены по запросам». Подробнее: «Индексирование картинок».
Вариант 2. Пишем в Alt «Собака с мячиком во рту». В этом случае мы описываем саму картинку, но нужно обратить внимание, что запрос «Собака с мячиком во рту» – информационный. Для описания изображения интернет-магазина он не подойдёт.
Вариант 3. Alt «Мячик для собак» – этот вариант нам больше подходит, но, так как мячиков в магазине может быть много, лучше уточнить запрос.
Вариант 4. Alt «Мячик для собак Humunga Chomp» – этот вариант оптимален для нас. Атрибут содержит название товара и его производителя. Если такого товара много, можно расширить Alt, используя цвет, название модели.
Вариант 5. Alt «Мячик для собак Humunga Chomp, игрушка Humunga Chomp, купить, недорого, Москва» – такой вариант может быть воспринят поисковой системой как спам и нужного результата не принесёт.
Из этих примеров следует, что атрибут Alt:
Зачем нужен атрибут Title?
Title у картинок даёт дополнительную информацию об изображении. Он нужен для того, чтобы пользователю было проще понять, что изображено на картинке. Атрибут выводится при наведении курсора на изображение.
На картинке выше видно, как отображается атрибут на странице.
В HTML-коде атрибут прописывается следующим образом:
Если картинка будет ссылкой, Яндекс рекомендует указывать Title в ссылке:
Рекомендуется заполнять Title. Он может положительно отразиться на поведенческих параметрах сайта. Когда пользователю сложно понять, что изображено на картинке, он машинально может навести на неё мышкой и подсказка Title поможет ему сориентироваться.
Основные требования к Title похожи на требования к Alt:
Зная это, перейдём к вопросам.
Ответы на популярные вопросы по Alt и Title
Alt это описания к изображениям?
Не совсем. Alt – это альтернативное описание, которое будет выводиться вместо картинки, если у пользователя не отображаются изображения.
Обязательно ли заполнять атрибуты Alt и Title для картинок?
Если Вас интересует трафик из поиска по картинкам, Alt обязательно нужно заполнять, Title – по желанию.
Alt и Title должны быть разными или одинаковыми?
Существует два основных мнения по этому поводу:
1) Alt и Title должны быть уникальными;
2) атрибуты должны быть одинаковыми.
Если посмотреть, как заполняют эти атрибуты сайты, изображения которых находятся в ТОПе поиска по картинкам, увидим оба варианта заполнения.
Яндекс по этому поводу пишет следующее:
Я считаю, что эти атрибуты могут быть одинаковыми. Главное, чтобы они давали чёткое структурированное описание вашей картинке.
Нужно ли прописывать возле атрибута Alt ещё и Title?
Необязательно, но учтите: атрибут Title в некоторых случаях помогает лучше понять, что изображено на картинке. Это может положительно отразиться на поведенческих показателях сайта.
В Alt картинки надо ставить те же ключевые слова, что и у статьи, или другие?
Желательно. Главное, чтобы Alt был содержательным и описывал картинку.
Нужно ли прописывать в этих атрибутах ключевые слова?
Если эти ключевые слова будут описывать картинку, то да.
Как правильно писать атрибут Alt: кириллицей или латиницей?
Если ваш сайт на русском, заполняйте кириллицей.
Как писать – с большой или маленькой буквы?
А если статья уже проиндексирована поисковиками, можно внести описание в картинки или не стоит?
Можно. Когда поисковики переиндексируют вашу страницу, они учтут эти описания.
Где заполнять Alt и Title?
Всё зависит от того, на какой CMS сделан ваш сайт.
Если это чистый HTML, то:
Обычно поля для заполнения Alt и Title находятся в параметрах изображения. Например, если ваш сайт сделан на WordPress, открыв параметры изображения, вы увидите поле для заполнения атрибута Alt. В дополнительных настройках есть поле для атрибута Title.
Если же ваш сайт на 1С-Битрикс, в дополнительных настройках параметров изображения есть поле для атрибута Alt. Атрибут Title будет подтягиваться из поля «Заголовок».
Нужно понимать, что всё индивидуально. Многое зависит от того, на какой CMS сделан ваш сайт и как настроен.
Стоит ли и возможно ли прописывать Alt и Title для своих картинок в комментариях?
Не вижу в этом необходимости, да и вряд ли у кого-то в комментариях есть возможность оптимизировать изображения.
Когда к картинкам пишу тайтл и альт на русском, на сайте высвечиваются иероглифы, что делать?
Такое происходит из-за кодировки. Нужно преобразовать текущую кодировку в UTF-8.
Итоги
Ещё раз пробежимся по тому, какими же должны быть Alt и Title.
Основные требования к атрибуту Alt:
Почему стоит заполнять Alt:
1. учитывается поисковыми системами при ранжировании картинок, а значит, если ваша картинка попадёт в ТОП, – это источник дополнительного трафика;
2. будет полезен пользователю, у которого отключены изображения на сайте.
Почему стоит заполнять Title:
1. будет полезен пользователю, которому сложно разобраться, что изображено на картинке;
2. подсказки Title могут положительно отразиться на поведенческих показателях сайта.
Тег Title: для чего предназначен, примеры и шаблоны метатега
Тег Title — важнейший HTML-компонент сайта, который влияет на ранжирование и CTR (кликабельность). Среди тройки базовых SEO-тегов — Title, заголовок H1 и Description — поисковиками, прежде всего, учитывается именно HTML-заголовок страницы.
В этой статье расскажем, для чего предназначен тег Title и как его правильно составлять.
Содержание
Функции Title
Title — это HTML-тег, отвечающий за заглавие страницы сайта. Но это не внутреннее название статьи, которое отображается в тексте документа (его определяет H1), а заголовок-ссылка, которую пользователь видит в сниппете — визитной карточке страницы сайта в поисковой выдаче.
Title страницы нашего блога со статьей о метатегах
Тег Title выполняет сразу несколько функций, полезных, как для поисковых роботов, так и для пользователей:
На что влияет качество заполнения Title
С точки зрения SEO, грамотный Title воздействует на ранжирование за счет двух факторов:
Дальше начинается цепная реакция: чем более точным и релевантным контенту страницы будет тайтл, тем выше CTR и лучше поведенческие факторы. А чем круче ПФ, тем выше сайт ранжируется.
Синтаксис Title
Прежде чем подробно говорить о грамотном составлении HTML-заголовка, нужно разобраться, в каком блоке кода следует располагать тег Title. Его содержимое не отображается на странице и прописывается в блоке Head — это 2 характерных признака meta тегов, поэтому Title обычно тоже причисляют к ним, хотя чисто технически он не относится к этой группе.
Тайтл имеет синтаксис стандартного парного HTML-тега. Все, что вы хотите увидеть в заголовке, заключается между тегами и :
Как поисковики анализируют Title
Поисковые системы Яндекс и Google официально признают влияние Title на ранжирование и определение релевантности страницы сайта пользовательскому запросу. Тайтл для них — это подсказка от вебмастера, по каким ключам продвигается страница и каким запросам соответствует информация внутри документа. Подробнее о том, что такое Title сайта с точки зрения Яндекса, читайте в их суппорте здесь.
Ранжирование завязано на тайтле по разным факторам. Поисковики анализируют, какой процент пользователей клюнули на заголовок и перешли по ссылке, смотрят, как пересекается тег и содержимое документа: принимают за условный запрос саму формулировку тайтла и анализируют совпадения. Если заголовок мало соответствует контенту, поисковик может притормозить или понизить сайт в ранжировании.
Формирование заголовков сниппета
Общий вид стандартного сниппета формируется из нескольких блоков:
Заголовок здесь выполняет роль крючка с приманкой, который должен зацепить пользователя и заставить его перейти на сайт. Это бесплатный SEO-инструмент, оказывающий существенное влияние на продвижение и CTR, поэтому игнорировать его просто глупо.
Title не всегда становится заголовком в сниппете, этому есть ряд причин:
Если в сниппет не подтягивается содержимое тега title из HTML-кода, то поисковик наскребает заголовки по сусекам:
В зависимости от запроса в сниппете одной и той же страницы могут отображаться разные заголовки — так поисковик старается выдать наиболее релевантный результат.
На запрос «Структура сайта» в сниппет страницы нашего блога Яндекс подтянул заголовок из тега H1.
По запросу «Создание структуры сайта» Яндекс на ту же страницу взял содержимое тега Title.
Алгоритм составления релевантного заголовка
Релевантность — фундаментальное требование поисковиков ко всему, что касается продвижения сайтов. Title не исключение. Заголовок обязан соответствовать содержимому страницы и должен биться со всеми основными запросами, по которым она продвигается.
Чтобы получить максимально релевантный тайтл, нужно пройти 3 этапа:
Критерии грамотного тайтла
Что значит «грамотный» тег Title? Как составить эффективный заголовок для сниппета, чтобы народ валом валил на сайт с поиска? Предлагаем вам чек-лист из 10 пунктов. Чем больше критериев будет учтено, тем больше шансов выжать из тайтла все возможные профиты.
Главные ошибки при заполнении Title
Чтобы угодить поисковым роботам Яндекса и Google, избегайте косяков при оптимизации тегов Title. Будьте скромнее, и краулеры к вам потянутся.
Все эти нарушения приводят к тому, что поисковики подтягивают вместо корявого заголовка случайный фрагмент контента или не подпускают страницу близко к топу выдачи.
Примеры удачных и неудачных тегов Title
Разберем примеры заголовков для коммерческих и информационных страниц.
Главная коммерческого сайта
Удачный тег:
Разборка иномарок в Санкт-Петербурге, авторазборка, б/у запчасти — FINNAUTOPARTS
Удачный пример заголовка: несмотря на то, что в нем 80 знаков, главный ключ находится в зоне видимости. После основного высокочастотного запроса указана геолокация, в самом конце спрятано название компании.
Неудачный тег:
Здесь мы видим, как Яндекс расправляется с нарушителями: название сайта стоит в самом начале тайтла, и поисковик его просто выкинул. Ну и набор грубых ошибок: «самая большая площадка», проблема с ключевыми фразами — все это откидывает вполне годный сайт на дальние позиции выдачи.
Страница категории интернет-магазина
Удачный тег:
Плащ-дождевик купить в интернет-магазине «Мир охоты»
В теге органично скомбинировано несколько ключей, название стоит в самом конце, размер 52 знака идеально попадает в строку выдачи, нет ни одного лишнего слова.
Неудачный тег:
Дождевики- купить Дождевики, цены в городе Буденновск и в интернет-магазине на epicentre24.ru
Длинный тег обрезается на полуслове, фактически один и тот же ключ бездумно занимает строку, ключи вписаны неорганично.
Карточка товара
Удачный тег:
Парник-мини на подоконник 4 яруса в Санкт-Петербурге – купить по низкой цене в интернет-магазине Леруа Мерлен
Длинный тег разбит на 2 смысловых блока, поэтому обрезается без потерь, органично вписаны ключи, особенность товара (4 яруса) прописана в первой части пассажа.
Неудачный тег:
Парник-Мини На ⇑ Подоконник 4 Яруса ❗ Купить По Цене 1160 Рублей Со Склада Интернет-Магазина В Москве
Длинный тег обрезается на полуслове. Каждое слово зачем-то начинается с прописной буквы, спецсимвол, отображающийся в строке заголовка, ни к селу, ни к городу. Это пример из серии «Хотели, как лучше, получилось, как всегда».
Теги Title для Главной страницы информационного сайта
Проблема главных страниц больших информационных сайтов в том, что их круг запросов и тем слишком широк, чтобы остановиться на чем-то одном. Поэтому есть смысл продвигать их по брендовым запросам, как это сделано в Википедии:
Википедия — свободная энциклопедия
Для главной нашего студийного блога мы взяли ключ «Статьи по интернет-маркетингу» и тоже добавили брендовый запрос. Получилось:
Заголовки разделов информационных сайтов
С разделами информационников попроще — здесь уже есть определенная тематика и, соответственно, запросы, по которым можно продвигаться.
Удачный пример:
Исследование Марса: история и современные миссии с фото
Четкий заголовок раздела: все по делу, органично вписаны ключи.
Неудачный пример:
Исследование планеты Марс. Может ли человек жить на Марсе? Узнайте тут
Не самый плохой заголовок, но есть ошибки: использованы знаки препинания в конце предложения, не продуманы смысловые блоки, поэтому длинный метатег обрывается на полуслове.
Тайтл для информационной статьи
Удачный пример:
В коротком заголовке органично прописаны несколько запросов, сделано визуальное разделение на блоки, название студии стоит в самом конце.
Неудачный пример:
Канонические ссылки. Атрибут rel= «canonical» — полное руководство по использованию канонических ссылок. Как указать яндексу канонический url страницы
Чрезмерно длинный тайтл, есть точки, переспам, много лишних слов.
Анализ тегов Title у конкурентов
Аудит конкурентов — штука полезная во всех отношениях. Об этом мы подробно рассказывали в статье Анализ сайтов конкурентов выдачи по запросам из ТОПа.
Существуют и специальные инструменты для парсинга SEO-тегов с конкурентных сайтов, например, Анализ SEO-тегов для списка URL и Парсинг сниппетов из Яндекса и Google от tools.pixelplus.ru. Анализируя заголовки из топа выдачи, можно выявить проблемы со своим тайтлом, посмотреть среднее число вхождений ключей, формулировки, длину тегов.
Оптимизация тайтлов — кропотливая работа, которая приносит хорошую отдачу. Менять заголовки страниц можно хоть каждый день, но для анализа эффективности оптимизации нужно подождать хотя бы пару недель.
Шаблоны для Title
Для небольшого сайта можно позволить себе составлять и тестировать оригинальные заголовки, пока не надоест, но для крупных площадок с тысячами страниц уместно составлять тайтлы по шаблонам и использовать сервисы-помощники типа Генератора ключевых фраз от prodalet.ru.
Например, карточки товаров — это типовые страницы, и тайтлы для них нужно делать типовыми. Минимум информации обеспечит шаблон:
название товара → призыв (купить, заказать) → регион → название магазина.
Дополнительно можно вписывать информацию о характеристиках товара, способах доставки и оплаты — здесь нужно правильно выстроить приоритеты и что-то поместить в Description.
Тайтлы для категорий товаров тоже уместно делать по шаблону:
призыв (купить, заказать) → название категории → преимущество → регион → бренд.
Составление тайтлов сродни искусству: составить емкий, привлекательный, кликабельный заголовок, напичканный под завязку ключами — задача нетривиальная. Интересно, как разные сеошники, имея один и тот же набор ключей, умудряются сочинять уникальные теги.
Есть расхожее мнение, что за образец идеального, с точки зрения поисковика, тайтла нужно брать заголовки их представителей: маркетплейса Яндекса и его разнообразных сервисов. Но этот миф разбивается о жестокую реальность: например, в коде товарных карточек магазина «Беру», который интегрирован в Яндекс. Маркет, вообще нет тега Title. Так что ориентироваться здесь нужно на свое семантическое ядро, анализ конкурентов и здравый смысл.
Вывод
Данные тега Title используются в продвижении страницы, т.к. имеют доказанное влияние на ранжирование в поисковых системах. В заголовке страницы обязательно должны прописываться ключевые фразы, по которым она продвигается: это помогает поисковикам точно вычислить релевантность документа, а пользователям найти информацию, наиболее полно соответствующую их запросу.
Грамотное оформление тега обеспечивает:
В нише низкочастотных запросов оптимизации тайтлов бывает достаточно, чтобы существенно улучшить положение сайта.