← HTML & CSS/Мета-теги и SEO#13 из 383← ПредыдущийСледующий →+15 XP
Полезно по теме:Гайд: старт в frontendПрактика: DOM и событияТермин: DOMМаршрут: старт с нуля

Мета-теги и SEO

Ты когда-нибудь замечал, что когда делишься ссылкой в Telegram или ВКонтакте, появляется красивая карточка с картинкой и описанием? Это не магия — это Open Graph мета-теги. Или почему один сайт стоит на первом месте в поиске, а другой — на десятой странице? Во многом из-за правильно заполненных мета-тегов.

Что такое мета-теги

Мета-теги живут в <head> и передают информацию о странице браузерам, поисковикам и социальным сетям. Пользователь их не видит, но они критичны для SEO и распространения контента.

Базовые мета-теги

<head>
  <!-- Кодировка — всегда первым -->
  <meta charset="UTF-8" />

  <!-- Адаптивность под мобильные -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Описание страницы для поисковиков (150-160 символов) -->
  <meta name="description" content="Лучший интернет-магазин кроссовок. Более 5000 моделей Nike, Adidas, Puma с доставкой по России." />

  <!-- Заголовок страницы (до 60 символов) -->
  <title>Кроссовки купить — Sneaker Shop | Москва</title>
</head>

Google показывает description в сниппете поиска под ссылкой. Хорошее описание повышает CTR (кликабельность).

Open Graph — красивые превью в соцсетях

Когда ты делишься ссылкой в Telegram или ВКонтакте, соцсеть читает Open Graph теги:

<meta property="og:title" content="Nike Air Max 90 — купить в Sneaker Shop" />
<meta property="og:description" content="Классические кроссовки Nike Air Max 90. Белые, размеры 36-47. Доставка за 1 день." />
<meta property="og:image" content="https://sneakershop.ru/og/air-max.jpg" />
<meta property="og:url" content="https://sneakershop.ru/nike/air-max-90" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="ru_RU" />

og:image должен быть минимум 1200×630 пикселей — иначе будет некрасиво.

Twitter Cards — превью в Twitter/X

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Nike Air Max 90" />
<meta name="twitter:description" content="Классические кроссовки Nike Air Max 90" />
<meta name="twitter:image" content="https://sneakershop.ru/twitter/air-max.jpg" />

robots — управление индексацией

<!-- Разрешить индексацию (по умолчанию) -->
<meta name="robots" content="index, follow" />

<!-- Запретить индексацию страницы -->
<meta name="robots" content="noindex, nofollow" />

<!-- Индексировать, но не следовать по ссылкам -->
<meta name="robots" content="index, nofollow" />

noindex используй для служебных страниц: личный кабинет, корзина, страница 404.

canonical — борьба с дублями

Если один и тот же контент доступен по нескольким URL, поисковик наказывает за дублирование:

<!-- На странице /nike/air-max-90?color=white&size=42 -->
<link rel="canonical" href="https://sneakershop.ru/nike/air-max-90" />

Canonical говорит: «Считай эту страницу основной, остальные — её копии».

Типичные ошибки

Ошибка 1: Одинаковый title и description на всех страницах

Каждая страница должна иметь уникальные title и description. Шаблонные «Главная страница» — это потеря позиций.

Ошибка 2: title длиннее 60 символов

Google обрезает title в поиске. Пиши ёмко: основной ключ + бренд.

Ошибка 3: description длиннее 160 символов

Обрежется в поиске с многоточием. Вмести самое важное в 150 символов.

Ошибка 4: og:image маленького размера

Telegram и ВКонтакте требуют минимум 1200×630px. Маленькая картинка отображается некрасиво или вовсе не отображается.

Ошибка 5: Забыть og:image вообще

<!-- Нет og:image — соцсеть сама выберет случайную картинку со страницы -->
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<!-- Нет og:image — плохо -->

В реальных проектах

В Next.js мета-теги задаются через Metadata API. В SPA (React, Vue) мета-теги обновляются динамически через react-helmet или useHead. Инструменты проверки: Facebook Sharing Debugger, Twitter Card Validator, og:image size 1200×630.

Примеры

Чтение и анализ мета-тегов страницы

// Читаем мета-теги текущей страницы
const allMeta = document.querySelectorAll('meta')

console.log('Всего мета-тегов:', allMeta.length)
console.log('Заголовок страницы:', document.title)

// Ищем конкретные мета-теги
function getMeta(name) {
  const el = document.querySelector('meta[name="' + name + '"]')
  return el ? el.getAttribute('content') : null
}

function getOG(property) {
  const el = document.querySelector('meta[property="og:' + property + '"]')
  return el ? el.getAttribute('content') : null
}

const description = getMeta('description')
const viewport = getMeta('viewport')

console.log('description:', description || '(не задан)')
console.log('viewport:', viewport || '(не задан)')

// Имитируем Open Graph теги
const ogData = {
  title: getOG('title') || 'Road to JS — учим JavaScript',
  description: getOG('description') || 'Интерактивный курс JavaScript для начинающих',
  image: getOG('image') || 'https://roadtojs.ru/og-image.jpg',
  url: getOG('url') || window.location.href,
}

console.log('--- Open Graph ---')
Object.entries(ogData).forEach(([key, val]) => {
  console.log('og:' + key + ' = ' + val)
})

Генерация и валидация SEO мета-тегов для страницы

// SEO-аудит мета-тегов
function auditSEO(page) {
  const issues = []
  const warnings = []

  // Проверяем title
  if (!page.title) {
    issues.push('КРИТИЧНО: нет title')
  } else if (page.title.length > 60) {
    warnings.push('title слишком длинный (' + page.title.length + ' симв., лимит 60)')
  } else if (page.title.length < 10) {
    warnings.push('title слишком короткий (' + page.title.length + ' симв.)')
  } else {
    console.log('OK title: "' + page.title + '" (' + page.title.length + ' симв.)')
  }

  // Проверяем description
  if (!page.description) {
    issues.push('КРИТИЧНО: нет meta description')
  } else if (page.description.length > 160) {
    warnings.push('description слишком длинный (' + page.description.length + ' симв., лимит 160)')
  } else {
    console.log('OK description (' + page.description.length + ' симв.)')
  }

  // Проверяем og:image
  if (!page.ogImage) {
    warnings.push('Нет og:image — превью в соцсетях будет без картинки')
  } else {
    console.log('OK og:image: ' + page.ogImage)
  }

  // Выводим проблемы
  if (issues.length) {
    issues.forEach(i => console.log('ОШИБКА: ' + i))
  }
  if (warnings.length) {
    warnings.forEach(w => console.log('ПРЕДУПРЕЖДЕНИЕ: ' + w))
  }

  return { issues: issues.length, warnings: warnings.length }
}

const result = auditSEO({
  title: 'Купить кроссовки Nike Air Max 90 — Sneaker Shop | Москва и вся Россия',
  description: 'Оригинальные кроссовки Nike Air Max 90 в наличии. Размеры 36-47. Доставка 1-2 дня.',
  ogImage: 'https://sneakershop.ru/og/nike-air-max.jpg',
})

console.log('Ошибок: ' + result.issues + ', Предупреждений: ' + result.warnings)

Мета-теги и SEO

Ты когда-нибудь замечал, что когда делишься ссылкой в Telegram или ВКонтакте, появляется красивая карточка с картинкой и описанием? Это не магия — это Open Graph мета-теги. Или почему один сайт стоит на первом месте в поиске, а другой — на десятой странице? Во многом из-за правильно заполненных мета-тегов.

Что такое мета-теги

Мета-теги живут в <head> и передают информацию о странице браузерам, поисковикам и социальным сетям. Пользователь их не видит, но они критичны для SEO и распространения контента.

Базовые мета-теги

<head>
  <!-- Кодировка — всегда первым -->
  <meta charset="UTF-8" />

  <!-- Адаптивность под мобильные -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Описание страницы для поисковиков (150-160 символов) -->
  <meta name="description" content="Лучший интернет-магазин кроссовок. Более 5000 моделей Nike, Adidas, Puma с доставкой по России." />

  <!-- Заголовок страницы (до 60 символов) -->
  <title>Кроссовки купить — Sneaker Shop | Москва</title>
</head>

Google показывает description в сниппете поиска под ссылкой. Хорошее описание повышает CTR (кликабельность).

Open Graph — красивые превью в соцсетях

Когда ты делишься ссылкой в Telegram или ВКонтакте, соцсеть читает Open Graph теги:

<meta property="og:title" content="Nike Air Max 90 — купить в Sneaker Shop" />
<meta property="og:description" content="Классические кроссовки Nike Air Max 90. Белые, размеры 36-47. Доставка за 1 день." />
<meta property="og:image" content="https://sneakershop.ru/og/air-max.jpg" />
<meta property="og:url" content="https://sneakershop.ru/nike/air-max-90" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="ru_RU" />

og:image должен быть минимум 1200×630 пикселей — иначе будет некрасиво.

Twitter Cards — превью в Twitter/X

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Nike Air Max 90" />
<meta name="twitter:description" content="Классические кроссовки Nike Air Max 90" />
<meta name="twitter:image" content="https://sneakershop.ru/twitter/air-max.jpg" />

robots — управление индексацией

<!-- Разрешить индексацию (по умолчанию) -->
<meta name="robots" content="index, follow" />

<!-- Запретить индексацию страницы -->
<meta name="robots" content="noindex, nofollow" />

<!-- Индексировать, но не следовать по ссылкам -->
<meta name="robots" content="index, nofollow" />

noindex используй для служебных страниц: личный кабинет, корзина, страница 404.

canonical — борьба с дублями

Если один и тот же контент доступен по нескольким URL, поисковик наказывает за дублирование:

<!-- На странице /nike/air-max-90?color=white&size=42 -->
<link rel="canonical" href="https://sneakershop.ru/nike/air-max-90" />

Canonical говорит: «Считай эту страницу основной, остальные — её копии».

Типичные ошибки

Ошибка 1: Одинаковый title и description на всех страницах

Каждая страница должна иметь уникальные title и description. Шаблонные «Главная страница» — это потеря позиций.

Ошибка 2: title длиннее 60 символов

Google обрезает title в поиске. Пиши ёмко: основной ключ + бренд.

Ошибка 3: description длиннее 160 символов

Обрежется в поиске с многоточием. Вмести самое важное в 150 символов.

Ошибка 4: og:image маленького размера

Telegram и ВКонтакте требуют минимум 1200×630px. Маленькая картинка отображается некрасиво или вовсе не отображается.

Ошибка 5: Забыть og:image вообще

<!-- Нет og:image — соцсеть сама выберет случайную картинку со страницы -->
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<!-- Нет og:image — плохо -->

В реальных проектах

В Next.js мета-теги задаются через Metadata API. В SPA (React, Vue) мета-теги обновляются динамически через react-helmet или useHead. Инструменты проверки: Facebook Sharing Debugger, Twitter Card Validator, og:image size 1200×630.

Примеры

Чтение и анализ мета-тегов страницы

// Читаем мета-теги текущей страницы
const allMeta = document.querySelectorAll('meta')

console.log('Всего мета-тегов:', allMeta.length)
console.log('Заголовок страницы:', document.title)

// Ищем конкретные мета-теги
function getMeta(name) {
  const el = document.querySelector('meta[name="' + name + '"]')
  return el ? el.getAttribute('content') : null
}

function getOG(property) {
  const el = document.querySelector('meta[property="og:' + property + '"]')
  return el ? el.getAttribute('content') : null
}

const description = getMeta('description')
const viewport = getMeta('viewport')

console.log('description:', description || '(не задан)')
console.log('viewport:', viewport || '(не задан)')

// Имитируем Open Graph теги
const ogData = {
  title: getOG('title') || 'Road to JS — учим JavaScript',
  description: getOG('description') || 'Интерактивный курс JavaScript для начинающих',
  image: getOG('image') || 'https://roadtojs.ru/og-image.jpg',
  url: getOG('url') || window.location.href,
}

console.log('--- Open Graph ---')
Object.entries(ogData).forEach(([key, val]) => {
  console.log('og:' + key + ' = ' + val)
})

Генерация и валидация SEO мета-тегов для страницы

// SEO-аудит мета-тегов
function auditSEO(page) {
  const issues = []
  const warnings = []

  // Проверяем title
  if (!page.title) {
    issues.push('КРИТИЧНО: нет title')
  } else if (page.title.length > 60) {
    warnings.push('title слишком длинный (' + page.title.length + ' симв., лимит 60)')
  } else if (page.title.length < 10) {
    warnings.push('title слишком короткий (' + page.title.length + ' симв.)')
  } else {
    console.log('OK title: "' + page.title + '" (' + page.title.length + ' симв.)')
  }

  // Проверяем description
  if (!page.description) {
    issues.push('КРИТИЧНО: нет meta description')
  } else if (page.description.length > 160) {
    warnings.push('description слишком длинный (' + page.description.length + ' симв., лимит 160)')
  } else {
    console.log('OK description (' + page.description.length + ' симв.)')
  }

  // Проверяем og:image
  if (!page.ogImage) {
    warnings.push('Нет og:image — превью в соцсетях будет без картинки')
  } else {
    console.log('OK og:image: ' + page.ogImage)
  }

  // Выводим проблемы
  if (issues.length) {
    issues.forEach(i => console.log('ОШИБКА: ' + i))
  }
  if (warnings.length) {
    warnings.forEach(w => console.log('ПРЕДУПРЕЖДЕНИЕ: ' + w))
  }

  return { issues: issues.length, warnings: warnings.length }
}

const result = auditSEO({
  title: 'Купить кроссовки Nike Air Max 90 — Sneaker Shop | Москва и вся Россия',
  description: 'Оригинальные кроссовки Nike Air Max 90 в наличии. Размеры 36-47. Доставка 1-2 дня.',
  ogImage: 'https://sneakershop.ru/og/nike-air-max.jpg',
})

console.log('Ошибок: ' + result.issues + ', Предупреждений: ' + result.warnings)

Задание

Напиши полный HTML-документ с правильными мета-тегами для страницы курса "Road to JS". В <head> добавь: charset, viewport, title (до 60 символов), meta description (до 160 символов), Open Graph теги (og:title, og:description, og:image, og:url, og:type). Также добавь в body заглушку страницы.

Подсказка

charset должен быть "UTF-8". viewport: "width=device-width, initial-scale=1.0". Title до 60 символов. Description до 160. og:image требует полный URL с https://. og:type для обычного сайта — "website".

Загружаем среду выполнения...
Загружаем AI-помощника...