Атрибут meta content: что это и как его заполнять

Атрибут content – это часть мета-тега, в которой хранится его значение: текст описания, команды для поискового робота, настройки экрана или адрес перехода. Атрибут name или http-equiv сообщает, что это за тег, а content сообщает, что в нём записано.

Когда SEO-специалист пишет в задаче «поправьте description на карточках», править нужно именно content: сам тег на месте, не устраивает его содержимое. Большинство ошибок в мета-тегах сидит как раз здесь. Пропущенная кавычка, лишнее слово в директиве робота или одинаковый текст на тысяче страниц, и поисковик видит совсем не то, что вы задумали.

С какими атрибутами работает content

Сам по себе content ничего не значит. Он всегда стоит рядом с атрибутом, который задаёт тип тега:

Есть и исключение: тег charset задаёт кодировку сам, без content. Его пишут так:

<meta charset="utf-8">

Про property и itemprop подробнее в статье Микроразметка.

У каждого тега свой формат значения

Content не всегда свободный текст. У служебных тегов строгий синтаксис:

• robots: директивы через запятую, например noindex, follow. Подробнее в статье Noindex и мета-тег robots.
• viewport: пары «параметр=значение» через запятую, обычно width=device-width, initial-scale=1.
• refresh: число секунд, точка с запятой и адрес. Как это работает, разбираем в статье Refresh.
• og:image: полный адрес картинки с протоколом и доменом. С относительным адресом превью ссылки в мессенджере выйдет без картинки.
• description: обычный текст для человека, без HTML-тегов, иначе в сниппет попадёт мусор или текст оборвётся. Как его писать, рассказываем в статье Description.

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

Кавычки и спецсимволы

Значение content заключают в кавычки. Если внутри текста встречаются такие же прямые кавычки, браузер решит, что атрибут закончился, и отрежет всё, что дальше. Пример:

<meta name="description" content="Studio "Light" ремонтирует квартиры.">

Здесь content прочитают только как «Studio», а остальное превратится в мусор. В русских текстах проще всего ставить внутри описания «ёлочки». Если нужны прямые кавычки, их заменяют на ". Символ & в значениях тоже лучше записывать как &, особенно в адресах с параметрами.

В каталогах эта проблема обычно приходит из шаблона. Допустим, description карточки собирается по формуле «Купить {название} по цене {цена} в Красноярске». Пока в названиях обычные слова, всё работает. Но стоит появиться товару с диагональю в дюймах, где после цифры стоит прямая кавычка, и описание обрывается на середине. Поэтому шаблон должен экранировать подставляемые значения, а не вставлять их как есть. И проверьте, что будет, если у товара нет цены: фраза «по цене в Красноярске» выглядит хуже, чем описание без цены. Ещё хуже, когда переменная не подставилась вовсе и в описании видна служебная метка в фигурных скобках.

Noindex с тестового домена и одинаковые описания: как проверить content

Две проблемы встречаются особенно часто. Самая опасная: robots с noindex, оставшийся после разработки на тестовом домене. Сайт переносят на боевой адрес, тег переезжает вместе с ним, и страницы пропадают из поиска. Вторая по частоте: описание, которое CMS подставляет из одного шаблона, так что у сотен карточек одинаковый content.

У интернет-аптеки 24farmacia.ru сети «Губернские аптеки», где больше 50 000 наименований, мы уникализировали мета-теги на всех страницах. Это было частью расширенной технической оптимизации вместе с контентом и новым дизайном. По итогам проекта посещений из поиска стало в 3 раза больше, а конверсия в заказ из поиска составила 13%. Подробности в кейсе «Губернские аптеки».

Проверку удобно вести в таком порядке:

1. Откройте исходный код страницы и посмотрите content у description, robots, viewport и og-тегов.
2. Сравните с кодом после выполнения скриптов в инструментах разработчика. Если мета-теги добавляет JavaScript, робот может их не увидеть, подробнее в статье JavaScript SEO.
3. Прогоните сайт краулером, например Screaming Frog, и найдите пустые, обрезанные и одинаковые значения.
4. Если на странице два тега одного типа, оставьте один. При конфликте директив robots Google выбирает более строгую.

Name, кавычки, пустые значения и дубли тегов

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

Источники

• HTML Living Standard (WHATWG): элемент meta
• Google Search Central: мета-теги и атрибуты, которые поддерживает Google
• Яндекс Вебмастер: справка «Метатеги»
• Протокол Open Graph
• Кейс E.BAEV: «Губернские аптеки»