Зачем нужны meta-теги
Мета-теги находятся в разделе <head> страницы и не видны посетителю напрямую. Их читают поисковые роботы и соцсети, чтобы понять, о чём страница и как показать её в выдаче или в виде карточки-ссылки.
Два тега решают почти всё: title определяет заголовок в результатах поиска и остаётся одним из сильнейших факторов ранжирования, description формирует описание под ссылкой и напрямую влияет на то, кликнут по ней или пролистают дальше.
Как написать хороший title
- Ключевое слово ближе к началу. Вес слов в заголовке убывает слева направо
- 60 символов — безопасный предел. Google обрезает по ширине в пикселях, Яндекс чуть щедрее. Всё, что не влезло, заменяется многоточием
- Уникальный для каждой страницы. Одинаковые заголовки на разных страницах поисковики считают дублями
- Без перечисления ключей. Конструкции вида «купить окна купить окна недорого» давно работают против сайта
- Бренд в конце и только если есть место. На главной он уместен, на внутренних страницах чаще съедает полезное пространство
Description: на позиции не влияет, на клики — да
Google официально заявил, что description не является фактором ранжирования. Но именно он формирует сниппет — тот текст, который видит человек перед переходом. Разница в кликабельности между удачным и небрежным описанием достигает нескольких раз.
Пишите его как рекламное объявление: конкретика, выгода, призыв. Длина до 160 символов; на мобильных обрезка происходит раньше, поэтому главное ставьте в первые 120.
Open Graph и карточки в соцсетях
Протокол Open Graph придумали в Facebook в 2010 году, сейчас его используют почти все платформы: ВКонтакте, Telegram, LinkedIn, WhatsApp. Без этих тегов при отправке ссылки соцсеть подтянет случайную картинку со страницы или не покажет превью вовсе.
| Тег | Назначение |
|---|---|
| og:title | Заголовок карточки |
| og:description | Описание под заголовком |
| og:image | Изображение, самый заметный элемент |
| og:url | Канонический адрес страницы |
| og:type | Тип содержимого: website, article, product |
| og:site_name | Название сайта |
Требования к изображению
- Размер 1200×630 — соотношение 1.91:1, подходит для всех платформ
- Минимум 600×315, иначе карточка покажется маленькой без крупного изображения
- Абсолютный адрес с протоколом: относительные пути не работают
- До 5 МБ, формат JPG или PNG
- Текст крупно. В ленте карточка отображается небольшой, мелкие надписи превращаются в кашу
Canonical и защита от дублей
Тег rel="canonical" указывает основную версию страницы. Он нужен, когда один и тот же контент доступен по нескольким адресам: с UTM-метками, с параметрами сортировки, с www и без.
Без canonical поисковик сам выбирает, какую версию показывать, и вес страницы размывается между дублями. Ставьте абсолютный адрес, а на самой основной странице canonical должен указывать на неё же.
Где проверить результат
- Яндекс Вебмастер — «Инструменты → Проверка ответа сервера» покажет, какие теги видит робот
- Google Search Console — «Проверка URL» отображает обработанную версию страницы
- Валидаторы OG — Facebook Sharing Debugger и аналоги показывают, как выглядит карточка, и сбрасывают кеш превью
- Telegram — бот @WebpageBot принудительно обновляет превью для ссылки
Частые вопросы
Влияет ли description на позиции?
Почему в выдаче показывается не мой title?
Нужен ли тег keywords?
Почему в соцсети показывается старая картинка?
Какой длины должен быть title?
Обязательны ли теги Twitter Card?
Что писать в og:type?
Куда вставлять полученный код?
<head> страницы, до закрывающего тега. В CMS для этого обычно есть SEO-плагин или поле в настройках страницы — вставлять код руками в шаблон приходится редко.