[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-html-chto-takoe-meta-tegi-i-dlya-chego-oni-nuzhny":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":19,"progress":20,"seo":21},1253,"chto-takoe-meta-tegi-i-dlya-chego-oni-nuzhny",39,"osnovy-html","Основы HTML","📄","Что такое мета-теги и для чего они нужны","Мета-теги — это элементы `\u003Cmeta>` внутри `\u003Chead>`, которые содержат метаданные о HTML-документе: кодировку, описание для поисковиков, настройки отображения на мобильных устройствах и информацию для социальных сетей.\n\n### Основные мета-теги\n\n**Кодировка документа** — определяет набор символов. `UTF-8` поддерживает кириллицу и все алфавиты:\n```html\n\u003Cmeta charset=\"UTF-8\">\n```\n\n**Адаптивность (viewport)** — управляет масштабированием на мобильных устройствах:\n```html\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n```\n\n**Описание страницы (SEO)** — используется поисковыми системами для сниппета:\n```html\n\u003Cmeta name=\"description\" content=\"Руководство по подготовке к собеседованию Java Developer\">\n```\n\n**Ключевые слова** — ранее важны для SEO, сейчас большинство поисковиков игнорирует:\n```html\n\u003Cmeta name=\"keywords\" content=\"Java, Spring, собеседование\">\n```\n\n### HTTP-equiv мета-теги\n\nПозволяют задать аналоги HTTP-заголовков прямо в HTML:\n\n| Мета-тег | Назначение |\n|----------|-----------|\n| `\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">` | Совместимость с IE |\n| `\u003Cmeta http-equiv=\"refresh\" content=\"30\">` | Автообновление через 30 сек |\n| `\u003Cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'\">` | Политика безопасности |\n\n### Open Graph теги (для социальных сетей)\n\nОпределяют, как страница отображается при публикации ссылки в VK, Telegram, Facebook:\n\n```html\n\u003Cmeta property=\"og:title\" content=\"Вопросы для собеседования Java Developer\">\n\u003Cmeta property=\"og:description\" content=\"Полный список вопросов с ответами\">\n\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Fexample.com\u002Fpreview.png\">\n\u003Cmeta property=\"og:url\" content=\"https:\u002F\u002Fexample.com\u002Fjava-interview\">\n\u003Cmeta property=\"og:type\" content=\"article\">\n```\n\n### Полный пример блока head\n\n```html\n\u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \u003Cmeta name=\"description\" content=\"Вопросы и ответы для собеседования\">\n    \u003Cmeta property=\"og:title\" content=\"Java Interview\">\n    \u003Cmeta property=\"og:description\" content=\"Подготовка к собеседованию\">\n    \u003Cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self'\">\n    \u003Ctitle>Java Interview Preparation\u003C\u002Ftitle>\n\u003C\u002Fhead>\n```\n\n### Частые ошибки\n\n- Забывают `\u003Cmeta charset=\"UTF-8\">` — кириллица отображается некорректно\n- Не добавляют `viewport` — на мобильных устройствах страница выглядит мелкой\n- Дублируют мета-теги — браузер использует первый найденный\n- Размещают `charset` далеко от начала `\u003Chead>` — должен быть в первых 1024 байтах\n\n### Как используется в 2026\n\nВ Spring Boot мета-теги задаются через Thymeleaf. Content-Security-Policy настраивается через мета-тег или HTTP-заголовок для защиты от XSS-атак. Java-бэкенд может динамически генерировать Open Graph теги для улучшения превью при шеринге ссылок.\n\n> **На собеседовании:** назовите три обязательных мета-тега: `charset` (кодировка), `viewport` (мобильные), `description` (SEO). Упомяните Open Graph для соцсетей. Покажите понимание, что `charset` должен быть в первых 1024 байтах документа, а `viewport` обязателен для мобильных устройств.","","middle",[15,16,17,18],"security","html","seo","frontend",[],null,{"title":22,"description":23,"ogTitle":24,"ogDescription":25,"keywords":26,"schemaAnswer":37,"featuredSnippetReady":38},"Что такое мета-теги и для чего они нужны — Gymterview","Мета-теги в HTML: charset, viewport, description, Open Graph, Content-Security-Policy. Обязательные мета-теги, частые ошибки и генерация через Thymeleaf.","Мета-теги в HTML: charset, viewport, description, Open Graph — Gymterview","Обзор мета-тегов: charset (кодировка), viewport (мобильные), description (SEO), Open Graph (соцсети), CSP (безопасность).",[27,28,29,30,31,32,33,34,35,36],"мета-теги","meta","charset","viewport","description","Open Graph","og:title","Content-Security-Policy","SEO","собеседование","Мета-теги — элементы \u003Cmeta> внутри \u003Chead>, содержащие метаданные о документе. Основные: charset (кодировка, UTF-8), viewport (масштабирование на мобильных), description (SEO-сниппет). Также существуют http-equiv мета-теги (Content-Security-Policy), Open Graph (превью в соцсетях). charset должен быть в первых 1024 байтах документа.",true]