@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/functional/ru/meta.mdx

@@ -0,0 +1,1330 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/functional/ru/Classes/Meta'/>
+
+# Класс Meta
+
+Унифицированный класс для управления всеми типами мета-тегов: стандартные HTML, Open Graph и Twitter Card. Предоставляет единый интерфейс для работы с SEO-оптимизацией и социальными сетями, автоматически синхронизируя изменения между всеми платформами.
+
+## Основные возможности
+
+- **Унифицированный API** — одна точка входа для всех типов мета-тегов
+- **Автоматическая синхронизация** — изменения в Meta автоматически применяются к Open Graph и Twitter Card
+- **Управление заголовком** — поддержка суффикса для заголовка страницы (например, "Заголовок - Название сайта")
+- **Полная интеграция** — объединяет MetaManager, MetaOg и MetaTwitter
+- **Упрощенный интерфейс** — сокращает количество кода для установки мета-тегов
+- **Поддержка keywords** — работа с ключевыми словами в виде строки или массива
+- **Robots директивы** — управление индексацией и crawling
+- **SSR совместимость** — генерация HTML для серверного рендеринга
+
+## Конструктор
+
+### `constructor`
+
+Создает экземпляр Meta с интегрированной поддержкой Open Graph и Twitter Card. Автоматически инициализирует внутренние экземпляры MetaOg и MetaTwitter.
+
+```javascript
+import { Meta } from '@dxtmisha/functional'
+
+// Создание единого менеджера мета-тегов
+const meta = new Meta()
+
+// Класс автоматически управляет:
+// - Стандартными HTML мета-тегами (description, keywords, author, robots, canonical)
+// - Open Graph тегами (og:title, og:description, og:image, og:url, og:site_name, og:locale)
+// - Twitter Card тегами (twitter:card, twitter:title, twitter:description, twitter:image, twitter:site)
+```
+
+## Методы получения данных
+
+### `getTitle`
+
+Получает заголовок страницы без суффикса.
+
+**Возвращает:** `string` — заголовок страницы
+
+```javascript
+const meta = new Meta()
+
+// Установить заголовок с суффиксом
+meta.setSuffix('Мой Сайт')
+meta.setTitle('Главная страница')
+
+// document.title = "Главная страница - Мой Сайт"
+
+// Получить чистый заголовок (без суффикса)
+const title = meta.getTitle()
+// "Главная страница"
+
+// Использование в навигации
+const breadcrumb = meta.getTitle()
+
+// Проверка наличия
+if (meta.getTitle()) {
+  console.log('Заголовок установлен')
+}
+```
+
+### `getKeywords`
+
+Получает мета-тег keywords.
+
+**Возвращает:** `string` — ключевые слова через запятую
+
+```javascript
+const meta = new Meta()
+
+const keywords = meta.getKeywords()
+// "веб-разработка, javascript, vue, react"
+
+// Преобразование в массив
+const keywordsArray = keywords.split(', ')
+
+// Проверка наличия ключевого слова
+if (meta.getKeywords().includes('javascript')) {
+  console.log('Страница про JavaScript')
+}
+
+// Использование для фильтрации
+const tags = meta.getKeywords().split(', ')
+```
+
+### `getDescription`
+
+Получает мета-тег description.
+
+**Возвращает:** `string` — описание страницы
+
+```javascript
+const meta = new Meta()
+
+const description = meta.getDescription()
+// "Полное руководство по веб-разработке"
+
+// Проверка длины
+if (meta.getDescription().length > 160) {
+  console.warn('Описание слишком длинное для Google')
+}
+
+// Использование в превью
+const preview = meta.getDescription().substring(0, 100)
+
+// Для структурированных данных
+const schema = {
+  description: meta.getDescription()
+}
+```
+
+### `getImage`
+
+Получает URL изображения Open Graph.
+
+**Возвращает:** `string` — URL изображения
+
+```javascript
+const meta = new Meta()
+
+const imageUrl = meta.getImage()
+// "https://example.com/images/preview.jpg"
+
+// Предзагрузка
+const img = new Image()
+img.src = meta.getImage()
+
+// Использование в шаринге
+const shareData = {
+  title: meta.getTitle(),
+  text: meta.getDescription(),
+  image: meta.getImage()
+}
+
+// Проверка наличия
+if (!meta.getImage()) {
+  console.warn('Изображение для социальных сетей не установлено')
+}
+```
+
+### `getCanonical`
+
+Получает канонический URL.
+
+**Возвращает:** `string` — канонический URL
+
+```javascript
+const meta = new Meta()
+
+const canonicalUrl = meta.getCanonical()
+// "https://example.com/page"
+
+// Проверка совпадения с текущим URL
+if (meta.getCanonical() !== window.location.href) {
+  console.log('Canonical URL отличается от текущего')
+}
+
+// Использование для редиректов
+const canonical = meta.getCanonical()
+
+// Для sitemap
+const url = meta.getCanonical()
+```
+
+### `getRobots`
+
+Получает значение мета-тега robots.
+
+**Возвращает:** `MetaRobots` — директива для роботов
+
+```javascript
+const meta = new Meta()
+
+const robots = meta.getRobots()
+// "index, follow"
+
+// Проверка индексации
+if (meta.getRobots().includes('noindex')) {
+  console.log('Страница не должна индексироваться')
+}
+
+// Условная логика
+const isIndexable = !meta.getRobots().includes('noindex')
+
+// Для отладки
+console.log('Robots directive:', meta.getRobots())
+```
+
+### `getAuthor`
+
+Получает мета-тег author.
+
+**Возвращает:** `string` — имя автора
+
+```javascript
+const meta = new Meta()
+
+const author = meta.getAuthor()
+// "Иван Иванов"
+
+// Отображение информации об авторе
+console.log(`Автор: ${meta.getAuthor()}`)
+
+// Для структурированных данных
+const articleSchema = {
+  author: {
+    name: meta.getAuthor()
+  }
+}
+
+// Проверка авторства
+if (meta.getAuthor()) {
+  console.log('У контента есть автор')
+}
+```
+
+### `getSiteName`
+
+Получает название сайта Open Graph.
+
+**Возвращает:** `string` — название сайта
+
+```javascript
+const meta = new Meta()
+
+const siteName = meta.getSiteName()
+// "Мой Блог"
+
+// Использование в заголовке
+document.title = `${meta.getTitle()} | ${meta.getSiteName()}`
+
+// Для брендинга
+const brandName = meta.getSiteName()
+
+// В футере
+const footerText = `© 2024 ${meta.getSiteName()}`
+```
+
+### `getLocale`
+
+Получает локаль Open Graph.
+
+**Возвращает:** `string` — локаль (например, 'ru_RU')
+
+```javascript
+const meta = new Meta()
+
+const locale = meta.getLocale()
+// "ru_RU"
+
+// Определение языка
+const language = meta.getLocale().split('_')[0] // "ru"
+
+// Использование для i18n
+if (meta.getLocale().startsWith('ru')) {
+  console.log('Русскоязычный контент')
+}
+
+// Для hreflang
+const lang = meta.getLocale().replace('_', '-').toLowerCase()
+```
+
+### `getOg`
+
+Получает экземпляр MetaOg для расширенных операций с Open Graph.
+
+**Возвращает:** `MetaOg` — экземпляр класса MetaOg
+
+```javascript
+const meta = new Meta()
+
+// Получить доступ к MetaOg
+const og = meta.getOg()
+
+// Использовать специфичные методы Open Graph
+og.setType(MetaOpenGraphType.article)
+
+// Доступ ко всем методам MetaOg
+og.getType() // 'article'
+
+// Установка дополнительных OG тегов
+meta.getOg().setType(MetaOpenGraphType.video)
+
+// Цепочка вызовов
+meta.getOg()
+  .setType(MetaOpenGraphType.article)
+  .setLocale('ru_RU')
+
+// Использование для специфичных настроек
+const setupArticle = () => {
+  meta.setTitle('Статья')
+  meta.setDescription('Описание')
+
+  // Специфичные настройки Open Graph
+  meta.getOg().setType(MetaOpenGraphType.article)
+}
+```
+
+### `getTwitter`
+
+Получает экземпляр MetaTwitter для расширенных операций с Twitter Card.
+
+**Возвращает:** `MetaTwitter` — экземпляр класса MetaTwitter
+
+```javascript
+const meta = new Meta()
+
+// Получить доступ к MetaTwitter
+const twitter = meta.getTwitter()
+
+// Использовать специфичные методы Twitter Card
+twitter.setCard(MetaTwitterCard.summaryLargeImage)
+
+// Доступ ко всем методам MetaTwitter
+twitter.getCard() // 'summary_large_image'
+
+// Установка дополнительных Twitter тегов
+meta.getTwitter().setCard(MetaTwitterCard.player)
+
+// Цепочка вызовов
+meta.getTwitter()
+  .setCard(MetaTwitterCard.summaryLargeImage)
+  .setCreator('@author')
+
+// Использование для специфичных настроек
+const setupVideo = () => {
+  meta.setTitle('Видео')
+  meta.setDescription('Описание видео')
+
+  // Специфичные настройки Twitter Card
+  meta.getTwitter().setCard(MetaTwitterCard.player)
+}
+
+// Установка creator (не доступен через Meta напрямую)
+meta.getTwitter().setCreator('@john_doe')
+```
+
+## Методы установки данных
+
+### `setTitle`
+
+Устанавливает заголовок страницы с автоматическим добавлением суффикса и обновляет Open Graph и Twitter Card.
+
+**Параметры:**
+- `title: string` — заголовок страницы (без суффикса)
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Установить суффикс (обычно название сайта)
+meta.setSuffix('Мой Сайт')
+
+// Установить заголовок
+meta.setTitle('Главная страница')
+// document.title = "Главная страница - Мой Сайт"
+// og:title = "Главная страница - Мой Сайт"
+// twitter:title = "Главная страница - Мой Сайт"
+
+// Без суффикса
+const meta2 = new Meta()
+meta2.setTitle('Страница без суффикса')
+// document.title = "Страница без суффикса"
+
+// Динамическое обновление
+router.afterEach((to) => {
+  meta.setTitle(to.meta.title)
+})
+
+// Для разных страниц
+meta.setTitle('О компании')
+meta.setTitle('Контакты')
+meta.setTitle('Блог')
+
+// Цепочка вызовов
+meta
+  .setTitle('Новая страница')
+  .setDescription('Описание страницы')
+```
+
+### `setKeywords`
+
+Устанавливает мета-тег keywords. Принимает строку или массив.
+
+**Параметры:**
+- `keywords: string | string[]` — ключевые слова
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Строка
+meta.setKeywords('веб-разработка, javascript, vue, react')
+
+// Массив
+meta.setKeywords(['веб-разработка', 'javascript', 'vue', 'react'])
+// Результат: "веб-разработка, javascript, vue, react"
+
+// Из данных страницы
+const page = {
+  tags: ['javascript', 'tutorial', 'web']
+}
+meta.setKeywords(page.tags)
+
+// Динамическое добавление
+const existingKeywords = meta.getKeywords().split(', ')
+const newKeywords = [...existingKeywords, 'новое', 'ключевое', 'слово']
+meta.setKeywords(newKeywords)
+
+// Условное добавление
+const keywords = ['web']
+if (isJavaScriptArticle) {
+  keywords.push('javascript')
+}
+meta.setKeywords(keywords)
+
+// Примечание: хотя keywords менее важны для SEO,
+// они могут использоваться внутренним поиском
+```
+
+### `setDescription`
+
+Устанавливает мета-тег description.
+
+**Параметры:**
+- `description: string` — описание страницы
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Установка описания
+meta.setDescription('Полное руководство по веб-разработке с примерами кода и практическими заданиями')
+
+// Из данных контента
+meta.setDescription(article.excerpt)
+
+// Обрезка длинного текста
+const longDescription = article.content
+const shortDescription = longDescription.substring(0, 160)
+meta.setDescription(shortDescription)
+
+// Удаление HTML тегов
+const plainText = article.html.replace(/<[^>]*>/g, '')
+meta.setDescription(plainText.substring(0, 160))
+
+// Цепочка
+meta
+  .setDescription('Описание страницы')
+  .setKeywords(['web', 'dev'])
+
+// Рекомендации:
+// - Google отображает ~155-160 символов
+// - Yandex отображает ~150-160 символов
+// - Должно содержать ключевые слова
+// - Должно быть уникальным для каждой страницы
+```
+
+### `setImage`
+
+Устанавливает изображение для Open Graph и Twitter Card одновременно.
+
+**Параметры:**
+- `image: string` — URL изображения
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Установка изображения
+meta.setImage('https://example.com/images/preview.jpg')
+// Обновляет og:image и twitter:image
+
+// Абсолютный URL
+const imageUrl = new URL('/images/social-preview.jpg', window.location.origin).href
+meta.setImage(imageUrl)
+
+// Из данных контента
+meta.setImage(article.coverImage)
+
+// Fallback изображение
+meta.setImage(page.image || '/images/default-preview.jpg')
+
+// Для разных страниц
+if (isHomePage) {
+  meta.setImage('/images/home-preview.jpg')
+} else if (isArticle) {
+  meta.setImage(article.image)
+}
+
+// Цепочка
+meta
+  .setImage('https://example.com/image.jpg')
+  .setTitle('Заголовок')
+
+// Рекомендуемый размер: 1200x630 px
+// Минимальный размер: 600x315 px
+// Форматы: JPG, PNG, WebP
+```
+
+### `setCanonical`
+
+Устанавливает канонический URL и автоматически обновляет og:url и twitter:url.
+
+**Параметры:**
+- `canonical: string` — канонический URL
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Установка canonical
+meta.setCanonical('https://example.com/page')
+// Обновляет:
+// - <link rel="canonical" href="https://example.com/page">
+// - og:url = "https://example.com/page"
+// - twitter:url = "https://example.com/page"
+
+// Текущий URL
+meta.setCanonical(window.location.href)
+
+// Очистка параметров
+const cleanUrl = `${window.location.origin}${window.location.pathname}`
+meta.setCanonical(cleanUrl)
+
+// Для пагинации (все страницы указывают на первую)
+meta.setCanonical('https://example.com/articles')
+
+// Для SPA
+router.afterEach((to) => {
+  const url = `https://example.com${to.path}`
+  meta.setCanonical(url)
+})
+
+// Для дублирующего контента
+meta.setCanonical(originalArticleUrl)
+
+// Цепочка
+meta
+  .setCanonical('https://example.com/page')
+  .setTitle('Заголовок')
+```
+
+### `setRobots`
+
+Устанавливает мета-тег robots для управления индексацией.
+
+**Параметры:**
+- `robots: MetaRobots` — директива robots
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+import { Meta, MetaRobots } from '@dxtmisha/functional'
+
+const meta = new Meta()
+
+// Разрешить индексацию (по умолчанию)
+meta.setRobots(MetaRobots.indexFollow)
+// <meta name="robots" content="index, follow">
+
+// Запретить индексацию
+meta.setRobots(MetaRobots.noindexNofollow)
+// <meta name="robots" content="noindex, nofollow">
+
+// Индексировать, но не следовать по ссылкам
+meta.setRobots(MetaRobots.indexNofollow)
+
+// Не индексировать, но следовать по ссылкам
+meta.setRobots(MetaRobots.noindexFollow)
+
+// Запретить кэширование
+meta.setRobots(MetaRobots.noarchive)
+
+// Не показывать сниппет
+meta.setRobots(MetaRobots.nosnippet)
+
+// Условная установка
+if (isDraftPage) {
+  meta.setRobots(MetaRobots.noindexNofollow)
+} else {
+  meta.setRobots(MetaRobots.indexFollow)
+}
+
+// Для закрытых страниц
+meta.setRobots(MetaRobots.noindexNofollow)
+
+// Для страниц с дублирующимся контентом
+meta.setRobots(MetaRobots.noindex)
+```
+
+### `setAuthor`
+
+Устанавливает мета-тег author.
+
+**Параметры:**
+- `author: string` — имя автора
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Установка автора
+meta.setAuthor('Иван Иванов')
+
+// Из данных пользователя
+meta.setAuthor(article.author.name)
+
+// Полное имя
+meta.setAuthor(`${user.firstName} ${user.lastName}`)
+
+// Для блога
+meta.setAuthor(post.author)
+
+// Условная установка
+if (article.author) {
+  meta.setAuthor(article.author.name)
+}
+
+// Цепочка
+meta
+  .setAuthor('Иван Иванов')
+  .setTitle('Статья')
+  .setDescription('Описание')
+
+// Для структурированных данных
+meta.setAuthor(author.name)
+```
+
+### `setSiteName`
+
+Устанавливает название сайта для Open Graph и Twitter Card одновременно.
+
+**Параметры:**
+- `siteName: string` — название сайта
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Установка названия сайта
+meta.setSiteName('Мой Блог')
+// Обновляет og:site_name и twitter:site
+
+// Из конфигурации
+meta.setSiteName(config.siteName)
+
+// Константа
+const SITE_NAME = 'WebDev Journal'
+meta.setSiteName(SITE_NAME)
+
+// Для брендинга
+meta.setSiteName('TechBlog')
+
+// Один раз при инициализации
+const meta = new Meta()
+meta.setSiteName('Мой Сайт')
+meta.setSuffix('Мой Сайт')
+
+// Цепочка
+meta
+  .setSiteName('Название Сайта')
+  .setTitle('Главная')
+
+// Рекомендации:
+// - Краткое и узнаваемое
+// - Соответствует бренду
+// - Используется в социальных сетях
+```
+
+### `setLocale`
+
+Устанавливает локаль для Open Graph.
+
+**Параметры:**
+- `locale: string` — локаль в формате language_TERRITORY
+
+**Возвращает:** `this` — для цепочечных вызовов
+
+```javascript
+const meta = new Meta()
+
+// Установка русской локали
+meta.setLocale('ru_RU')
+
+// Другие локали
+meta.setLocale('en_US') // Английский (США)
+meta.setLocale('en_GB') // Английский (Великобритания)
+meta.setLocale('uk_UA') // Украинский
+meta.setLocale('de_DE') // Немецкий
+meta.setLocale('fr_FR') // Французский
+
+// Автоматическое определение
+const userLocale = navigator.language.replace('-', '_')
+meta.setLocale(userLocale)
+
+// Из настроек i18n
+meta.setLocale(i18n.locale.replace('-', '_'))
+
+// Условная установка
+const locale = isRussian ? 'ru_RU' : 'en_US'
+meta.setLocale(locale)
+
+// При смене языка
+const changeLanguage = (lang) => {
+  const localeMap = {
+    'ru': 'ru_RU',
+    'en': 'en_US',
+    'de': 'de_DE'
+  }
+  meta.setLocale(localeMap[lang])
+}
+
+// Цепочка
+meta
+  .setLocale('ru_RU')
+  .setSiteName('Мой Сайт')
+```
+
+### `setSuffix`
+
+Устанавливает суффикс для автоматического добавления к заголовку страницы.
+
+**Параметры:**
+- `suffix?: string` — суффикс заголовка (необязательный)
+
+```javascript
+const meta = new Meta()
+
+// Установка суффикса
+meta.setSuffix('Мой Сайт')
+meta.setTitle('Главная')
+// document.title = "Главная - Мой Сайт"
+
+// Из конфигурации
+meta.setSuffix(config.siteName)
+
+// Удаление суффикса
+meta.setSuffix()
+meta.setTitle('Страница')
+// document.title = "Страница"
+
+// Условная установка
+if (showBranding) {
+  meta.setSuffix('Название Сайта')
+}
+
+// Разные суффиксы для разных разделов
+if (isBlog) {
+  meta.setSuffix('Блог | Мой Сайт')
+} else {
+  meta.setSuffix('Мой Сайт')
+}
+
+// Обычно устанавливается один раз при инициализации
+const initMeta = () => {
+  const meta = new Meta()
+  meta.setSuffix('Мой Сайт')
+  meta.setSiteName('Мой Сайт')
+  return meta
+}
+
+// Примечание: суффикс добавляется автоматически
+// в формате: "Заголовок - Суффикс"
+```
+
+### `html`
+
+Генерирует полный HTML для всех мета-тегов, включая Open Graph и Twitter Card.
+
+**Возвращает:** `string` — HTML-строка со всеми мета-тегами
+
+```javascript
+const meta = new Meta()
+
+// Настройка мета-тегов
+meta.setSuffix('Мой Сайт')
+meta.setSiteName('Мой Сайт')
+meta.setLocale('ru_RU')
+meta
+  .setTitle('Статья')
+  .setDescription('Описание статьи')
+  .setKeywords(['веб', 'javascript'])
+  .setImage('https://example.com/image.jpg')
+  .setCanonical('https://example.com/article')
+  .setAuthor('Иван Иванов')
+
+// Получить HTML всех мета-тегов
+const metaHTML = meta.html()
+
+// Результат включает:
+// - Стандартные HTML мета-теги (description, keywords, author, canonical)
+// - Open Graph теги (og:title, og:description, og:image, og:url, og:site_name, og:locale)
+// - Twitter Card теги (twitter:title, twitter:description, twitter:image, twitter:site)
+
+// Использование в SSR (Server-Side Rendering)
+// Express.js
+app.get('/page', (req, res) => {
+  const meta = new Meta()
+  meta
+    .setTitle('Заголовок страницы')
+    .setDescription('Описание')
+    .setImage('https://example.com/og-image.jpg')
+
+  const html = `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="UTF-8">
+        ${meta.html()}
+        <title>Заголовок - Сайт</title>
+      </head>
+      <body>
+        <h1>Контент</h1>
+      </body>
+    </html>
+  `
+
+  res.send(html)
+})
+
+// Next.js getServerSideProps
+export async function getServerSideProps() {
+  const meta = new Meta()
+  meta
+    .setTitle('Статья')
+    .setDescription('Описание статьи')
+
+  return {
+    props: {
+      metaTags: meta.html()
+    }
+  }
+}
+
+// Nuxt.js (в composable)
+const meta = new Meta()
+meta.setTitle('Страница')
+
+const metaHTML = meta.html()
+// Вставить в head через useHead() или в шаблон
+
+// Преимущества метода html():
+// - Автоматическое экранирование специальных символов
+// - Объединяет все три типа мета-тегов (standard, OG, Twitter)
+// - Готово для вставки в серверный шаблон
+// - Безопасно от XSS атак
+```
+
+## Практические примеры
+
+### Полная настройка страницы
+
+```javascript
+import { Meta, MetaRobots } from '@dxtmisha/functional'
+
+const meta = new Meta()
+
+// Настройка при инициализации приложения
+meta.setSuffix('Мой Сайт')
+meta.setSiteName('Мой Сайт')
+meta.setLocale('ru_RU')
+
+// Настройка конкретной страницы
+meta
+  .setTitle('Полное руководство по веб-разработке')
+  .setDescription('Изучите веб-разработку с нуля: HTML, CSS, JavaScript, фреймворки и инструменты')
+  .setKeywords(['веб-разработка', 'html', 'css', 'javascript', 'руководство'])
+  .setImage('https://example.com/images/web-dev-guide.jpg')
+  .setCanonical('https://example.com/guides/web-development')
+  .setAuthor('Иван Иванов')
+  .setRobots(MetaRobots.indexFollow)
+
+// Результат:
+// <title>Полное руководство по веб-разработке - Мой Сайт</title>
+// <meta name="description" content="Изучите веб-разработку...">
+// <meta name="keywords" content="веб-разработка, html, css, javascript, руководство">
+// <meta name="author" content="Иван Иванов">
+// <meta name="robots" content="index, follow">
+// <link rel="canonical" href="https://example.com/guides/web-development">
+// <meta property="og:title" content="Полное руководство... - Мой Сайт">
+// <meta property="og:description" content="Изучите веб-разработку...">
+// <meta property="og:image" content="https://example.com/images/web-dev-guide.jpg">
+// <meta property="og:url" content="https://example.com/guides/web-development">
+// <meta property="og:site_name" content="Мой Сайт">
+// <meta property="og:locale" content="ru_RU">
+// <meta property="twitter:title" content="Полное руководство... - Мой Сайт">
+// <meta property="twitter:description" content="Изучите веб-разработку...">
+// <meta property="twitter:image" content="https://example.com/images/web-dev-guide.jpg">
+// <meta property="twitter:site" content="Мой Сайт">
+```
+
+### Интеграция с Vue Router
+
+```javascript
+import { Meta } from '@dxtmisha/functional'
+
+const meta = new Meta()
+
+// Инициализация
+meta.setSuffix('Мой Сайт')
+meta.setSiteName('Мой Сайт')
+meta.setLocale('ru_RU')
+
+// Обновление при смене роута
+router.afterEach((to) => {
+  meta
+    .setTitle(to.meta.title || 'Страница не найдена')
+    .setDescription(to.meta.description || '')
+    .setKeywords(to.meta.keywords || [])
+    .setCanonical(`https://example.com${to.path}`)
+
+  // Изображение если есть
+  if (to.meta.image) {
+    meta.setImage(to.meta.image)
+  }
+
+  // Автор если есть
+  if (to.meta.author) {
+    meta.setAuthor(to.meta.author)
+  }
+})
+
+// Определение мета в роутах
+const routes = [
+  {
+    path: '/',
+    component: Home,
+    meta: {
+      title: 'Главная',
+      description: 'Добро пожаловать на наш сайт',
+      keywords: ['главная', 'сайт'],
+      image: '/images/home.jpg'
+    }
+  },
+  {
+    path: '/about',
+    component: About,
+    meta: {
+      title: 'О нас',
+      description: 'Информация о нашей компании',
+      keywords: ['о нас', 'компания'],
+      image: '/images/about.jpg'
+    }
+  }
+]
+```
+
+### Интеграция с React
+
+```javascript
+import { Meta } from '@dxtmisha/functional'
+import { useEffect } from 'react'
+
+const meta = new Meta()
+
+// Инициализация в App.js
+function App() {
+  useEffect(() => {
+    meta.setSuffix('Мой Сайт')
+    meta.setSiteName('Мой Сайт')
+    meta.setLocale('en_US')
+  }, [])
+
+  return <Router />
+}
+
+// Компонент страницы
+function ArticlePage({ article }) {
+  useEffect(() => {
+    meta
+      .setTitle(article.title)
+      .setDescription(article.excerpt)
+      .setKeywords(article.tags)
+      .setImage(article.coverImage)
+      .setCanonical(`https://example.com/articles/${article.slug}`)
+      .setAuthor(article.author.name)
+
+    return () => {
+      // Очистка при размонтировании (опционально)
+    }
+  }, [article])
+
+  return <div>{/* контент */}</div>
+}
+
+// Custom hook для мета-тегов
+function useMeta(metaData) {
+  useEffect(() => {
+    if (metaData.title) meta.setTitle(metaData.title)
+    if (metaData.description) meta.setDescription(metaData.description)
+    if (metaData.keywords) meta.setKeywords(metaData.keywords)
+    if (metaData.image) meta.setImage(metaData.image)
+    if (metaData.canonical) meta.setCanonical(metaData.canonical)
+    if (metaData.author) meta.setAuthor(metaData.author)
+  }, [metaData])
+}
+
+// Использование hook
+function BlogPost({ post }) {
+  useMeta({
+    title: post.title,
+    description: post.excerpt,
+    keywords: post.tags,
+    image: post.image,
+    author: post.author.name
+  })
+
+  return <article>{/* контент */}</article>
+}
+```
+
+### Динамическое обновление из API
+
+```javascript
+import { Meta } from '@dxtmisha/functional'
+
+const meta = new Meta()
+
+// Загрузка страницы из API
+async function loadPage(pageId) {
+  const response = await fetch(`/api/pages/${pageId}`)
+  const page = await response.json()
+
+  // Обновление всех мета-тегов
+  meta
+    .setTitle(page.title)
+    .setDescription(page.description)
+    .setKeywords(page.keywords)
+    .setImage(page.image)
+    .setCanonical(page.url)
+    .setAuthor(page.author)
+
+  return page
+}
+
+// Обработка разных типов контента
+async function updateMetaForContent(contentType, contentId) {
+  const content = await fetchContent(contentType, contentId)
+
+  switch (contentType) {
+    case 'article':
+      meta
+        .setTitle(content.title)
+        .setDescription(content.excerpt)
+        .setKeywords(content.tags)
+        .setImage(content.coverImage)
+        .setAuthor(content.author.name)
+      break
+
+    case 'product':
+      meta
+        .setTitle(content.name)
+        .setDescription(content.description)
+        .setKeywords([content.category, ...content.tags])
+        .setImage(content.images[0])
+      break
+
+    case 'video':
+      meta
+        .setTitle(content.title)
+        .setDescription(content.synopsis)
+        .setImage(content.thumbnail)
+      break
+  }
+}
+```
+
+### SSR (Server-Side Rendering)
+
+```javascript
+import { Meta } from '@dxtmisha/functional'
+
+// Express.js сервер
+app.get('/article/:id', async (req, res) => {
+  const article = await getArticle(req.params.id)
+
+  const meta = new Meta()
+  meta.setSuffix('Мой Блог')
+  meta.setSiteName('Мой Блог')
+  meta.setLocale('ru_RU')
+
+  meta
+    .setTitle(article.title)
+    .setDescription(article.excerpt)
+    .setKeywords(article.tags)
+    .setImage(article.coverImage)
+    .setCanonical(`https://example.com/article/${article.id}`)
+    .setAuthor(article.author.name)
+
+  const html = `
+    <!DOCTYPE html>
+    <html lang="ru">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>${article.title} - Мой Блог</title>
+        ${meta.html()}
+      </head>
+      <body>
+        <article>${article.content}</article>
+      </body>
+    </html>
+  `
+
+  res.send(html)
+})
+
+// Next.js
+export async function getServerSideProps({ params }) {
+  const article = await getArticle(params.id)
+
+  const meta = new Meta()
+  meta.setSuffix('Мой Блог')
+  meta
+    .setTitle(article.title)
+    .setDescription(article.excerpt)
+    .setKeywords(article.tags)
+    .setImage(article.coverImage)
+
+  return {
+    props: {
+      article,
+      metaHtml: meta.html()
+    }
+  }
+}
+```
+
+### Управление robots для разных сценариев
+
+```javascript
+import { Meta, MetaRobots } from '@dxtmisha/functional'
+
+const meta = new Meta()
+
+// Функция определения robots директивы
+function setRobotsForPage(pageType, pageStatus) {
+  switch (pageType) {
+    case 'article':
+      if (pageStatus === 'published') {
+        meta.setRobots(MetaRobots.indexFollow)
+      } else if (pageStatus === 'draft') {
+        meta.setRobots(MetaRobots.noindexNofollow)
+      }
+      break
+
+    case 'search':
+      // Страницы поиска не индексируем
+      meta.setRobots(MetaRobots.noindexFollow)
+      break
+
+    case 'login':
+    case 'admin':
+      // Закрытые страницы
+      meta.setRobots(MetaRobots.noindexNofollow)
+      break
+
+    case 'pagination':
+      // Страницы пагинации
+      meta.setRobots(MetaRobots.noindexFollow)
+      break
+
+    default:
+      meta.setRobots(MetaRobots.indexFollow)
+  }
+}
+
+// Условная логика
+if (isUserAuthenticated && isPrivatePage) {
+  meta.setRobots(MetaRobots.noindexNofollow)
+} else {
+  meta.setRobots(MetaRobots.indexFollow)
+}
+```
+
+### Использование расширенных возможностей Open Graph и Twitter Card
+
+```javascript
+import { Meta, MetaOpenGraphType, MetaTwitterCard } from '@dxtmisha/functional'
+
+const meta = new Meta()
+
+// Базовая настройка через Meta
+meta
+  .setTitle('Видео: Введение в JavaScript')
+  .setDescription('Полное видео руководство по JavaScript для начинающих')
+  .setImage('https://example.com/images/js-video-thumb.jpg')
+  .setCanonical('https://example.com/videos/js-intro')
+
+// Расширенная настройка Open Graph через getOg()
+meta.getOg()
+  .setType(MetaOpenGraphType.videoMovie) // Тип: видео
+  .setLocale('ru_RU')
+
+// Расширенная настройка Twitter Card через getTwitter()
+meta.getTwitter()
+  .setCard(MetaTwitterCard.player) // Карточка с плеером
+  .setCreator('@javascript_guru') // Автор видео
+
+// Комбинированная настройка для разных типов контента
+const setupContentMeta = (content) => {
+  // Общие настройки
+  meta
+    .setTitle(content.title)
+    .setDescription(content.description)
+    .setImage(content.image)
+    .setCanonical(content.url)
+
+  // Специфичные настройки в зависимости от типа
+  switch (content.type) {
+    case 'article':
+      meta.getOg().setType(MetaOpenGraphType.article)
+      meta.getTwitter().setCard(MetaTwitterCard.summaryLargeImage)
+      if (content.author?.twitter) {
+        meta.getTwitter().setCreator(content.author.twitter)
+      }
+      break
+
+    case 'video':
+      meta.getOg().setType(MetaOpenGraphType.videoMovie)
+      meta.getTwitter().setCard(MetaTwitterCard.player)
+      break
+
+    case 'product':
+      meta.getOg().setType(MetaOpenGraphType.product)
+      meta.getTwitter().setCard(MetaTwitterCard.summaryLargeImage)
+      break
+
+    case 'music':
+      meta.getOg().setType(MetaOpenGraphType.musicSong)
+      meta.getTwitter().setCard(MetaTwitterCard.player)
+      break
+  }
+}
+
+// Использование
+setupContentMeta({
+  type: 'video',
+  title: 'JavaScript Tutorial',
+  description: 'Learn JavaScript from scratch',
+  image: 'https://example.com/thumb.jpg',
+  url: 'https://example.com/videos/js-tutorial',
+  author: {
+    twitter: '@instructor'
+  }
+})
+
+// Доступ к специфичным методам
+const getFullMetaInfo = () => {
+  return {
+    // Через Meta
+    title: meta.getTitle(),
+    description: meta.getDescription(),
+    image: meta.getImage(),
+
+    // Через MetaOg
+    ogType: meta.getOg().getType(),
+    ogLocale: meta.getOg().getLocale(),
+
+    // Через MetaTwitter
+    twitterCard: meta.getTwitter().getCard(),
+    twitterCreator: meta.getTwitter().getCreator()
+  }
+}
+```
+
+## Рекомендации по использованию
+
+### Инициализация
+Установите общие параметры один раз при запуске приложения:
+```javascript
+const meta = new Meta()
+meta.setSuffix('Название Сайта')
+meta.setSiteName('Название Сайта')
+meta.setLocale('ru_RU')
+```
+
+### Обновление при навигации
+Обновляйте мета-теги при смене страницы:
+```javascript
+router.afterEach((to) => {
+  meta
+    .setTitle(to.meta.title)
+    .setDescription(to.meta.description)
+    .setCanonical(`https://example.com${to.path}`)
+})
+```
+
+### Длина текста
+- **Title:** до 60 символов (без суффикса)
+- **Description:** 150-160 символов
+- **Keywords:** 10-15 ключевых слов
+
+### Обязательные теги
+Минимально необходимые мета-теги:
+- Title (через `setTitle`)
+- Description (через `setDescription`)
+- Canonical (через `setCanonical`)
+- Image для социальных сетей (через `setImage`)
+
+### Изображения
+- Размер: 1200×630 px (оптимально)
+- Формат: JPG, PNG, WebP
+- Максимум: 8 MB
+
+## Примечания
+
+- Класс объединяет функциональность MetaManager, MetaOg и MetaTwitter
+- Изменения в Meta автоматически применяются ко всем связанным мета-тегам
+- Суффикс добавляется только к document.title и социальным тегам
+- Метод `html()` наследуется от MetaManager и генерирует HTML для всех управляемых тегов
+- Класс совместим с SSR — проверяет наличие DOM перед доступом к document
+- Keywords менее важны для современного SEO, но могут использоваться для внутреннего поиска
+- Для расширенной работы с Open Graph используйте напрямую `meta.og`
+- Для расширенной работы с Twitter Card используйте напрямую `meta.twitter`
+