Html краткое описание страницы. Справочник тегов HTML

Сегодня я расскажу вам про мета-тег Description и как его лучше всего применять.

Что такое meta Description?

Description – тег, в котором содержится описание к странице сайта. В отличие от тега meta keywords он отображается в поисковых системах. Формирование данного тега входит в чек-лист грамотного SEO-специалиста.


Правильно составленный Description оказывает влияние на CTR сниппета, что в свою очередь можеть сыграть немаловажную роль на релевантности страницы. Пользователи анализируют description и если данное предложение их заинтересует они перейдут на страницу вашего сайта.

Новое: Как сформировать идеальный сниппет с примерами

Синтаксис html description



Как правильно составить Description?

Я выписал основные требования по формированию тега, которые вы должны соблюдать:

Тег встречается 1 раз на странице. Многие сайты не содержат description. Как правило они просто не оптимизированы. А так, конечно, тег может встречаться только один раз на сайте.

Соответствие Description тематике страницы . Как и в случае с Title важно понимать, что вводя определенный запрос пользователь хочет видеть нужную ему информацию. Также описание description выводится в социальных сетях при копировании ссылки.

Уникальные описания в дескрипшн. У каждой страницы должны быть свои meta tag description без повторений и шаблонов. Ни в коем случае не стоит копировать тег Title.

Длина мета-тега description. Оптимальная длина от 150 символов до 200 символов. Старайтесь укладываться в этот интервал. Приблизительно у поисковых систем Яндекс и Google равное количество слов в предложениях около 15-20.

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

Упоминание преимуществ но ограничено . Важно, чтобы данные преимущества встречались на самой странице. Как экспериментировать не стоит, но стоит обратить внимание на небольшие преимущества, которые вы можете встретить в description:

Упоминание про доставку

Если дело касается товара, в принципе это актуально и грех не указать данное преимущество.

Например:

“Бесплатная доставка по Москве”

Цифры также важны. Числовая информация закладывается в голове у человека. Рассмотрим пример:

Компания по компьютерной помощи:

“Выезд специалиста в любой район Москвы в течении 1 часа”



Но есть еще предупреждение, как не стоит писать description.

Примеры плохих мета описаний Description :
  • Наполнение мета-описаний временной, служебной информацией, например: «Не забыть добавить здесь текст»;
  • Устаревшие описания. Например, цены на сайте изменились, описываемый документ теперь расположен по другому адресу, а описания при этом прежние;
  • Размещение важной информации в конце текста. Старайтесь располагать наиболее важную информацию и фразы в начале мета-описаний.

В зависимости от вашего запроса Яндекс формирует сниппет + учитывает текст на сайте. Соответственно, если вы вводите запрос, но его нет в description Яндекс потягивает текст с того места на сайте, где чаще всего встречается данный запрос.

Для начала хочу вам показать мнение бывшего работника Google Matt Cutts.


Вкратце Мэт советует не использовать повторяющиеся описания страниц (description), чтобы хорошо ранжироваться в Google.

Что еще полезное можно подчеркнуть из справки в Google про description:

Цитирую:

Включайте в описание сайта четко классифицированные факты:

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

Есть ряд причин по которым данный мета-description неудачен как описание страницы в результатах поиска:

  • Название книги дублируется в заголовке страницы;
  • Некоторые данные в описании также продублированы (Дж. К. Роулинг, Мэри Грандпре перечислены два раза);
  • Нет четкого определения данных: кто такая Мэри Грандпре?
  • Отсутствие пробелов и злоупотребление двоеточиями затрудняет чтение.

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



Содержимое мета - тега «title»< /title>
< /head>
Основное содержимое страницы< /body>
< /html>

Вот как, к примеру, бы мог выглядеть HTML-код мета-тега Description для ключевого слова “Туры в Одессу”:

Обратите внимание, что в этом описании повторяется ключевое слово “Туры в Одессу”, а также указывается на очевидные выгоды: клиент будет иметь возможность отдыхать, не беспокоясь о деталях поездки - вы будете заботиться о них.

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

Помните, что не заполненный мета-тег Description может явиться источником серьезных проблем при определении рейтинга вашего сайта.

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

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

Следует помнить, что каждая страница вашего сайта должна содержать свой уникальный и точный мета-тег Description , так как дублирование мета-тега Description на страницах сайта всегда оценивалось отрицательно поисковыми системами.

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

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

Хорошо написанные и уникальные мета-теги Description на каждой странице вашего сайта будут способствовать увеличению количества кликов по вашей ссылке.

Рекомендации от Google по использованию мета-тега Description

МЕТА-ТЕГ Description

Придумайте краткое описание для каждой страницы

Метатег дает поисковой системе краткое описание содержимого страницы . Если в теге мы использовали одну фразу, то в мы уже можем написать пару предложений или небольшой параграф. В наборе инструментов для веб-мастеров Google есть удобный инструмент для анализа контента, который поможет вам подсказкой, если ваши метатеги слишком длинны/коротки или слишком часто повторяются (та же функция доступна для тегов ). Так же как и тег , метатег размещается внутри тега html-страницы.

Значение метатега для оптимизации поиска

Метатеги описания важны потому, что Google может использовать их при создании сниппетов к вашему сайту . Заметьте, мы говорим “может”, потому что Google может выбрать для сниппета другой подходящий текст с вашего сайта, если он более релевантен запросу пользователя. Так же Google может использовать описание вашего сайта из проекта Open Directory, если ваш сайт в него включен.

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

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

ПРАКТИЧЕСКИЕ СОВЕТЫ

Кратко и точно опишите содержание страницы

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

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

Создайте уникальное описание для каждой страницы

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

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

  • пустые элементы — , ,
    , , , , , ,
    Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

    Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов.

    Таблица-шпаргалка с тегами

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

    Тег для создания таблицы.
    Определяет тело таблицы.
    Создает ячейку таблицы.
    Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
    Создает большие поля для ввода текста.
    Определяет нижний колонтитул таблицы.
    Создает заголовок ячейки таблицы.
    Определяет заголовок таблицы.
    Определяет дату/время.
    Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
    Создает строку таблицы.
    Добавляет субтитры для элементов и .
    Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
    Создает маркированный список.
    Выделяет переменные из программ, отображая их курсивом.
    Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
    Указывает браузеру возможное место разрыва длинной строки.