Мета теги HTML их назначение и правильное заполнение. Что такое метатеги? Как правильно заполнять метатег Title, Description, Keywords

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

Что такое мета теги?

Мета теги дают поисковым роботам больше информации о веб странице. Данная информация скрыта от посетителей страницы.

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

Часто мета теги содержат атрибут name , который устанавливает тип мета данных. Значение метаданных определяется в атрибуте content . Рассмотрим несколько типов пар название-значение, которые часто встречаются на страницах.

Описание

Мета тег description является, вероятно, наиболее часто используемым. Он предоставляет поисковому роботу короткое описание страницы. Например:

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

Описание все еще может влиять на CTR вашей страницы. Слова, которые соответствуют запросу выделяются в результатах поиска жирным. Поэтому хорошее описание (которое усилено ключевыми словами) может оказаться для пользователя более привлекательным, увеличивая шанс перехода по ссылке. Рекомендуемая длина описания - 160 символов.

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

Мета тег robots

Мета тег robots используется для управления доступностью веб страницы для поисковых сервисов. Вы можете разрешить или запретить индексирование страницы, следование по ссылкам и архивацию. Например:

This meta tags tells search engines not to index the page and prevent them from following the links. If you happen to be using two contradictory terms (e.g. noindex and index), Google will choose the most restrictive option.

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

Заголовок

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

Тег title должен быть во всех документах HTML, он определяет заголовок страницы. Разметка выглядит следующим образом:

Заголовок страницы

Очень просто и очень эффективно. Заголовок показывается в двух разных местах: в верхней панели браузера и на странице результатов поиска. То есть тег title оказывает существенное влияние на CTR и ранжирование.

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

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

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

Может быть вы знакомы с длинной формой Content-Type:

В наши дни лучше использовать короткую версию:

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

Мета тег keywords

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

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

Мета тег указания языка

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

В наши дни лучше определять язык с помощью атрибута:

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

Me gusta..

Отказ от перевода

Обновление

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

Также возможно перенаправлять пользователя на другую страницу после такого обновления. Например:

Использование данного тега не поощряется W3C, так как он дезориентирует пользователя. Тем не менее, он не оказывает влияния на ранжирование в результатах поиска.

Заключение

Подводя итог выше сказанному, есть три мета тега, на которых следует сконцентрироваться: description , robots и title (технически, он не является мета тегом).

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

В недавнем прошлом мета тег keywords был мощным инструментом для SEO, но те времена прошли.

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

Часто используются meta-теги: author , description , keywords , viewport , charset .

Мета теги находятся в области HTML документа (). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.

Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта.

Синтаксис

Примеры использования в HTML коде







Основные мета теги

Ниже приведены несколько основных тегов с комментариями по применению и примерами использования.

Meta-тег description

Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.

Пример использования мета тега description

Meta-тег keywords

Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords .

Пример заполнения мета тега keywords

Meta-тег viewport

Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы.

Пример использования мета тега viewport

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

Meta-тег charset

Кодировка веб страницы. Наиболее частое значение: "UTF-8".

Пример использования мета тега кодировки charset

Meta тег refresh

Мета тег с атрибутом указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.

Пример использования meta http refresh

Поддержка браузерами

Тег
Да Да Да Да Да

Атрибуты

Атрибут Значения Описание
charset

character_set

Указывает кодировку HTML документа.

content

тестовое значение

Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name .

http-equiv

content-type
default-style
refresh

Устанавливает HTTP заголовок для атрибута content .

Сontent-type - Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше).
Default-style - Предпочтительная таблица стилей.
Refresh - Интервал автообновления страницы.

name

application-name
author
description
generator
keywords
viewport

Имя мета тега. Как и http-equiv определяет суть мета тега.

Application-name - имя веб приложения, которое представляет страница.
Author - имя автора веб страницы.
Description - краткое описание страницы.
Generator - Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц).
Keywords - ключевые слова страницы.
Viewport - некоторые параметры области просмотра страницы.

Что такое мета теги? Мета теги — это специальные теги html, находящиеся в контейнере и предназначены для передачи информации о сайте браузерам и поисковикам. Например, при обходе вашего ресурса, поисковые роботы собирают заголовки страниц, описание сайта, ключевые слова, данные об авторе и прочую информацию содержащуюся в тегах . Перед тем, как показать страницу сайта пользователя, то же самое делает и браузер, чтобы понять, в каком виде должен показываться сайт для ПК или для смартфона.

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

Виды мета-тегов:

  • title (заголовки страниц);
  • description (краткое описание страницы);
  • keywords (ключевые слова);
  • технические мета теги (отвечают за корректность отображения страницы).

Как правильно заполнять мета теги

С точки зрения SEO, главные мета теги сайта это Title, Description и Keywords. Поэтому именно правильность их заполнения мы и рассмотрим. Повторимся, что все они должны располагаться между тегами и не в каком другом месте кода.

Title

Мета тег отвечает за заголовок страницы и отображается строчкой текста на вкладке браузера.</p> <p>Для <a href="/utilities/prodvizhenie-v-poiskovoi-sisteme-ustanovka-schetchikov-treh-servisov-statistiki.html">поискового продвижения</a> сайта, необходимо, чтобы ключевое слово находилось, как можно ближе к началу Title или стояло самым первым. Если сайт продвигается в каком-либо регионе — пишем название города или региона. Далее следует продающая или уточняющая добавка. В завершении, чтобы придать тайтлу уникальности, после прямой черты вставляем название сайта или компании</p> <p><b>Например: </b></p> <ol><li>Для коммерческого сайта: <i>«Купить ноутбук в Москве — цены от 19990 р в интернет-магазине | site.ru» </i></li> <li>Для информационного сайта: <i>«Как правильно выращивать алоэ в домашних условиях | Садовод </i>»</li> </ol><p>Для того, чтобы заголовок не обрезался при показе в результатах выдачи поисковых систем, нужно чтобы длина тайтле была не более 65 символов.</p><p> <title>Заголовок страницы

Description

Мета-тег Description отвечает за то, чтобы в нескольких предложениях описать суть информации на странице. Обычная поисковая система берёт информацию из этого тега для формирования сниппета в результатах выдачи.

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

Примеры:

  1. «Купить ноутбук в Москве. Закажите ноутбук по цене от 19 990 рублей в интернет-магазине. Доставка бесплатно. Гарантия 2 года.»
  2. «Как правильно выращивать алоэ в домашних условиях. Журнал Садовод делится секретами выращивания растения алоэ дома. »

Длина не более 140 символов. На чистом html, это выглядело бы вот так:

Keywords

Мета тег Keywords — это набор ключевых слов, по которым продвигается страница. Впрочем сегодня этот атрибут уже не является обязательным и заполняется по желанию, так в «золотую эпоху» SEO им слишком злоупотребляли и поисковые системы практически не обращают внимание на него. Если же вы всё-такие решили заполнить keywords, лучше это делать простым перечислением слов в начальной форме без запятых:

«Купить ноутбук Москве заказать цена стоимость рубль интернет-магазин каталог доставка гарантия»

Длина любая, но слишком усердствовать не стоит. В html правильно пишется вот так:

Спарсить мета теги конкурентов можно буквально в пару кликов - с помощью парсера .

Технические мета-теги

  • Expires — дата устаревания документа.
  • Pragma — запрет на использование кэшированных данных, информация должная подгружаться с сервера.
  • Content-Type — тип контента и кодировка.
  • Content-language — языка страницы/сайта.
  • Cache-Control — устанавливает кэшируется ли документ или нет, и если да, то каким образом.
  • Robots — отвечает за индексацию отдельных страниц.
  • document-state — частота индексации.

Отсутствие мета тегов может негативно сказаться на отображении, индексации и ранжировании страниц.

Как добавлять мета теги на CMS

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


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

Но если вы всерьёз вознамерились продвигать сайт в поисковиках, Wix лучше не использовать и выбрать например, тот же WordPress.

Проверка мета-тегов онлайн +анализ

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

Вот несколько таких сервисов:

  • http://seo-inf.ru/tools/view-metatags/
  • http://www.prcy-info.ru/index.php/meta-tags-check
  • https://сайт/prizyv-k-dejstviyu-v-reklame/

Давайте согласимся иметь разногласия.
Роберт Льюис Стивенсон.

Э то урок, в котором мы поговорим о том, что такое мета-теги , для чего и как они используются при и как их правильно заполнить.

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

Р екомендую использовать только те метатеги, которые реально нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.


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

С одержимое этого же мета-тега отображается и в заголовке окна :

В HTML мета-тег «title» добавляется следующим образом:

Содержимое мета-тега «title»

Основное содержимое страницы

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

§ 2. Мета-тег «keywords» (ключевые слова)

С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».

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

Н апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.

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

Ч тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:

Перечень ключевых слов">
Содержимое мета-тега «title»

Основное содержимое страницы

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

§ 3. Мета-тег «description» (описание страницы)

С ледующим важным мета-тегом является тег «description», в котором должно содержаться краткое описание страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.

В ажной особенностью мета-тега «description» является то обстоятельство, что в случае его правильного заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):

Е сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.

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

H TML-код для создания мета-тега «description» будет следующим:

Содержимое мета-тега «description»">
Содержимое мета-тега «title»

Основное содержимое страницы

Т еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).

§ 4. Технические мета-теги

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

  • content-type - тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером.
    Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в операционной системе Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:

    Содержимое мета-тега «title»

    Основное содержимое страницы

  • content-language - указание языка документа. Значение этого необязательного мета-тега используется как поисковыми роботами, так и web-серверами. Код для вставки:

    Содержимое мета-тега «title»

    Основное содержимое страницы

  • refresh - время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:

    Содержимое мета-тега «title»

    Основное содержимое страницы

    А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.сайт/, нужно записать так:

    Содержимое мета-тега «title»

    Основное содержимое страницы

  • robots - мета-тег, который отвечает за настройки индексирования страницы. У мета-тега «robots» могут быть следующие значения:
    • index - страница индексируется;
    • noindex - страница не индексируется;
    • follow - гиперссылки на странице учитываются;
    • nofollow - гиперссылки на странице не учитываются
    • all - заменяет «index» и «follow», т.е. страница индексируется и гиперссылки на ней учитываются (действует по умолчанию);
    • none - заменяет «noindex» и «nofollow», т.е. страница не индексируется и гиперссылки на ней не учитываются.

    Код для вставки мета-тега «robots»:

    Содержимое мета-тега «title»

    Основное содержимое страницы

  • author и copyright - мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:

    Содержимое мета-тега «title»

    Основное содержимое страницы

§ 5. Заключение

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

Заголовок страницы

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

Н а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».

Этот материал я подготовил для новичков в SEO, а также на владельцев сайтов, которые не знают как правильно заполнить метатеги. Рассмотрим, что сейчас актуально, а что уже не используется поисковой системой при ранжировании сайта.

Начнём с определения что такое метатеги?

Метатеги (англ. meta tags) - это (X)HTML-теги, предназначенные для предоставления структурированных метаданных о веб-странице. Как правило, указываются в заголовке тега (X)HTML-документа. Метатеги не отображаются на странице и не имеют видимого контента. В них располагается дополнительная информация для поисковых роботов, различного ПО.

В SEO, когда слышим что-то вроде “Нужно прописать метатеги на странице”, в голове сразу же всплывают метатеги Description и Keywords, ну и, само собой, Title. Какое же SEO без этого тега? Начну сразу с них.

Тег Title

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

Title должен:

  1. Отображать суть страницы.
  2. Ближе к началу содержать прямое вхождение наиболее конкурентного запроса.
  3. Быть читабельным предложением с вхождение ключевых слов.
  4. Отличаться от заголовка страницы

    .

  5. Не содержать спама.
  6. Быть уникальным для каждой страницы.
  7. Примерной длины — около 70 — 130 символов.

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

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

Description: В нашем интернет-магазине + “название магазина” + доступные цены от + “цена” + на + “название карточки товара” + с доставкой по + “город”.

Description: “Название карточки товара” + по доступной цене + “цена” + от интернет-магазина + “название магазина” + с доставкой по + “город”.

Как делать нельзя:

  1. Не делайте слишком короткие Description — в Google Search Console, в разделе Оптимизация HTML видно короткие метаописания.
  2. Там же отслеживайте и исправляйте дубли Description (они должны быть уникальны).
  1. Не пишите несогласованные фразы — метатег должен быть читабельным.Не используйте перечисления.

Метатег Keywords

Этот мета-тег не влияет на ранжирование, но, поскольку Яндекс пишет , что meta keywords может учитываться — рекомендую заполнять его, добавляя 3–5 релевантных контенту фраз, разделённых между собой запятыми.

Метатег expires — также используется для управления кэшированием. В мета-тег устанавливается дата. Когда она проходит, браузер должен использовать повторный сетевой запрос, а не имеющийся кэш страницы. Дата указывается в формате RFC850.

Пример использования:

Метатег content-language — указывает язык документа.

Пример использования:

В HTML5 указание языка упрощено:

Постарался перечислить, как мне показалось, самые интересные метатеги. Если вас интересуют другие meta, рекомендую ознакомиться с материалами: Метатеги, которые поддерживаются в Google и Использование HTML-элементов Яндекс .

Подведём итоги

Метатегов достаточно много, но, как оптимизатору, чаще всего приходится использовать в SEO тег Title, meta description, meta keywords. Если вы начинающий сеошник или владелец сайта, рекомендую также ознакомиться с вебинаром “Правила формирования Title и Description” нашего SEO-TeamLead Евгения Аралова: