title и meta description

Два самых заметных в выдаче тега, которые задаются в коде: title и meta description.

<title> — заголовок страницы (синяя ссылка в выдаче и подпись вкладки). meta description — текстовое описание под ним. Это первое, что видит и оценивает пользователь.

Тег title

<title> — один из сильнейших on-page сигналов и одновременно ваш «заголовок объявления» в выдаче. Правила:

Уникальный на каждой странице. Дублирующиеся title — частый признак проблем с шаблоном.
~50–60 символов. Длиннее — Google обрежет в выдаче многоточием.
Главное — в начало. Сначала суть страницы, потом бренд: Гайд по canonical — CodeChick.
Не пихать ключевые слова списком. «SEO, оптимизация, продвижение, раскрутка» выглядит как спам.

<head>
  <title>Что такое canonical и как убрать дубли — CodeChick</title>
</head>

title — это и сигнал, и реклама

У тега title двойная роль, и их легко перепутать. С одной стороны, это сигнал ранжирования: поисковик учитывает слова в заголовке, оценивая, о чём страница. С другой — это рекламный заголовок в выдаче, по которому человек решает, кликнуть или пролистнуть. Хороший title удовлетворяет обоим: содержит ключевое слово по делу (для машины) и при этом читается как осмысленное обещание (для человека). Перекос в любую сторону вредит: набитый ключами заголовок отпугивает людей, а слишком «креативный» без сути теряет релевантность для поисковика.

Meta description

Описание не влияет на ранжирование напрямую, но влияет на CTR — кликнут ли по вашему сниппету. Хорошее описание — это «рекламный текст» на ~150–160 символов, который точно отражает содержимое и подталкивает к клику.

<meta name="description"
  content="Разбираем тег canonical: как он схлопывает дубли страниц,
  где его ставить и какие ошибки ломают индексацию. С примерами кода.">

Если описания нет или оно плохое, Google сам соберёт сниппет из текста страницы — но контроль вы при этом теряете.

Как это выглядит в выдаче

┌────────────────────────────────────────────────┐
│ Что такое canonical и как убрать дубли — Codech… │  <- title
│ https://codechick.io › tutorials › seo          │  <- URL
│ Разбираем тег canonical: как он схлопывает дуб…  │  <- description
└────────────────────────────────────────────────┘

Как работает под капотом: генерация в шаблоне

В реальных проектах title и description формируются в шаблоне/коде из данных страницы. Логика обычно такая: взять заголовок сущности, добавить бренд, обрезать до лимита. Смоделируем её на JS:

const BRAND = "CodeChick";
const TITLE_MAX = 60;
const DESC_MAX = 160;

function buildTitle(pageTitle) {
  const full = `${pageTitle} — ${BRAND}`;
  return full.length <= TITLE_MAX ? full : full.slice(0, TITLE_MAX - 1) + "…";
}

function buildDescription(text) {
  const clean = text.replace(/\s+/g, " ").trim();
  return clean.length <= DESC_MAX ? clean : clean.slice(0, DESC_MAX - 1) + "…";
}

console.log(buildTitle("Что такое canonical и как убрать дубли страниц"));
console.log(buildDescription("Тег canonical схлопывает дубли. " +
  "Ставится в head. Указывает на главную версию страницы среди похожих."));

Вывод:

Что такое canonical и как убрать дубли страниц — Co…
Тег canonical схлопывает дубли. Ставится в head. Указывает на главную версию страницы среди похожих.

Частые ошибки

Пустой или отсутствующий title на части страниц (часто в SPA: title не обновляется при смене роута).
Одинаковый title на тысячах страниц — зашит в общий шаблон.
Description-простыня на 500 символов — Google всё равно обрежет, лучше уложиться в ~160.
Несколько тегов title/description в head — поисковик возьмёт первый, остальное мусор.

Итог

title — сильный сигнал и заголовок сниппета: уникальный, ~60 символов, суть в начало.
meta description не ранжирует напрямую, но влияет на CTR; держите ~160 символов.
В SPA следите, чтобы оба тега обновлялись при смене маршрута, а не оставались от стартовой страницы.