Генератор Мета-Тегов
Мета-Теги Open Graph
Мета-Теги Twitter Card
Как пользоваться Генератор Мета-Тегов
- 1
Заполните основное
Введите заголовок страницы, описание, ключевые слова, автора и директиву robots в разделе основных meta-тегов.
- 2
Добавьте теги для соцсетей
Заполните поля Open Graph и Twitter Card, включая заголовки, описания и URL изображений, чтобы управлять тем, как страница выглядит при публикации.
- 3
Просмотрите сгенерированные теги
Наблюдайте, как разметка meta-тегов формируется динамически в области вывода по мере того, как вы заполняете каждое поле.
- 4
Скопируйте в <head>
Нажмите «Копировать meta-теги» и вставьте сгенерированный HTML в раздел head вашей страницы.
Полное руководство по HTML-метатегам для SEO
Что такое метатеги и где им место
Метатеги — это HTML-элементы, которые живут внутри раздела head страницы и описывают документ браузерам, поисковым системам и социальным сетям, а не посетителям-людям. Сами по себе они никогда не отображаются на странице. Браузер читает их до того, как что-либо отрисовать, поэтому размещение имеет значение: каждый тег, который создаёт этот генератор, следует вставлять внутрь элемента head, в идеале повыше, перед любыми блокирующими отрисовку скриптами. Элемент title и объявление кодировки charset, в частности, должны располагаться как можно раньше, потому что браузер обязан знать кодировку символов до того, как разберёт остальную разметку.
Два важнейших фрагмента метаданных технически вообще не являются метатегами. Элемент title и каноническая ссылка (link rel="canonical") — это отдельные элементы, но они входят в тот же блок head и играют центральную роль в том, как воспринимается страница. Этот инструмент сосредоточен на тегах title, description, viewport, robots, Open Graph и Twitter Card, которые вместе охватывают метаданные, действительно влияющие на поиск и социальные сети.
Тег title: ваш самый важный сигнал на странице
Элемент title — это самый сильный SEO-сигнал на странице, которым вы управляете. Именно его Google обычно показывает как синий кликабельный заголовок в результатах поиска и который появляется на вкладке браузера. Стремитесь примерно к 50–60 символам, или около 580 пикселей, чтобы он не обрезался многоточием на странице результатов. Поставьте важнейшее ключевое слово ближе к началу, пишите для человека, который решает, кликать ли, и держите каждый заголовок уникальным по всему сайту. Шаблонный текст вроде названия бренда, повторяемого в начале каждого заголовка, расходует самое ценное место, которое у вас есть.
Частая ошибка — считать тег title и заголовок H1 взаимозаменяемыми. Они служат разным аудиториям: title предназначен для поискового сниппета и вкладки, а H1 — это заголовок на самой странице. Они могут различаться и часто должны, потому что идеальная формулировка для кликабельности в поисковой выдаче не всегда является лучшим заголовком для того, кто уже на странице.
Метаописание: клики, а не позиции
Метаописание напрямую не влияет на позиции, но сильно влияет на показатель кликабельности, а это важно. Относитесь к нему как к рекламному тексту: подытожьте страницу, включите основное ключевое слово, чтобы его можно было выделить жирным при совпадении с запросом, и добавьте причину кликнуть. Держите его в пределах примерно 150–160 символов; более длинные описания обрезаются, и Google часто переписывает описания, которые отсутствуют, дублируются или плохо соответствуют запросу, подставляя вместо них фрагмент из тела страницы.
Поскольку Google может проигнорировать ваше описание и синтезировать своё, не полагайтесь на него для критически важной информации. Всё равно напишите сильное описание, ведь убедительное описание, которое уцелело, нередко превосходит автоматически сгенерированный фрагмент. Никогда не набивайте его ключевыми словами; это провоцирует переписывание и воспринимается пользователями как спам.
Метатег robots и управление сканированием
Метатег robots сообщает поисковым системам, что делать после того, как они просканировали страницу. Самые распространённые значения — index/noindex (может ли страница появляться в результатах) и follow/nofollow (должны ли ссылки на ней передавать вес). Значение вроде noindex, follow удерживает страницу вне индекса, при этом по-прежнему позволяя сканерам проходить по её ссылкам, что полезно для «тонких» страниц, таких как результаты внутреннего поиска или версии для печати. Другие директивы включают noarchive, nosnippet и max-snippet для тонкого контроля над тем, как отображается результат.
Важное различие: метатег robots управляет индексацией, а файл robots.txt управляет сканированием. Они не взаимозаменяемы. Если вы заблокируете URL в robots.txt, Google может никогда не увидеть тег noindex на этой странице, потому что не сможет просканировать её, чтобы его прочитать, и URL всё равно может появиться в результатах в виде голой ссылки. Чтобы надёжно убрать страницу из поиска, оставьте её доступной для сканирования и примените noindex.
Viewport, charset и технические основы
Тег viewport, width=device-width, initial-scale=1.0, — это то, что делает страницу адаптивной для мобильных устройств. Без него мобильные браузеры отрисовывают страницу в ширину десктопа и сжимают её, что приводит к крошечному тексту и плохому опыту на мобильном. Поскольку Google индексирует мобильную версию страниц в первую очередь, отсутствующий или неправильно настроенный тег viewport — это реальная проблема для позиций и удобства, а не косметическая. Объявление charset, почти всегда UTF-8, гарантирует, что специальные символы и эмодзи отображаются правильно, а не как «кракозябры».
Эти два тега невелики, но обязательны. Установите viewport в ширину устройства, избегайте отключения масштабирования пользователем через maximum-scale или user-scalable=no (что вредит доступности) и объявляйте кодировку UTF-8 на каждой странице.
Open Graph и Twitter Card для предпросмотров в соцсетях
Теги Open Graph (семейство og:) управляют тем, как ваша ссылка выглядит при вставке в Facebook, LinkedIn, Slack, Discord и многие другие платформы. Базовый набор — это og:title, og:description, og:image, og:url и og:type. Теги Twitter Card (семейство twitter:) делают то же самое для X, причём наиболее привлекающий внимание вариант — twitter:card со значением summary_large_image. Указывайте og:image размером около 1200 на 630 пикселей и всегда используйте для него абсолютные URL; относительные пути к изображению — самая частая причина, по которой в предпросмотре не показывается миниатюра.
Социальные платформы кэшируют то, что собирают, поэтому после изменения этих тегов вам часто нужно повторно собрать данные страницы с помощью инструмента отладки платформы (например, Sharing Debugger от Facebook), чтобы сбросить старый предпросмотр. Если тег отсутствует, большинство платформ откатываются к обычным title и description, но результатом будет более простая, менее кликабельная карточка.
Теги, которые больше не помогают, и частые ошибки
Метатег keywords мёртв для SEO. Google много лет назад подтвердил, что полностью игнорирует мета-ключевые слова, и поскольку он открыто транслировал ваши целевые термины конкурентам, его заполнение в лучшем случае бесполезно, а в худшем — небольшая утечка информации. Этот генератор включает поле ключевых слов ради полноты и устаревших систем, но не ждите от него никакой пользы для позиций. Другие устаревшие теги, такие как meta revisit-after и meta author, также не влияют на позиции в Google.
Самые частые реальные ошибки таковы: дублирующиеся title и description на множестве страниц, title и description, превышающие пределы отображения и обрезаемые, отсутствующие канонические теги на страницах, доступных по нескольким URL, относительные URL в og:image и случайно выпущенный общесайтовый noindex, оставшийся от тестового окружения. Всегда проверяйте итоговый отрисованный head через просмотр исходного кода или инструменты разработчика браузера, поскольку JavaScript-фреймворки иногда внедряют или перезаписывают метатеги после загрузки исходного HTML.
Часто задаваемые вопросы
Какие meta-теги создаёт этот генератор?
Для чего нужны теги Open Graph и Twitter Card?
Какой длины должны быть заголовок и описание?
Какой размер изображения использовать для тегов OG?
Куда поместить сгенерированные теги?
Похожие инструменты
Продолжайте работу с этими удобными инструментами