Ты когда-нибудь замечал, что когда делишься ссылкой в 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 (кликабельность).
Когда ты делишься ссылкой в 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 пикселей — иначе будет некрасиво.
<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" /><!-- Разрешить индексацию (по умолчанию) -->
<meta name="robots" content="index, follow" />
<!-- Запретить индексацию страницы -->
<meta name="robots" content="noindex, nofollow" />
<!-- Индексировать, но не следовать по ссылкам -->
<meta name="robots" content="index, nofollow" />noindex используй для служебных страниц: личный кабинет, корзина, страница 404.
Если один и тот же контент доступен по нескольким 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)Ты когда-нибудь замечал, что когда делишься ссылкой в 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 (кликабельность).
Когда ты делишься ссылкой в 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 пикселей — иначе будет некрасиво.
<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" /><!-- Разрешить индексацию (по умолчанию) -->
<meta name="robots" content="index, follow" />
<!-- Запретить индексацию страницы -->
<meta name="robots" content="noindex, nofollow" />
<!-- Индексировать, но не следовать по ссылкам -->
<meta name="robots" content="index, nofollow" />noindex используй для служебных страниц: личный кабинет, корзина, страница 404.
Если один и тот же контент доступен по нескольким 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".