Метатеги сайта: полный гайд (Alt, Robots, Canonical, Viewport, Open Graph)

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

В первой части я рассматривал теги Title, Description и H1-H6.

Alt-тексты изображений

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

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

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

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

Как прописать alt-текст

Альтернативное описание — атрибут тега img, который используется для вставки изображений в HTML. Вот так это выглядит в коде:

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

Чтобы упростить работу, можно воспользоваться генератором alt-тегов. Загрузите изображение, и алгоритм на основе нейросетей предложит варианты описания.

Инструмент для генерации ALT-тегов

Метатег robots

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

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

Как прописать метатеги robots

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

Вот спецификации тега robots, которые можно добавить в код для того, чтобы прописать инструкции поисковым роботам Google.

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

Для поисковых роботов Яндекс доступна только часть этих параметров, которые российский поисковик называет «директивами»: all, noindex, nofollow и none. Также можно запретить показывать ссылку на страницу в сохраненных результатах поиска с помощью параметра noarchive.

Параметры индексации можно указать отдельно для роботов Яндекса. Для этого robots в метатеге нужно заменить на yandex:

Метатег X-Robots-Tag

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

X-Robots-Tag работает с теми же атрибутами что обычный robots, а добавить его можно через серверное ПО сайта. Главное — не ошибиться в синтаксисе, иначе есть риск нарушить работоспособность сайта или отдельных его разделов.

Canonical

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

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

Чтобы избежать таких проблем, в секции head существует тег rel="canonical", также известный просто как canonical. Он прописывается в коде альтернативной версии страницы и выглядит так:

С помощью этого атрибута поисковый бот будет знать, что перед ним — дубль страницы, а по указанному адресу находится ее каноническая, то есть основная, «правильная» версия. На нее поисковик будет перенаправлять весь трафик, а информацию с нее использовать для сниппетов и подсказок.

В коде основной страницы можно прописать, что у нее есть другие вариации. Для этого используйте тег rel=”alternate”, а в href пропишите адрес дубля.

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

Когда прописывать canonical

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

1. Страницы товаров с несколькими вариациями. Например, одна и та же модель дивана с разным цветом обивки. Тут стоит проанализировать спрос и указать в качестве канонической ту версию, которая больше всего интересна покупателям.
2. Страницы пагинации. Каждая страница большого каталога — отдельный URL. Здесь рекомендуется взять за основу вариант ссылки, доступный после нажатия кнопки «Показать все». Тогда канонической станет страница, на которой раскрыт весь каталог.
3. Префиксы сайта. HTTPS, HTTP, www и прочие вариации префикса создают свои собственные URL, по каждой из которых доступен один и тот же сайт. Выберите один основной адрес и пропишите его как канонический.
4. Мобильный URL. Если мобильная версия вашего сайта сделана на отдельном поддомене (например, m.site.com), то стоит прописать их взаимоотношения с десктопной с помощью rel=”canonical” и rel=”alternate”. Обратите внимание на то, что сейчас Google в качестве канонической версии всегда видит именно мобильную.
5. Локальный URL. Примените тег, если у вас есть альтернативные адреса сайта для разных стран. А если на них используются и разные языки, укажите разные версии с помощью атрибута hreflang. Не забудьте корректно настроить переходы между мобильными и десктопными версиями, чтобы не возникло проблем с индексацией.
6. Разница в регистрах. Адреса, набранные прописными и строчными буквами, поисковики воспринимают как разные. При этом общепринятым является нижний регистр — позаботьтесь о том, чтобы каноничность случайно не досталась вариации SITE.COM.

Canonical или 301 редирект?

Может показаться, что rel=”canonical” выполняет ту же функцию, что обычный редирект, но это не совсем так. Эти настройки передают поисковикам совсем разную информацию.

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

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

Как еще прописать canonical

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

1. С помощью плагинов в CMS. В разных системах можно найти поле, в котором можно ввести адрес на каноническую версию. По сути, это просто визуальная репрезентация тега rel=”canonical”.
2. В заголовке HTTP. В настройках сервера можно прописать canonical для медиафайлов и документов, у которых нет HTML-кода. Тогда тег будет обрабатываться на этапе серверного запроса.
3. В Sitemap. Поисковые движки воспринимают адреса, указанные в карте сайта, как канонические. Подробно заполните sitemap.xml и передайте его поисковикам — но помните, что это работает не как жесткий свод правил, а набор рекомендаций для ботов.
4. Также поисковик может назначить в качестве канонической ту версию страницы, которая обладает в его глазах большей ссылочной массой и авторитетностью.

Ошибки при настройке canonical

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

1. Несколько канонических ссылок для одной страницы. У дубля в теге rel=”canonical” может быть только одна ссылка. А вот у основной версии может быть сколько угодно альтернативных.
2. Разные canonical в разных источниках. Если вы прописываете один rel=”canonical” в HTML, но другой в HTTP-ответе, то возникнет путаница. Используя разные способы канонизации, убедитесь, что ведете на один и тот же URL.
3. Цепочка канонических страниц. Для поисковиков не существует «уровней каноничности». Если вы указываете canonical для страницы, которая уже является канонической для другой, это не сработает.
4. Размещение rel=”canonical” не в head. Метатег canonical нужно указывать только в секции head — в теле или футере документа роботы его просто не увидят.
5. Канонизирование первой страницы каталога. Если на вашем сайте есть разделы с пагинацией, используйте URL с параметром «Показать все» или пропишите адреса каждой отдельной страницы.
6. Путаница между 301 редиректом и canonical. Как мы указывали выше, эти настройки нужны для разных целей и по-разному влияют на показатели страниц.
7. Выбор главной как канонической для всех страниц. При таком сценарии боты, скорее всего, будут игнорировать все, кроме главной сайта. Проработайте структуру так, чтобы индексировались все важные страницы.
8. Закрытие канонической страницы от индексирования. Если основной URL по какой-то причине недоступен для индексирования, бот выберет неканонический вариант. Такой сценарий делает настройку canonical бессмысленной.

Viewport

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

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

Метатег viewport располагается под тегом title и выглядит так:

Атрибут "width" отвечает за ширину сайта на экране. Можно указать конкретное число от 200 до 10 000 пикселей или указать "device-width" — тогда система масштабирует страницу под экран.

Если viewport не прописан, браузер будет масштабировать окно как для экрана монитора. Это может привести к ошибкам отображения контента, а поисковые боты пройдут мимо такого сайта.

Корректное и некорректное отображение сайта

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

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

Charset и Content-Type

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

Сайт со сбитой кодировкой

Кодировка настраивается с помощью атрибута charset в строке Content-Type, доступной в HTTP-ответах сервера:

Open Graph

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

Настроить содержимое можно с помощью разметки Open Graph (OG). Кроме текста и визуала, теги позволяют прописать и другие параметры — канонический адрес страницы, на который должен вести сниппет, языки, тип контента и так далее.

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

Блок с тегами OG должен находиться в секции head вашего HTML-файла. Некоторые контент-системы предлагают специальный визуальный интерфейс для работы с разметкой.

Рекомендации для разметки Open Graph

1. Добавьте заголовки и описание для всех страниц, которыми могут захотеть поделиться ваши читатели.
2. Прописывайте короткие, но привлекательные заголовки и описания. Они должны давать хорошее представление о том, что находится по ссылке, мотивируя перейти по ней.
3. Добавляйте в OG специально созданные изображения подходящего формата. Рекомендуется использовать соотношение сторон 1.91:1.

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

Инструмент для генерации тегов Open Graph

Устаревшие метатеги

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

Метатег keywords

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

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

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

Author и Copyright

С помощью этих метатегов можно пометить автора и владельца прав на контент. В HTML-файлах до сих пор можно встретить такие строчки:

В этом нет технического смысла, а для указания авторства и подачи E-E-A-T сигналов лучше использовать структуру статьи и специальную разметку.

Refresh для редиректа

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

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

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

Заключение

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