@jjlmoya/utils-developer 1.30.0 → 1.31.0

package/src/tool/serpPixelSimulator/i18n/ru.ts

@@ -1,214 +1,214 @@
-import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
-import type { ToolLocaleContent } from '../../../types';
-import type { SerpPixelSimulatorUI } from '../ui';
-import { bibliography } from '../bibliography';
-
-const slug = 'simulyator-serp-schetchik-pikselej';
-const title = 'Симулятор SERP и Счётчик Пикселей для SEO';
-const description = 'Предпросматривайте поисковые сниппеты в стиле Google в реальном времени, измеряйте ширину заголовка и мета-описания в пикселях и точно видите, где ваш текст будет обрезан.';
-
-const howTo = [
-  {
-    name: 'Введите тег title',
-    text: 'Введите или вставьте заголовок страницы, который хотите протестировать. Предпросмотр SERP и счётчик пикселей обновляются при каждом нажатии клавиши.',
-  },
-  {
-    name: 'Добавьте видимый URL',
-    text: 'Используйте реалистичный домен и путь, чтобы сниппет был похож на результат, который просканирует пользователь.',
-  },
-  {
-    name: 'Напишите мета-описание',
-    text: 'Добавьте текст описания и следите за полосой пикселей. Когда она превышает рекомендуемую визуальную ширину, предпросмотр обрезает её многоточием.',
-  },
-  {
-    name: 'Переключайтесь между компьютером и мобильным',
-    text: 'Сравните отображение заголовка с шириной карточки на компьютере или мобильном устройстве перед публикацией метаданных.',
-  },
-];
-
-const faq = [
-  {
-    question: 'Почему считать пиксели, а не символы для SEO-заголовков?',
-    answer: 'Карточки результатов Google ограничены визуальной шириной. Заголовок с большим количеством узких букв может вместить больше символов, чем заголовок с широкими буквами, прописными или жирно выглядящими глифами. Измерение в пикселях даёт более точное представление о видимом результате.',
-  },
-  {
-    question: 'Гарантирует ли это, как именно Google обрежет мой сниппет?',
-    answer: 'Нет. Google может переписывать ссылки заголовков и сниппеты, а отображение может варьироваться в зависимости от запроса, устройства, языка и экспериментов. Инструмент задуман как практическое визуальное руководство для написания метаданных, которые с меньшей вероятностью будут обрезаны.',
-  },
-  {
-    question: 'Какие лимиты пикселей использует симулятор?',
-    answer: 'Лимит заголовка по умолчанию для компьютера составляет 580 пикселей, для мобильных - 600 пикселей, а лимит мета-описания - 920 пикселей. Это цели написания, а не официальные лимиты Google.',
-  },
-  {
-    question: 'Почему предпросмотр добавляет многоточие?',
-    answer: 'Когда измеренный текст превышает доступную ширину в пикселях, симулятор обрезает строку по последнему вмещающемуся символу и добавляет три точки, имитируя практическое поведение, необходимое SEO-командам для обнаружения потери смысла.',
-  },
-];
-
-const ui: SerpPixelSimulatorUI = {
-  titleLabel: 'Тег title',
-  titlePlaceholder: 'GameBob | Независимая Студия Разработки',
-  urlLabel: 'Видимый URL',
-  urlPlaceholder: 'https://www.gamebob.dev/ru/',
-  descriptionLabel: 'Мета-описание',
-  descriptionPlaceholder: 'Откройте для себя нашу коллекцию инструментов и игр, созданных для улучшения вашего цифрового рабочего процесса и развлечений.',
-  deviceLabel: 'Режим предпросмотра',
-  desktopLabel: 'Компьютер',
-  mobileLabel: 'Мобильный',
-  titlePixelsLabel: 'Ширина заголовка',
-  descriptionPixelsLabel: 'Ширина описания',
-  charactersLabel: 'символов',
-  previewLabel: 'Предпросмотр в стиле Google',
-  tooLongLabel: 'Слишком широкий',
-  goodLabel: 'Помещается',
-  emptyTitle: 'Ваш заголовок появится здесь',
-  emptyDescription: 'Предпросмотр вашего мета-описания появится здесь по мере ввода.',
-  defaultTitle: 'GameBob | Независимая Студия Разработки',
-  defaultUrl: 'https://www.gamebob.dev/ru/',
-  defaultDescription: 'Откройте для себя нашу коллекцию инструментов и игр, созданных для улучшения вашего цифрового рабочего процесса и развлечений.',
-  fallbackUrl: 'пример.рф',
-  fallbackFaviconText: 'G',
-  pixelUnit: 'px',
-  ellipsis: '...',
-  fetchButtonLabel: 'Загрузить',
-  fetchLoadingLabel: 'Загрузка...',
-  fetchSuccessLabel: 'Метаданные загружены с URL.',
-  fetchCorsError: 'Браузер не смог прочитать эту страницу. Возможно, она заблокирована CORS, перенаправлением, смешанным содержимым или сетевым правилом. Вы всё ещё можете вставить или отредактировать метаданные вручную.',
-  fetchInvalidUrlError: 'Введите корректный URL перед загрузкой метаданных.',
-  fetchNoMetadataError: 'Страница загружена, но заголовок или мета-описание не найдены.',
-  fetchGenericError: 'Не удалось загрузить метаданные с этого URL. Проверьте адрес или заполните поля вручную.',
-};
-
-const faqSchema: WithContext<FAQPage> = {
-  '@context': 'https://schema.org',
-  '@type': 'FAQPage',
-  mainEntity: faq.map((item) => ({
-    '@type': 'Question',
-    name: item.question,
-    acceptedAnswer: {
-      '@type': 'Answer',
-      text: item.answer,
-    },
-  })),
-};
-
-const howToSchema: WithContext<HowTo> = {
-  '@context': 'https://schema.org',
-  '@type': 'HowTo',
-  name: title,
-  description,
-  step: howTo.map((step, index) => ({
-    '@type': 'HowToStep',
-    position: index + 1,
-    name: step.name,
-    text: step.text,
-  })),
-};
-
-const appSchema: WithContext<SoftwareApplication> = {
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
-  name: title,
-  description,
-  applicationCategory: 'BusinessApplication',
-  operatingSystem: 'Any',
-  offers: {
-    '@type': 'Offer',
-    price: '0',
-    priceCurrency: 'EUR',
-  },
-  inLanguage: 'ru',
-};
-
-export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
-  slug,
-  title,
-  description,
-  ui,
-  faqTitle: 'Часто задаваемые вопросы о симуляторе SERP',
-  faq,
-  bibliographyTitle: 'Документация по поисковым результатам',
-  bibliography,
-  howTo,
-  schemas: [appSchema, faqSchema, howToSchema],
-  seo: [
-    {
-      type: 'title',
-      text: 'Перестаньте гадать, как будет выглядеть ваш результат в Google',
-      level: 2,
-    },
-    {
-      type: 'paragraph',
-      html: 'Тег title может выглядеть идеально в таблице и всё равно провалиться в поисковой выдаче. Google резервирует пространство не по количеству символов; он отображает текст внутри визуальной карточки. Это означает, что <strong>GameBob | Независимая Студия Разработки</strong> и другой заголовок с тем же количеством символов могут занимать очень разную ширину в зависимости от букв, регистра, пунктуации и пробелов.',
-    },
-    {
-      type: 'tip',
-      title: 'Правило, которое действительно помогает',
-      html: 'Пишите сниппет так, чтобы важное обещание пережило многоточие. Разместите тип страницы, поисковое намерение и самую сильную причину кликнуть до пиксельного лимита. Названия брендов полезны, но они не должны вытеснять главное преимущество из поля зрения.',
-    },
-    {
-      type: 'title',
-      text: 'Что измеряет счётчик пикселей',
-      level: 3,
-    },
-    {
-      type: 'table',
-      headers: ['Элемент', 'Что важно', 'Как использовать результат'],
-      rows: [
-        ['Тег title', 'Отображаемая ширина в пикселях, а не количество символов', 'Держите основное ключевое слово и обещание клика видимыми до обрезки.'],
-        ['Видимый URL', 'Визуальное доверие и ясность темы', 'Используйте читаемый путь, который подкрепляет, куда ведёт результат.'],
-        ['Мета-описание', 'Более широкая область сниппета с поведением, зависящим от запроса', 'Выносите преимущество вперёд, поскольку Google может сократить или переписать его.'],
-        ['Режим устройства', 'Карточки на компьютере и мобильном могут выглядеть по-разному', 'Проверьте оба режима перед публикацией метаданных для важных страниц.'],
-      ],
-    },
-    {
-      type: 'title',
-      text: 'Почему ограничения по символам - плохая SEO-привычка',
-      level: 3,
-    },
-    {
-      type: 'paragraph',
-      html: 'Традиционный совет вроде "держите заголовки до 60 символов" удобен, но скрывает реальную проблему. Широкие буквы, такие как W и M, заглавные буквы, разделители, цифры и длинные названия брендов занимают разное пространство. Измерение в пикселях немедленно делает компромисс видимым: вы можете увидеть, заслуживает ли фраза своего места или крадёт пространство у более сильного сообщения.',
-    },
-    {
-      type: 'title',
-      text: 'Практический рабочий процесс для лучших сниппетов',
-      level: 3,
-    },
-    {
-      type: 'list',
-      items: [
-        '<strong>Начните с намерения:</strong> опишите, что получает пользователь, а не только как называется страница.',
-        '<strong>Протестируйте полный заголовок:</strong> вставьте его в симулятор и следите за полосой перед публикацией.',
-        '<strong>Уберите слабые слова:</strong> если полоса стала красной, удалите наполнители, прежде чем обрезать ценные термины.',
-        '<strong>Проверьте многоточие:</strong> если обрезанный предпросмотр теряет смысл, перепишите заголовок, а не принимайте обрезку.',
-        '<strong>Повторите для описания:</strong> убедитесь, что первое предложение само по себе несёт ценностное предложение.',
-      ],
-    },
-    {
-      type: 'diagnostic',
-      variant: 'info',
-      title: 'Когда полоса становится красной',
-      html: 'Красная полоса не является предупреждением о штрафе. Она означает, что текущий текст шире выбранной визуальной цели, поэтому симулятор обрезает его точками. Относитесь к этому как к редакционному сигналу: решите, можно ли пожертвовать скрытыми словами, или сниппет нуждается в более чёткой структуре.',
-    },
-    {
-      type: 'title',
-      text: 'Ограничения, переписывания и реалистичные ожидания',
-      level: 3,
-    },
-    {
-      type: 'paragraph',
-      html: 'Ни один симулятор не может гарантировать точный сниппет, который покажет Google. Google может переписывать ссылки заголовков, выделять жирным термины запроса, выбирать текст страницы вместо мета-описания или показывать разные сниппеты для разных поисковых запросов. Этот инструмент лучше всего использовать как быстрый этап написания и контроля качества: он выявляет явные визуальные переполнения до того, как страница попадёт в продакшн.',
-    },
-    {
-      type: 'summary',
-      title: 'Наилучшее использование этого симулятора SERP',
-      items: [
-        'Используйте полосу пикселей для обнаружения визуальных переполнений перед публикацией метаданных.',
-        'Держите основное поисковое намерение и обещание клика видимыми до любого многоточия.',
-        'Загружайте метаданные с URL, которые разрешают CORS, затем редактируйте результат вручную при необходимости.',
-        'Рассматривайте предпросмотр как руководство по написанию, поскольку Google всё ещё может переписывать сниппеты под каждый запрос.',
-      ],
-    },
-  ],
-};
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SerpPixelSimulatorUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'simulyator-serp-schetchik-pikselej';
+const title = 'Симулятор SERP и Счётчик Пикселей для SEO';
+const description = 'Предпросматривайте поисковые сниппеты в стиле Google в реальном времени, измеряйте ширину заголовка и мета-описания в пикселях и точно видите, где ваш текст будет обрезан.';
+
+const howTo = [
+  {
+    name: 'Введите тег title',
+    text: 'Введите или вставьте заголовок страницы, который хотите протестировать. Предпросмотр SERP и счётчик пикселей обновляются при каждом нажатии клавиши.',
+  },
+  {
+    name: 'Добавьте видимый URL',
+    text: 'Используйте реалистичный домен и путь, чтобы сниппет был похож на результат, который просканирует пользователь.',
+  },
+  {
+    name: 'Напишите мета-описание',
+    text: 'Добавьте текст описания и следите за полосой пикселей. Когда она превышает рекомендуемую визуальную ширину, предпросмотр обрезает её многоточием.',
+  },
+  {
+    name: 'Переключайтесь между компьютером и мобильным',
+    text: 'Сравните отображение заголовка с шириной карточки на компьютере или мобильном устройстве перед публикацией метаданных.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Почему считать пиксели, а не символы для SEO-заголовков?',
+    answer: 'Карточки результатов Google ограничены визуальной шириной. Заголовок с большим количеством узких букв может вместить больше символов, чем заголовок с широкими буквами, прописными или жирно выглядящими глифами. Измерение в пикселях даёт более точное представление о видимом результате.',
+  },
+  {
+    question: 'Гарантирует ли это, как именно Google обрежет мой сниппет?',
+    answer: 'Нет. Google может переписывать ссылки заголовков и сниппеты, а отображение может варьироваться в зависимости от запроса, устройства, языка и экспериментов. Инструмент задуман как практическое визуальное руководство для написания метаданных, которые с меньшей вероятностью будут обрезаны.',
+  },
+  {
+    question: 'Какие лимиты пикселей использует симулятор?',
+    answer: 'Лимит заголовка по умолчанию для компьютера составляет 580 пикселей, для мобильных - 600 пикселей, а лимит мета-описания - 920 пикселей. Это цели написания, а не официальные лимиты Google.',
+  },
+  {
+    question: 'Почему предпросмотр добавляет многоточие?',
+    answer: 'Когда измеренный текст превышает доступную ширину в пикселях, симулятор обрезает строку по последнему вмещающемуся символу и добавляет три точки, имитируя практическое поведение, необходимое SEO-командам для обнаружения потери смысла.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Тег title',
+  titlePlaceholder: 'GameBob | Независимая Студия Разработки',
+  urlLabel: 'Видимый URL',
+  urlPlaceholder: 'https://www.gamebob.dev/ru/',
+  descriptionLabel: 'Мета-описание',
+  descriptionPlaceholder: 'Откройте для себя нашу коллекцию инструментов и игр, созданных для улучшения вашего цифрового рабочего процесса и развлечений.',
+  deviceLabel: 'Режим предпросмотра',
+  desktopLabel: 'Компьютер',
+  mobileLabel: 'Мобильный',
+  titlePixelsLabel: 'Ширина заголовка',
+  descriptionPixelsLabel: 'Ширина описания',
+  charactersLabel: 'символов',
+  previewLabel: 'Предпросмотр в стиле Google',
+  tooLongLabel: 'Слишком широкий',
+  goodLabel: 'Помещается',
+  emptyTitle: 'Ваш заголовок появится здесь',
+  emptyDescription: 'Предпросмотр вашего мета-описания появится здесь по мере ввода.',
+  defaultTitle: 'GameBob | Независимая Студия Разработки',
+  defaultUrl: 'https://www.gamebob.dev/ru/',
+  defaultDescription: 'Откройте для себя нашу коллекцию инструментов и игр, созданных для улучшения вашего цифрового рабочего процесса и развлечений.',
+  fallbackUrl: 'пример.рф',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Загрузить',
+  fetchLoadingLabel: 'Загрузка...',
+  fetchSuccessLabel: 'Метаданные загружены с URL.',
+  fetchCorsError: 'Браузер не смог прочитать эту страницу. Возможно, она заблокирована CORS, перенаправлением, смешанным содержимым или сетевым правилом. Вы всё ещё можете вставить или отредактировать метаданные вручную.',
+  fetchInvalidUrlError: 'Введите корректный URL перед загрузкой метаданных.',
+  fetchNoMetadataError: 'Страница загружена, но заголовок или мета-описание не найдены.',
+  fetchGenericError: 'Не удалось загрузить метаданные с этого URL. Проверьте адрес или заполните поля вручную.',
+};
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: item.answer,
+    },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step, index) => ({
+    '@type': 'HowToStep',
+    position: index + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'BusinessApplication',
+  operatingSystem: 'Any',
+  offers: {
+    '@type': 'Offer',
+    price: '0',
+    priceCurrency: 'EUR',
+  },
+  inLanguage: 'ru',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Часто задаваемые вопросы о симуляторе SERP',
+  faq,
+  bibliographyTitle: 'Документация по поисковым результатам',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Перестаньте гадать, как будет выглядеть ваш результат в Google',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Тег title может выглядеть идеально в таблице и всё равно провалиться в поисковой выдаче. Google резервирует пространство не по количеству символов; он отображает текст внутри визуальной карточки. Это означает, что <strong>GameBob | Независимая Студия Разработки</strong> и другой заголовок с тем же количеством символов могут занимать очень разную ширину в зависимости от букв, регистра, пунктуации и пробелов.',
+    },
+    {
+      type: 'tip',
+      title: 'Правило, которое действительно помогает',
+      html: 'Пишите сниппет так, чтобы важное обещание пережило многоточие. Разместите тип страницы, поисковое намерение и самую сильную причину кликнуть до пиксельного лимита. Названия брендов полезны, но они не должны вытеснять главное преимущество из поля зрения.',
+    },
+    {
+      type: 'title',
+      text: 'Что измеряет счётчик пикселей',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Элемент', 'Что важно', 'Как использовать результат'],
+      rows: [
+        ['Тег title', 'Отображаемая ширина в пикселях, а не количество символов', 'Держите основное ключевое слово и обещание клика видимыми до обрезки.'],
+        ['Видимый URL', 'Визуальное доверие и ясность темы', 'Используйте читаемый путь, который подкрепляет, куда ведёт результат.'],
+        ['Мета-описание', 'Более широкая область сниппета с поведением, зависящим от запроса', 'Выносите преимущество вперёд, поскольку Google может сократить или переписать его.'],
+        ['Режим устройства', 'Карточки на компьютере и мобильном могут выглядеть по-разному', 'Проверьте оба режима перед публикацией метаданных для важных страниц.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Почему ограничения по символам - плохая SEO-привычка',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Традиционный совет вроде "держите заголовки до 60 символов" удобен, но скрывает реальную проблему. Широкие буквы, такие как W и M, заглавные буквы, разделители, цифры и длинные названия брендов занимают разное пространство. Измерение в пикселях немедленно делает компромисс видимым: вы можете увидеть, заслуживает ли фраза своего места или крадёт пространство у более сильного сообщения.',
+    },
+    {
+      type: 'title',
+      text: 'Практический рабочий процесс для лучших сниппетов',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Начните с намерения:</strong> опишите, что получает пользователь, а не только как называется страница.',
+        '<strong>Протестируйте полный заголовок:</strong> вставьте его в симулятор и следите за полосой перед публикацией.',
+        '<strong>Уберите слабые слова:</strong> если полоса стала красной, удалите наполнители, прежде чем обрезать ценные термины.',
+        '<strong>Проверьте многоточие:</strong> если обрезанный предпросмотр теряет смысл, перепишите заголовок, а не принимайте обрезку.',
+        '<strong>Повторите для описания:</strong> убедитесь, что первое предложение само по себе несёт ценностное предложение.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Когда полоса становится красной',
+      html: 'Красная полоса не является предупреждением о штрафе. Она означает, что текущий текст шире выбранной визуальной цели, поэтому симулятор обрезает его точками. Относитесь к этому как к редакционному сигналу: решите, можно ли пожертвовать скрытыми словами, или сниппет нуждается в более чёткой структуре.',
+    },
+    {
+      type: 'title',
+      text: 'Ограничения, переписывания и реалистичные ожидания',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ни один симулятор не может гарантировать точный сниппет, который покажет Google. Google может переписывать ссылки заголовков, выделять жирным термины запроса, выбирать текст страницы вместо мета-описания или показывать разные сниппеты для разных поисковых запросов. Этот инструмент лучше всего использовать как быстрый этап написания и контроля качества: он выявляет явные визуальные переполнения до того, как страница попадёт в продакшн.',
+    },
+    {
+      type: 'summary',
+      title: 'Наилучшее использование этого симулятора SERP',
+      items: [
+        'Используйте полосу пикселей для обнаружения визуальных переполнений перед публикацией метаданных.',
+        'Держите основное поисковое намерение и обещание клика видимыми до любого многоточия.',
+        'Загружайте метаданные с URL, которые разрешают CORS, затем редактируйте результат вручную при необходимости.',
+        'Рассматривайте предпросмотр как руководство по написанию, поскольку Google всё ещё может переписывать сниппеты под каждый запрос.',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/logic.ts

@@ -1,18 +1,18 @@
-export const DESKTOP_TITLE_LIMIT = 580;
-export const MOBILE_TITLE_LIMIT = 600;
-export const DESCRIPTION_LIMIT = 920;
-
-export type SerpDevice = 'desktop' | 'mobile';
-
-export function getTitleLimit(device: SerpDevice): number {
-  return device === 'mobile' ? MOBILE_TITLE_LIMIT : DESKTOP_TITLE_LIMIT;
-}
-
-export function ratioToPercent(width: number, limit: number): number {
-  if (!Number.isFinite(width) || !Number.isFinite(limit) || limit <= 0) return 0;
-  return Math.min(100, Math.max(0, (width / limit) * 100));
-}
-
-export function needsPixelTrim(width: number, limit: number): boolean {
-  return width > limit;
-}
+export const DESKTOP_TITLE_LIMIT = 580;
+export const MOBILE_TITLE_LIMIT = 600;
+export const DESCRIPTION_LIMIT = 920;
+
+export type SerpDevice = 'desktop' | 'mobile';
+
+export function getTitleLimit(device: SerpDevice): number {
+  return device === 'mobile' ? MOBILE_TITLE_LIMIT : DESKTOP_TITLE_LIMIT;
+}
+
+export function ratioToPercent(width: number, limit: number): number {
+  if (!Number.isFinite(width) || !Number.isFinite(limit) || limit <= 0) return 0;
+  return Math.min(100, Math.max(0, (width / limit) * 100));
+}
+
+export function needsPixelTrim(width: number, limit: number): boolean {
+  return width > limit;
+}