Комментарии (1)
Ответ сгенерирован нейросетью и может содержать ошибки
Метатеги в HTML
Метатеги — это элементы в <head>, которые предоставляют информацию о странице. Рассмотрим основные типы.
Базовые метатеги
charset — Кодировка: <meta charset="UTF-8">
viewport — Адаптивность мобильных:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
description — SEO описание (160-320 символов):
<meta name="description" content="Ваше описание страницы">
keywords — Ключевые слова (устаревший):
<meta name="keywords" content="javascript, frontend">
SEO метатеги
robots — Инструкции ботам:
<meta name="robots" content="index, follow">
canonical — Основная версия страницы:
<link rel="canonical" href="https://example.com/page">
Open Graph (социальные сети)
<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Описание">
<meta property="og:image" content="https://example.com/img.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com">
Волшебство шаринга в Facebook, Instagram, VK.
Twitter Card
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Заголовок">
<meta name="twitter:description" content="Описание">
<meta name="twitter:image" content="https://example.com/img.jpg">
Производительность
preload — Предзагрузить критичный ресурс:
<link rel="preload" href="/font.woff2" as="font" crossorigin>
prefetch — Загрузить если будет нужен:
<link rel="prefetch" href="/next-page.js">
dns-prefetch — Разрешить DNS заранее:
<link rel="dns-prefetch" href="https://cdn.example.com">
Безопасность
Content-Security-Policy — Защита от XSS:
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self' cdn.js">
Мобильные приложения
theme-color — Цвет интерфейса браузера:
<meta name="theme-color" content="#FF6B6B">
apple-mobile-web-app — iOS Web App:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="My App">
<link rel="apple-touch-icon" href="/icon.png">
Международность
lang — Язык страницы:
<html lang="ru">
hreflang — Альтернативные языки:
<link rel="alternate" hreflang="en" href="https://example.com/en/">
<link rel="alternate" hreflang="ru" href="https://example.com/ru/">
Структурированные данные
JSON-LD — Schema.org разметка:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Заголовок",
"author": {"@type": "Person", "name": "Иван"}
}
</script>
Помогает поисковикам и соцсетям лучше понимать контент.
Пример полного набора
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Ваше описание">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0066CC">
<meta property="og:title" content="Заголовок">
<meta property="og:image" content="/og.jpg">
<meta property="og:type" content="website">
<link rel="canonical" href="https://example.com">
<link rel="preload" href="/font.woff2" as="font" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">
<title>Заголовок - Описание</title>
</head>
<body>
Контент
</body>
</html>
Практическое применение
SEO значимые: description, robots, canonical, og:* теги критичны для поиска и шаринга.
Доступность: viewport, lang атрибут, alt для изображений.
Производительность: preload часто используемых ресурсов, prefetch для следующих страниц.
Безопасность: CSP защищает от инъекций и XSS атак.
Мобильные: theme-color улучшает UX на мобильных устройствах.
Метатеги — это невидимый фундамент, который определяет как поисковики индексируют вашу страницу, как она выглядит в социальных сетях и как быстро загружается контент.