Что такое мета-теги — и почему их видят в поиске, а на сайте нет
Закинь любую ссылку в Телеграм. Через секунду под ней всплывает карточка: заголовок, описание, картинка. Откуда мессенджер всё это взял, если на странице ничего такого нет?
Ответ — мета-теги. Это короткие подписи в коде страницы, которые человек на сайте не видит, но видят все машины: поисковики, мессенджеры, соцсети. Самое странное и важное: мета-теги — это первое (и часто единственное), что человек узнаёт о твоей странице до того, как на неё зайдёт. Поэтому пустые теги — это упущенные посетители.
Где они живут
Мета-теги сидят в начале HTML, в блоке <head> — служебной шапке страницы. Пользователь её не видит, она не рисуется на экране. Выглядит примерно так:
<title>Трекер воды — пей по стакану каждый час</title>
<meta name="description" content="Бесплатная напоминалка пить воду. Ставишь цель — приложение пингует, пока не выпьешь.">
title — синяя ссылка в Google и заголовок вкладки в браузере. description — серый текст под ссылкой. Всё. Эти две строчки решают, кликнет человек или пролистнёт мимо.
Две главные пары
Тегов много, но новичку важны два набора.
Для поиска — title и description. Они работают в SEO: по ним Google понимает, о чём страница, и формирует сниппет в выдаче.
Для ссылок-превью — Open Graph (og:title, og:description, og:image). Это то, что рисует красивую карточку, когда ссылку кидают в Телеграм, ВК или Slack. Без og:image твоя ссылка выглядит голой и серой — и её реже открывают.
Хорошая новость: часто title/description и og:-теги дублируют друг друга, так что пишешь по сути два текста, а закрываешь оба фронта.
Как написать так, чтобы кликали
Это не про SEO-заклинания, а про честное обещание. Пара правил:
title— до ~60 символов. Длиннее — Google обрежет и поставит «…». Главное слово (что ищут) — ближе к началу.description— 120–160 символов. Это не место для воды: одно предложение, которое говорит «вот что ты получишь, если зайдёшь».- Каждой странице — свой. Один
titleна весь сайт — частая ошибка. Страница «О приложении» и страница «Цены» ищутся по разным словам. og:image— простая картинка с крупным текстом. Её увидят мелкой, в ленте; мелкие детали не читаются.
Сделай мета-теги для моего сайтаВидишь разницу? Слабый промпт даст generic-заглушки. Сильный — задаёт длины, ключевое слово и тон, и на выходе теги, которые реально работают.
Частые вопросы
Мета-теги влияют на позицию в поиске?
title — да, заметно: это один из сильнейших сигналов о теме страницы. description напрямую на позицию почти не влияет, но влияет на кликабельность — а это Google уже учитывает. og:-теги на поиск не влияют, они про превью ссылок.
Ключевое слово keywords ещё нужно?
Нет. Мета-тег keywords поисковики игнорируют уже больше десяти лет — туда когда-то пихали мусор, и его перестали учитывать. Не трать на него время.
Их надо прописывать руками?
Зависит от инструмента. В конструкторах сайтов есть поля «заголовок» и «описание» — это они и есть. Во фреймворках (Next.js и подобных) теги задаются в коде. Но смысл один: каждой странице — осмысленный заголовок и описание.
Когда будешь деплоить сайт, проверь title и og:image до публикации — починить их потом можно, но первое впечатление в поиске уже сложится. Это часть чеклиста перед запуском.
Короткие уроки-истории, симулятор агента и ежедневная практика — в нашем мобильном приложении. Бесплатно.
Читайте дальше
Что такое DOM — и почему «исходный код» страницы тебе врёт
Что такое REST API — и почему сервер каждый раз тебя «забывает»
Что такое React — и почему ты больше не трогаешь страницу руками
Что такое CORS — и почему ошибка в консоли это защита, а не баг
Что такое JWT — и почему сервер тебя не помнит, но всё равно пускает
