Об этом инструменте
Мета-теги в HTML <head> управляют тем, как поисковые системы и социальные платформы отображают предварительный просмотр страницы. К наиболее важным тегам относятся <title>, <meta name="description">, теги Open Graph (og:title, og:description, og:image) и теги Twitter Card (twitter:title, twitter:description, twitter:image). Если эти теги отсутствуют, имеют неверный формат или неправильны, фрагменты поискового запроса и предварительный просмотр в социальных сетях выглядят неработающими или содержат непредусмотренный контент.
Эта программа проверки извлекает URL-адрес и проверяет все соответствующие метатеги. Отсутствующие теги отмечаются. Теги с содержимым, длина которого превышает ограничения по длине, специфичные для платформы (обрезание фрагмента Google, ограничение символов в Twitter), выделяются. Ссылки на изображения проверяются: если og:image указывает на 404, предварительный просмотр в социальных сетях будет нарушен.
Все это важно, поскольку большинство переходов на ваш сайт происходит из результатов поиска и социальных сетей. Мета-теги — это маркетинговый текст, который решает, произойдет ли клик. Сделать их правильно — одна из самых важных SEO и социальных задач.
Зачем проверять метатеги
Ошибки метатегов молчат. Страница без og:image по-прежнему загружается правильно; ничто на странице не говорит о том, что социальные сети выглядят неработающими. Ошибка видна только тогда, когда кто-то делится страницей, и к этому моменту упущенное первое впечатление уже потеряно. Регулярная проверка страниц выявляет эти проблемы на ранней стадии.
После серьезных изменений на сайте — редизайна, миграции CMS, обновления шаблона — метатеги часто регрессируют. Проверка важных страниц подтверждает, что в результате изменения не было потеряно ничего критического.
Технические детали
Обязательные метатеги для SEO: <title> (50–60 символов; Google обрезает их в фрагментах поиска), <meta name="description"> (150–160 символов; более длинный текст обрезается). Отсутствие любого из них значительно ухудшает внешний вид поиска.
Теги Open Graph (используются Facebook, LinkedIn, Slack и многими другими): og:title, og:description, og:image, og:url, og:type. og:image должен иметь размер не менее 1200×630 пикселей для рендеринга с высоким разрешением. og:image:alt — метка доступности.
Теги Twitter Card: twitter:card (обычно summary_large_image), twitter:title, twitter:description, twitter:image. Twitter возвращается к тегам OG, если отсутствуют специфичные для Twitter теги, поэтому часто бывает достаточно хорошо настроенного OG.
Часто задаваемые вопросы
- Какие метатеги наиболее важны для SEO?
- Тег заголовка (самое важное — 50–60 символов), метаописание (150–160 символов), канонический URL-адрес, мета-роботы, Open Graph (og:title, og:description, og:image) и область просмотра для мобильных устройств. Они напрямую влияют на рейтинг в поисковых системах и рейтинг кликов.
- Какой длины должен быть мой тег заголовка?
- 50–60 символов (или ~580 пикселей) для полного отображения в результатах поиска Google. Более длинные заголовки обрезаются до «...». Важные ключевые слова с предварительной загрузкой с самого начала наиболее заметны и имеют больший вес для SEO.
- Нужны ли мне теги Open Graph?
- Да, если вашими страницами делятся в социальных сетях. Без og:image и og:title Facebook/LinkedIn будет автоматически создавать превью, которые могут выглядеть плохо. Правильные теги OG гарантируют, что ваш контент будет выглядеть великолепно при совместном использовании.
- Для чего нужен тег canonical?
- Тег canonical (rel="canonical") сообщает поисковым системам, какой URL является «официальной» версией страницы. Это предотвращает проблемы с дублированием контента, когда одна и та же страница доступна по нескольким URL-адресам (с www или без него, HTTP/HTTPS, с параметрами запроса).
- Почему в моей публикации на Facebook отображается неправильное изображение?
- Чаще всего Facebook использует кэшированную версию. Используйте отладчик общего доступа Facebook, чтобы очистить кеш и повторно загрузить страницу.
- Метатеги чувствительны к регистру?
- По соглашению имена свойств пишутся строчными буквами. Большинство парсеров терпимы, но в целях безопасности придерживайтесь нижнего регистра.
- Мой URL-адрес получен из браузера или с сервера?
- Зависит от инструмента. Получение данных из браузера может привести к проблемам с CORS; некоторые инструменты используют прокси-сервер для получения данных и отправки отчетов.
- А как насчет структурированных данных JSON-LD?
- JSON-LD — это структурированные данные для расширенных результатов, отделенные от метатегов. Большинство средств проверки метатегов фокусируются на мета-заголовках HTML; валидаторы структурированных данных — это отдельный класс инструментов.