Мета-теги страницы. Мета теги html — что это такое

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

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

Мета-теги (от англ. «meta tags») используются для того, чтобы структурировать сопроводительные данные о странице. Они рассчитаны исключительно на роботов, браузеры, специализированное ПО, чтобы те корректно «прочли» и обработали представленную информацию. Мета-данные располагаются в директиве HEAD наряду со скриптами, стилями и линками (см. скриншот ниже).

Широкое применение получили три группы мета-тегов:

• NAME;
• HTTP-EQUIV;
• CONTENT.

Для маркетологов, владельцев площадок, SEO-специалистов - тех, кто занимается поисковой оптимизацией сайтов и не имеет отношения к профессиональной разработке - важно запомнить и учитывать только атрибут NAME и теги description, robots, keywords, viewport. Остальная информация о мета-данных для решения SEO-задач вам ни к чему. В целях расширения кругозора вы можете изучить , но в работе это вряд ли потребуется.

Мета-теги для SEO

Description

Description - это мета-описание страницы. Для SEO этот тег один из ключевых.

Синтаксис следующий:

Раньше Google и Яндекс при формировании сниппета в результатах поиска выводили информацию из description. Но оптимизаторы быстро поняли, что с помощью description можно манипулировать выдачей. Кроме того, многие владельцы сайтов недобросовестно подходили к заполнению этого мета-тега: вставляли первый абзац из текста, копировали title или вообще игнорировали его.

Поэтому поисковики перестали формировать описания только лишь на основе description - теперь учитывается весь контент страницы. Но это вовсе не означает, что description утратил свою значимость для SEO. Роботы Яндекса и Google по-прежнему сканируют содержимое description и учитывают его при определении релевантности документа.

Какова длина мета-тега description

В руководствах для вебмастеров Яндекса и Google вы не найдете ни единого слова по поводу длины мета-описаний. Более того, отображаемая длина описаний в сниппетах постоянно меняется: например, в декабре 2017 года Google расширил ее до 300 символов, а в мае 2018 года - укоротил до 160.

Поэтому при определении оптимальной длины мета-тега description приходится опираться на эмпирические данные и здравый смысл.

Состоянием на октябрь 2018 года отображаемая длина мета-описания (в символах с пробелами):

• Google: десктопный поиск - 120-140; мобильный поиск - 100-120;
• Яндекс: десктопный поиск - 120-220; мобильный поиск - 110-200.

Чтобы сделать сниппеты информативными для пользователей обеих поисковиков, лучше самую важную информацию добавлять в первые 100-140 символов мета-тега description, а не 160-170 - как принято считать.

Фактическая длина description может превышать и 300, и 500 символов - но нет смысла тратить ресурсы на увеличение мета-описаний, поскольку пользователи все равно не увидят эту информацию (поисковики же могут воспринять ее как спам). Лучше направьте усилия на SEO-оптимизацию контента и повышение его качества.

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

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

• заполните уникальные description для всех URL сайта (если нет возможности расставить мета-теги сразу на всех страницах, начните с главной, страниц каталога, самых важных товаров);
• описание должно быть точным и содержать полезную информацию. Например, описывая товар в интернет-магазине, укажите его характеристики, назначение, цену. Фраза вроде «купите сапоги у нас, потому что мы лучшие» в качестве описания исключена;
• не превращайте description в спам-лист (недопустимо перечисление ключевых фраз, особенно в прямом вхождении).

«Наличие мета-тегов с некачественным содержанием может стать причиной удаления страницы из результатов поиска» - справка Яндекса.

Robots

С помощью этого мета-тега можно разрешать или запрещать поисковым роботам индексировать страницы и переходить по размещенным ссылкам.

Мета-тег robots может принимать такие значения:

• index (или noindex) - разрешена (запрещена) индексация страницы;
• follow (или nofollow) - разрешена (запрещена) индексация ссылок; вот интересный материал о noindex и nofollow ;
• all - аналог одновременного использования index и follow;
• none - аналог одновременного использования noindex и nofollow;
• noarchive - в результатах поиска не будет выводиться ссылка на сохраненную в кэше копию.

Синтаксис такой:

Изменяя значения мета-тега robots, можно управлять индексацией, причем поисковые системы следуют указаниям в этом теге, в отличие от директив в robots.txt , которые носят рекомендательный характер.

Значения мета-тега robots понимают все поисковые системы. Также можно задать правила индексирования только для:

• Google - в этом случае используется мета-тег googlebot вместо robots (значения можно задавать те же);
• Яндекс - вместо robots указывается yandex.

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

Keywords

На заре развития поисковых систем этот мета-тег играл важную роль в ранжировании. Интересно, что Яндекс до сих пор учитывает содержимое этого мета-тега при определении соответствия страницы поисковым запросам, хотя по факту влияния на позиции keywords не оказывает. Вместе с тем Яндекс предупреждает о том, что если заполнить его откровенным спамом - большим числом ключевых слов - это может привести к пессимизации страницы или исключению ее из индекса.

Если вы решили заполнять keywords, учитывайте синтаксис:

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

Viewport

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

Итак, если сайт адаптирован под просмотр на мобильных, в разделе HEAD будет прописан мета-тег viewport такого вида:

Здесь значение device-width атрибута width дает команду браузеру подогнать ширину окна под ширину экрана устройства. Значение 1 атрибута initial-scale запрещает масштабирование окна (например, при повороте экрана). Больше узнать о мобильной адаптации вы можете из статьи «10 правил оптимизации сайта под мобильные устройства» .

Title - не мета-тег, но для SEO очень важен

Формально title - это не мета-тег, но он работает по аналогичному принципу и играет ключевую роль в SEO, поэтому о нем нельзя не упомянуть.

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

Синтаксис тега title:

Как и мета-теги, title размещается внутри раздела HEAD.

Отображаемая длина title (символов с пробелами):

• Google - около 60;
• Яндекс - около 50.

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

О принципах составления title мы подробно писали в выпуске рассылки «Эффективные заголовки для SEO-продвижения» . Рекомендуем ознакомиться для получения дополнительного преимущества в поисковой выдаче.

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

H1-H6 - полезные для SEO теги

Это не мета-теги. Они прописываются в разделе BODY - то есть их значения являются контентом и видны пользователям. Но раз уже речь идет о SEO, их нельзя обойти стороной.

H1-H6 - это теги логической структуры документа. На каждой странице обязательно должен быть один заголовок, заключенный в тег H1. Подзаголовки заключаются в теги H2-H6 и добавляются на страницу опционально (если того требует логика построения документа и изложения).

Синтаксис такой:

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

При расстановке тегов H1-H6 обязательно должна соблюдаться очередность: например, после H1 идет только H2, а после H2 - только H3.

Часто у начинающих SEO-специалистов возникает вопрос: title и H1 - это одно и то же? Нет - тег title прописывается в разделе HEAD, а не BODY, и именно его используют роботы при формировании сниппета. Вместе с тем текст, заключенный в теги title и H1, обычно частично (реже - полностью) дублируется.

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

Для грамотной технической оптимизации сайта не нужно лезть в дебри мета-данных, а работать лишь с необходимыми для SEO мета-тегами - description, robots, keywords (опционально), тегами title, h1-h6, а также знать о теге viewport. В 99% случаев это исчерпывающий список SEO-тегов.

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

Этот материал я подготовил для новичков в 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 Евгения Аралова:

Один из вариантов применения тега meta - указание HTTP -заголовков, которые должны быть отправлены клиенту до отправки самой веб-страницы. Например:

<meta http-equiv = "Content-Type" content = "text/html" / >

Такая запись указывает, что страница должна быть отправлена вместе с HTTP-заголовком Content-Type: text/html. Такой заголовок указывает браузеру или другой программе тип отправляемого документа. Тем не менее, несмотря на то, что первоначально предполагалось, что веб-серверы будут считывать meta-теги внутри отправляемых клиенту веб-страниц, и формировать HTTP-заголовки в зависимости от их содержимого, на практике это не реализовано в наиболее используемых веб-серверах, соответственно, веб-серверы не меняют отправляемые клиенту HTTP-заголовки, а клиент (веб-браузер) обрабатывает эти meta-теги самостоятельно (в частности, данные из meta-тегов могут заменять данные, получаемые из HTTP-заголовков ).

Кроме того, meta-теги могут использоваться для того, чтобы сообщить браузеру информацию о документе, когда HTTP-заголовки недоступны (например, если страница открывается локально с диска, а не загружается с веб-сервера).

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

<meta name = "keywords" content = "википедия, энциклопедия" / >

Функции мета-тегов

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

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

Группы мета-тегов

Мета-теги разделены на две основные группы - NAME и HTTP-EQUIV. Группа NAME отвечает за текстовую информацию о странице, ее авторе, а также - рекомендации для поисковых систем. HTTP-EQUIV фактически эквивалентны гипертекстовым заголовкам, формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными заголовками.

Группа NAME

Мета-тег Author и Copyright

Мeтa-тeг PICS-Label

Мeтa-тeг Window-target

Определение окна загружаемой страницы.

Мета-тег Imagetoolbar

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

<meta http-equiv = "imagetoolbar" content = "no" / >

Значение мета-тегов

Метаданные о веб-странице изначально предназначались в том числе для того, чтобы помочь поисковым машинам отнести веб-страницу к той или иной категории. В 90-е годы мета-теги активно использовались в целях раскрутки своего сайта, в том числе предоставляя ложные или избыточные метаданные. После этого поисковые машины стали придавать мало внимания метаданным; теперь большее значение имеет правильное структурирование веб-страницы и наличие большого количества ссылок на сайт с авторитетных ресурсов.

Теги для поисковой оптимизации сайта

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

Не используйте ВСЕ ЗАГЛАВНЫЕ БУКВЫ в теге
4:
5:
6:
7:
8:

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

-

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

всегда должен содержать описание в атрибуте ALT и всплывающую подсказку (это скорее касается организации мэппинга на одной картинке). Они тоже могут содержать ключевые слова, но нельзя забывать о том, чтобы они были читабельны и вписывались в общую концепцию данного изображения или привязанной к ним ссылке. Рекомендуемый объем составляет 40 символов.

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

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

1. Поисковые машины индексируют текст. Страница на которой мало текста имеет мало шансов попасть в выдачу по ключевому запросу.

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

3. Не набирайте слова в р а з р я д к у, если хотите, чтобы документ по ним находился.

4. Не набирайте слова БОЛЬШИМИ буквами без необходимости, если это не аббревиатура.

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

6. Чем длиннее документ, тем менее заметны в нем будут ключевые слова, заданные в запросе. Разбивайте длинные документы на более короткие.

7. Делайте ко всем картинкам в подписи alt=’...’ и title=’...’, можно вписывать туда основные ключевые слова.

8. Если ваш сайт имеет фреймовую структуру, то на первой странице нужно между тэгами …. указать описание сайта и поставить ссылки на все страницы, которые Вы хотите проиндексировать.

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

10. . Для всех поисковых систем этот тэг пользуется приоритетом перед keywords и description.

11. Необходимо чтобы те слова которые написаны в заголовке страницы и тэгах keywords и description встречались в основном тексте на странице сайта и желательно несколько раз.

12. Обязательно у каждой страницы вашего сайта должны быть разные заголовки в и разные ключевые слова в мета - тэгах KEYWORDS и по возможности разное описание в DESCRIPTION.

13. Если требуется запретить к индексации какой то фрагмент страницы пометьте его тегами: …

14. Следите за русско-латинским регистром, ошибочно вместо русской буквы "р" используют латинскую "p", вместо русского "с" - латинское "c".

15. Не следует также использовать невидимый текст, в котором цвет шрифта совпадает с цветом фона.

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

17. Целесообразно базовые понятия и ключевые для данного сайта слова включать в следующие HTML-теги.

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/