Сегодня поговорим о метаданных для SEO: а именно тегах Title и Description. Никакой воды! Все что вы хотели знать об этих метатегах за 5 минут.
Что такое Тайтл и Дескрипшн и почему они так важны для продвижения сайта
- По-простому: основной заголовок и краткое описание содержания страницы сайта.
- Для поисковых систем: один из основных источников данных о вашей странице (статье). Из этих тегов формируется сниппет сайта в поисковой выдаче.
- Для пользователей: первая информация о странице, которую они видят в поисковой выдаче.
Что такое сниппет в SEO?
Это блок (фрагмент) с информацией, который формируется в результатах поиска на основании данных, которые роботы Гугл или Яндекс получают от сайта. Состоит из: Title, Description, URL, а также расширенные данные: дата, быстрые ссылки, цены, рейтинг и многое другое.
Пример, как выглядит наш сайт в поисковой выдаче:

ЧТО ЭТО ТАКОЕ И ДЛЯ ЧЕГО НУЖНА? Title удивили…
Пример метатегов Title и Description в коде страницы:

Как правильно написать Title и Description:
Начнем с Title
Правило номер раз:
В Тайтл обязательно должно быть основное ключевое слово. Это важно, как для пользователей, так и для поисковых систем, будь то Google или Яндекс.
Правило номер 2:
Тайтл должен быть максимально привлекательным для пользователей. Т.е. на него должны кликать чаще, чем на другие результаты выдачи. CTR (клики/показы) вашего сниппета – это один из факторов ранжирования поисковых систем.
Правило номер 3:
Title должен быть уникальным для каждой страницы вашего сайта.
Как создать Тайтл с высоким CTR:
- Использовать цифры: «5 причин…», «Топ 10…», «3 способа…», «Номер 1 в…».
- Использовать квадратные скобки. Удивительно, но они повышают CTR по разным оценкам на 10-30%: «Купить фольксваген пассат в Москве [официальный дилер]».
- Использовать ваши преимущества (наиболее актуально для сайтов услуг и интернет-магазинов): «Купить антирадар в Москве – бесплатный Тест-драйв 30 дней».
- Вставлять ?Емоджи – увеличивают кликабельность от 20 до 100%. Как правильно использовать их в метатегах я подробно разобрал в отдельной статье (скоро появиться ссылка).
- Для региональных коммерческих сайтов обязательно указывайте город.
- Укажите цену, если уверены, что это ваше конкуретное преимущество.
Пример идеального title для статьи:

Теперь о Description
Если Тайтл действительно важен, то вот Дескрипшн немного отходит на второй план. На это есть две причины:
Что такое метатеги (title, description, keywords, alt, h1 ) и зачем они нужны (Урок № 46 )
- Пользователи при серфинге страниц поисковой выдачи очень редко обращают внимание на то, что там написано.
- Яндекс и Google часто игнорируют прописанный текст в теге Description, а в сниппет выводят более релевантный отрезок текста со страницы сайта.
Тем не менее отсутствие этого мета тега поисковые системы признают ошибкой, а значит он должен быть заполнен и должен отличаться от Title.
Как написать эффективный Description:
- Используйте ключевые слова (выделяются жирным поисковыми системами), которые не уместились в Тайтл.
- Вставьте важную информацию и преимущества (краткие и точные без расплывчатых и заезженных фраз типа «Доступные цены».
- Призывы к действию: «Выбирайте ламинат в удобном каталоге среди 2500 моделей»
- Emoji? выделят вас среди других
Пример хорошего метатега Description (думаю, понятно какой из них):

О длине Title и Description
На момент написания статьи рекомендуемые ограничения по количеству символов для Яндекс и Гугл такие:
- Title: 70-80 символов
- Description: 150–170 символов
Стоит ли придерживаться этих рекомендаций?
Постарайтесь, чтобы в 90 символов Тайтла уместились основной ключ и самая важная информация.
Что касается дескрипшена, то я часто пишу в 1.5-2 раза больше символов.
- В 2018 году Гугл, на небольшой отрезок времени, увечил длину выводимого Description до 300 символов.
- За превышение лимитов нет никаких санкций. Т.е. сайт, с идеально вписывающимся в рекомендации тегами, не будет иметь никакого преимущество перед сайтом, где все теги длиннее предложенных выше значений.
Примеры создания Title и Description
Пример на сайте услуг
- шкаф купе в детскую
- шкаф купе в детскую комнату
- шкаф купе в детскую комнату фото
- угловой шкаф купе в детскую
- угловой шкаф купе в детскую комнату
- шкаф купе в детскую минск
- шкаф купе в детскую под заказ
Description: Купить прямой или угловой шкаф-купе в ??детскую комнату под ключ по самой ⭐низкой цене в Минске! ✅Рассрочка 0% от 3 до 6 месяцев от компании. ✅Безусловная гарантия 3 года на шкафы-купе.
Пример в интернет-магазине
- бескаркасная мебель минск
- бескаркасная детская мебель
- бескаркасная мебель купить
- бескаркасная мебель интернет магазин
- бескаркасная мягкая мебель
Description: Бескаркасная мягкая мебель со скидкой и ? доставкой по всей Беларуси. ✅Самый большой выбор расцветок форм и размеров в Минске! ? Скидки до 60% на акционные кресла-мешки. ✅Всегда в наличии! ✅Можно в аренду!
Пример в информационной статье
- оптимизация текста
- seo продвижение статьи
- seo оптимизация статьи
- тексты для продвижения
- написать seo текст
- seo текст
- сео текст
Description: Продвижение статей и оптимизация текста под поисковые системы: ⭐правила оформления, ⭐как использовать мета-теги, ⭐4 фишки для супер-эффективного продвижения в Google и Яндекс.
Автоматизация создания метатегов Title и Description в популярных CMS WordPress и OpenCart
Если для небольшого блога вполне удобно прописывать Title и Description вручную к каждой странице, то вот в интернет-магазине на 1000 товаров это будет крайне затруднительно.
Как поступать в случае большого количества страниц на сайте?
Использовать специальные плагины, которые позволяют формировать уникальные мета-данные через шаблоны и переменные.
К примеру в интернет-магазине, как правило, используются следующие переменные: название товара, цена, город, название категории и многое другое.
Все переменные заполняются отдельно в каждом товаре, а нам остается только создать шаблон, по которому будет сформирован уникальный Тайтл или Description.
Пример: «Купить [название товара] в [город] по честной цене»
Таким образом, мы можем сформировать метатеги сразу для всех страниц товаров, категорий, страниц услуг и так далее. А главное, мы можем быстро их изменить в будущем.
Источник: agvento.com
Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков , , или тег абзаца
и другие. До сих пор мы использовали их в простейшей форме, но большинство тегов в HTML могут иметь атрибуты, которые являются дополнительными битами информации.
Атрибут – используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей – это имя и значение:
- Имя – это свойство, которое Вы хотите установить. Например, элемент абзаца
, в примере ниже, содержит атрибут align, который Вы можете использовать для указания выравнивания абзаца на странице.
- Значение – это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.
Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.
Пример
Пример атрибута align
Выровнено по левому краю.
Выровнено по центру.
Выровнено по правому краю.
Получим следующий результат:

Основные атрибуты HTML
Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):
Атрибут id
Атрибут id html-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:
- Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.
- Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.
Таблицу стилей мы обсудим в отдельном самоучителе. Пока же давайте использовать атрибут id для различения двух элементов абзаца, как показано ниже.
Этот абзац объясняет, что такое HTML.
Этот абзац объясняет, что такое каскадная таблица стилей (CSS).
Атрибут title
Атрибут title – дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.
Поведение этого атрибута будет зависеть от элемента, который его несет, хотя он часто отображается как подсказка, когда курсор наводится на элемент или когда элемент загружается.
Пример
Пример атрибута title
Пример заголовка
Получим следующий результат:

Теперь попробуйте навести курсор на «Пример заголовка», и Вы увидите, что title, который Вы использовали в вашем коде, выйдет как подсказка курсора.
Атрибут class
Атрибут class – используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.
Значением атрибута может быть также список имен классов, разделенных пробелами. Например:
class=»названиеКласса1 названиеКласса2 названиеКласса3″
Атрибут style
Атрибут style – позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.
Пример атрибута style
Немного текста.
Получим следующий результат:

На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.
Атрибуты интернационализации
Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.
Атрибут dir
Атрибут dir – позволяет указать браузеру направление потока текста. Атрибут dir может принимать одно из двух значений, которые Вы можете видеть в следующей таблице:
| Значение | Описание |
| ltr | Слева направо (значение по умолчанию). |
| rtl | Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево). |
Пример
Пример направления потока текста
Отображает направленный текст справа налево.
Получим следующий результат:

Когда атрибут dir используется в теге , он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.
Атрибут lang
Атрибут lang – позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.
Значения атрибута lang – это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.
Пример
Русский язык страницы
Эта страница использует русский язык.
Атрибут xml:lang
Атрибут xml:lang – это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.
Общие атрибуты
Ниже представлена таблица некоторых других атрибутов, которые можно легко использовать со многими html-тегами.
Title в анкете что это

МЕРОПРИЯТИЯ
Приглашаем аналитиков присоединиться к проекту IT_ONE CAREER и испытать себя на онлайн-хакатоне!
29 сентября Онлайн Бесплатно
Встречаемся на USETECH Offer Weekend!
23 сентября Онлайн Бесплатно
Комментарии
Популярные По порядку
Не удалось загрузить комментарии.
ВАКАНСИИ
Контент-менеджер
по итогам собеседования

Data Scientist (стажер)
Москва, по итогам собеседования
ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ
Подборка материалов по HTML и CSS
В этой подборке представлены актуальные книги и видеоматериалы по HTML, CSS и верстке в целом для начинающих и продвинутых веб-разработчиков.
15 прекрасных плагинов для Sublime Text
Встречайте список первой необходимости – 15 самых нужных плагинов для Sublime, которые сильно упростят жизнь разработчику.
Изучение JavaScript с нуля
Рассказ программиста о том, как добиться успехов в изучении JavaScript.
Источник: proglib.io
