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

Метатеги — это элементы кода сайта, в которых прописана информация о странице, которая может повлиять на восприятие страницы поисковыми роботами.

Обычно эта информация называется метаинформацией и заключается в тег <meta> внутри тега <head>. Метатегов может быть несколько, и все они передают роботам важную информацию о сайте.

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

Исходный код
Исходный код

Вызовите строку поиска, нажав на Ctrl + F или Command + F на Mac и введите слово meta. На странице подсветятся жёлтым все метатеги:

Как найти метатег в коде
Как найти метатеги в коде

Зачем нужны метатеги

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

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

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

❗Это работает не всегда. Поисковые системы сами решают, какое описание страницы отобразить в результатах поиска. Если, по их мнению, description недостаточно хорошо описывает контент, они могут показывать в описании другой текст со страницы.

Вот пример, когда метатег подтянулся в результаты поиска:

Метатег description в результатах поиска
Метатег description в результатах поиска

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

Description

Description — это описание страницы, её содержания, на основе которого формируются описания страниц сайта в сниппетах.

Тег пишется так:

<meta name="description" content="...">

Если текст метатега отображается в поиске, то вы можете видеть его здесь:

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

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

Как оптимизировать description

Основные правила составления описания, рекомендации поисковых систем и примеры мы разбираем на бесплатном курсе по базовому SEO от Топвизора. В конце курса — сертификат.

Keywords

В Keywords указываются ключевые слова, которые описывают страницу. Это может помочь поисковым роботам понять тематику страницы.

Он выглядит так:

<meta name=”Keywords" content="ключ1, ключ2, ключ3">
Пример тега Keywords
Пример тега Keywords

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

Robots

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

Записывают его так:

<meta name="robots" content="noindex">

У тега Robots есть несколько атрибутов:

  • index, noindex — чтобы разрешить или запретить индексацию;

  • follow и nofollow — чтобы разрешить или запретить роботам переходить по ссылкам;

  • all/none — чтобы запретить или разрешить роботам ходить по ссылкам и индексировать страницы;

  • noyaca (Яндекс) и nosnippet (Google) — чтобы запрещать роботам использовать сформированное автоматически описание.

Пример метатега robots noyaca
Пример метатега robots

Viewport

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

Выглядит он так:

<meta name="viewport" content="width=device‑width, initial‑scale=1">

У метатега есть свои атрибуты — специальные команды, которые сообщают определённые параметры метатега.

Эти команды передаются с помощью атрибута content. Все указанные внизу значения meta viewport будут вписаны в атрибут content через запятую, например, так:

<meta name="viewport" content="width=device‑width, height=device‑height, 

initial‑scale=1.0, maximum‑scale=1.0, minimum‑scale=1.0, user‑scalable=no">

Для чего используется метатег viewport и как его настроить

Content‑type и Charset

Эти теги отвечают за кодировку на странице. В HTML5 отображать кодировку можно двумя способами:

<meta http‑equiv="Content‑Type" content="text/html; charset=utf‑8">
<meta charset="utf‑8">.

Refresh

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

Может выглядеть так:

 <meta http‑equiv="refresh" content="0; url=https://example.com/newlocation">

Как настроить переадресацию через refresh для Google

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

Что запомнить

  • Метатеги — это элементы кода сайта, в которых прописана информация (метаинформация) о странице, которая может повлиять на восприятие страницы поисковыми роботами;
  • Если открыть HTML‑код страницы, то содержимое метатегов можно увидеть;
  • Метатеги влияют на результаты поисковой выдачи, координируют индексацию и помогают пользователям понять, о чём страница;
  • Основные метатеги: description, robots, keywords, viewport, refresh, content-type и charset.