Сгенерируйте SEO-мета-теги, свойства Open Graph и разметку Twitter Card из одной формы. Включает каноническую ссылку и проверку длины заголовка и описания в реальном времени.
Сгенерируйте теги SEO, Open Graph и Twitter Card из одной формы. Заполните поля один раз и получите полный блок <head>. Длина заголовка и описания проверяется в реальном времени по лимитам, которые используют поисковые системы перед обрезкой.
Большинство мета-тегов, которые можно встретить в старых учебниках, игнорируются. Те, что всё ещё влияют на то, что видят пользователи, немногочисленны:
<title> — единственный самый важный элемент на странице. Он становится кликабельным заголовком в результатах поиска и подписью на вкладке браузера.<meta name="description"> — не фактор ранжирования, но обычно становится сниппетом под заголовком, поэтому напрямую влияет на кликабельность.<link rel="canonical"> — сообщает поисковым системам, какой URL является авторитетной версией, когда один и тот же контент доступен по нескольким адресам.Заметно отсутствует <meta name="keywords">. Google подтвердил, что перестал использовать этот тег для ранжирования в 2009 году после многолетних злоупотреблений. Он включён сюда только потому, что горстка внутренних поисковых систем всё ещё читает его.
Поисковые системы обрезают заголовки и описания, чтобы вместить фиксированную ширину в пикселях, поэтому заголовок из узких символов вмещает больше текста, чем заголовок из одних заглавных букв. Подсчёт символов — практическое приближение: около 60 символов для заголовка и 160 для описания удерживают вас в пределах десктопного лимита в большинстве случаев. Результаты на мобильных ещё уже.
Превышение лимита — не ошибка. Описание — это сниппет, а не договор, и поисковые системы регулярно переписывают его, когда другой фрагмент лучше соответствует запросу. Выносите важные слова в начало, чтобы смысл сохранился при обрезке.
Open Graph зародился в Facebook, но теперь это фактический стандарт, который читают LinkedIn, Slack, Discord, WhatsApp, iMessage и большинство других платформ. Четыре свойства делают почти всю работу: og:title, og:description, og:url и og:image.
Парсер Twitter откатывается к Open Graph, когда его собственные теги отсутствуют, поэтому полный набор свойств twitter:* нужен только тогда, когда вы хотите другой заголовок, описание или изображение именно на этой платформе. Тег, который стоит задать явно, — twitter:card, который выбирает между большим героическим изображением и компактной миниатюрой.
Именно здесь чаще всего ошибаются. Используйте абсолютный URL — относительные пути ломаются у каждого краулера. Цельтесь в 1200 на 630 пикселей, соотношение 1,91:1, которое заполняет большую карточку без обрезки. Держите файл меньше примерно 1 МБ, используйте JPEG или PNG и убедитесь, что URL публично доступен без аутентификации, куки или цепочки редиректов. Любой текст на изображении должен быть крупным, потому что карточка часто отображается в долю своего натурального размера.
Каждая крупная платформа агрессивно кэширует превью, часто на несколько дней. После обновления тегов старая карточка будет появляться, пока кэш не истечёт или вы не принудите обновление через собственный инструмент отладки платформы. Facebook, LinkedIn и Twitter предоставляют такой каждый. Если превью всё ещё отображается неверно после обновления, проверьте, что краулер действительно может дойти до страницы: стена авторизации, блок robots.txt или геоограниченный контент — всё это даёт пустую карточку.