@jjlmoya/utils-developer 1.14.0 → 1.16.0

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

@@ -0,0 +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 = 'symulator-serp-licznik-pikseli';
+const title = 'Symulator SERP i Licznik Pikseli SEO';
+const description = 'Podglądaj fragmenty wyników wyszukiwania w stylu Google w czasie rzeczywistym, mierz szerokość tytułu i meta opisu w pikselach i zobacz dokładnie, gdzie twój tekst zostanie przycięty.';
+
+const howTo = [
+  {
+    name: 'Wprowadź znacznik title',
+    text: 'Wpisz lub wklej tytuł strony, który chcesz przetestować. Podgląd SERP i miernik pikseli aktualizują się przy każdym naciśnięciu klawisza.',
+  },
+  {
+    name: 'Dodaj widoczny adres URL',
+    text: 'Użyj realistycznej domeny i ścieżki, aby fragment przypominał wynik, który przeskanowałby użytkownik.',
+  },
+  {
+    name: 'Wpisz meta opis',
+    text: 'Dodaj tekst opisu i obserwuj pasek pikseli. Gdy przekroczy zalecaną szerokość wizualną, podgląd przycina go wielokropkiem.',
+  },
+  {
+    name: 'Przełącz między pulpitem a urządzeniem mobilnym',
+    text: 'Porównaj renderowanie tytułu z szerokością karty na pulpicie lub urządzeniu mobilnym przed opublikowaniem metadanych.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Dlaczego liczyć piksele zamiast znaków dla tytułów SEO?',
+    answer: 'Karty wyników Google są ograniczone szerokością wizualną. Tytuł z wieloma wąskimi literami może pomieścić więcej znaków niż tytuł z szerokimi literami, wielkimi literami lub grubo wyglądającymi glifami. Pomiar w pikselach daje dokładniejszy podgląd widocznego wyniku.',
+  },
+  {
+    question: 'Czy to gwarantuje dokładnie, jak Google przytnie mój fragment?',
+    answer: 'Nie. Google może przepisywać linki tytułowe i fragmenty, a renderowanie może się różnić w zależności od zapytania, urządzenia, języka i eksperymentów. Narzędzie jest pomyślane jako praktyczna wizualna wskazówka do pisania metadanych, które rzadziej zostaną przycięte.',
+  },
+  {
+    question: 'Jakie limity pikseli stosuje symulator?',
+    answer: 'Domyślny limit tytułu na pulpicie wynosi 580 px, na urządzeniu mobilnym 600 px, a limit meta opisu to 920 px. Są to cele redakcyjne, a nie oficjalne limity Google.',
+  },
+  {
+    question: 'Dlaczego podgląd dodaje wielokropek?',
+    answer: 'Gdy zmierzony tekst przekracza dostępną szerokość w pikselach, symulator przycina ciąg przy ostatnim pasującym znaku i dodaje trzy kropki, naśladując praktyczne zachowanie potrzebne zespołom SEO do wykrywania utraty znaczenia.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Znacznik title',
+  titlePlaceholder: 'GameBob | Niezależne Studio Deweloperskie',
+  urlLabel: 'Widoczny URL',
+  urlPlaceholder: 'https://www.gamebob.dev/pl/',
+  descriptionLabel: 'Meta opis',
+  descriptionPlaceholder: 'Odkryj naszą kolekcję narzędzi i gier zaprojektowanych, aby ulepszyć twój cyfrowy przepływ pracy i rozrywkę.',
+  deviceLabel: 'Tryb podglądu',
+  desktopLabel: 'Pulpit',
+  mobileLabel: 'Mobilny',
+  titlePixelsLabel: 'Szerokość tytułu',
+  descriptionPixelsLabel: 'Szerokość opisu',
+  charactersLabel: 'znaków',
+  previewLabel: 'Podgląd na żywo w stylu Google',
+  tooLongLabel: 'Za szeroki',
+  goodLabel: 'Pasuje',
+  emptyTitle: 'Twój tytuł pojawi się tutaj',
+  emptyDescription: 'Podgląd twojego meta opisu pojawi się tutaj podczas pisania.',
+  defaultTitle: 'GameBob | Niezależne Studio Deweloperskie',
+  defaultUrl: 'https://www.gamebob.dev/pl/',
+  defaultDescription: 'Odkryj naszą kolekcję narzędzi i gier zaprojektowanych, aby ulepszyć twój cyfrowy przepływ pracy i rozrywkę.',
+  fallbackUrl: 'przyklad.pl',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Pobierz',
+  fetchLoadingLabel: 'Pobieranie...',
+  fetchSuccessLabel: 'Metadane załadowane z adresu URL.',
+  fetchCorsError: 'Przeglądarka nie mogła odczytać tej strony. Może być zablokowana przez CORS, przekierowanie, mieszaną zawartość lub regułę sieciową. Nadal możesz wkleić lub edytować metadane ręcznie.',
+  fetchInvalidUrlError: 'Wprowadź prawidłowy adres URL przed pobraniem metadanych.',
+  fetchNoMetadataError: 'Strona została pobrana, ale nie znaleziono tytułu ani meta opisu.',
+  fetchGenericError: 'Nie można pobrać metadanych z tego adresu URL. Sprawdź adres lub wypełnij pola ręcznie.',
+};
+
+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: 'pl',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Najczęściej zadawane pytania o symulator SERP',
+  faq,
+  bibliographyTitle: 'Dokumentacja dotycząca wyników wyszukiwania',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Przestań zgadywać, jak będzie wyglądać twój wynik w Google',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Znacznik title może wyglądać idealnie w arkuszu kalkulacyjnym, a mimo to zawieść w wyniku wyszukiwania. Google nie rezerwuje miejsca według liczby znaków; renderuje tekst wewnątrz karty wizualnej. Oznacza to, że <strong>GameBob | Niezależne Studio Deweloperskie</strong> i inny tytuł o tej samej liczbie znaków mogą zajmować bardzo różne szerokości w zależności od liter, wielkości znaków, interpunkcji i odstępów.',
+    },
+    {
+      type: 'tip',
+      title: 'Zasada, która naprawdę pomaga',
+      html: 'Napisz fragment tak, aby ważna obietnica przetrwała wielokropek. Umieść typ strony, intencję wyszukiwania i najsilniejszy powód do kliknięcia przed limitem pikseli. Nazwy marek są przydatne, ale nie powinny wypychać głównej korzyści poza widok.',
+    },
+    {
+      type: 'title',
+      text: 'Co mierzy licznik pikseli',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Element', 'Co ma znaczenie', 'Jak użyć wyniku'],
+      rows: [
+        ['Znacznik title', 'Szerokość renderowana w pikselach, nie surowa liczba znaków', 'Utrzymuj główne słowo kluczowe i obietnicę kliknięcia widoczne przed przycięciem.'],
+        ['Widoczny URL', 'Zaufanie wizualne i jasność tematu', 'Użyj czytelnej ścieżki, która wzmacnia, dokąd prowadzi wynik.'],
+        ['Meta opis', 'Szerszy obszar fragmentu z zachowaniem zależnym od zapytania', 'Umieść korzyść na początku, ponieważ Google może go skrócić lub przepisać.'],
+        ['Tryb urządzenia', 'Karty na pulpicie i urządzeniach mobilnych mogą wyglądać inaczej', 'Sprawdź oba przed opublikowaniem metadanych dla ważnych stron.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Dlaczego limity znaków to słaby nawyk SEO',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tradycyjna porada, taka jak "utrzymuj tytuły poniżej 60 znaków", jest wygodna, ale ukrywa prawdziwy problem. Szerokie litery, takie jak W i M, wielkie litery, separatory, cyfry i długie nazwy marek zajmują różną przestrzeń. Pomiar w pikselach natychmiast uwidacznia kompromis: możesz zobaczyć, czy fraza zasługuje na swoje miejsce, czy kradnie przestrzeń silniejszemu przekazowi.',
+    },
+    {
+      type: 'title',
+      text: 'Praktyczny przepływ pracy dla lepszych fragmentów',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Zacznij od intencji:</strong> opisz, co otrzymuje użytkownik, a nie tylko jak nazywa się strona.',
+        '<strong>Przetestuj pełny tytuł:</strong> wklej go do symulatora i obserwuj pasek przed publikacją.',
+        '<strong>Usuń słabe słowa:</strong> jeśli pasek zmieni kolor na czerwony, usuń wypełniacze przed obcięciem wartościowych terminów.',
+        '<strong>Sprawdź wielokropek:</strong> jeśli przycięty podgląd traci znaczenie, przepisz tytuł zamiast akceptować cięcie.',
+        '<strong>Powtórz dla opisu:</strong> upewnij się, że pierwsze zdanie samodzielnie niesie propozycję wartości.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Gdy pasek zmienia kolor na czerwony',
+      html: 'Czerwony pasek nie jest ostrzeżeniem o karze. Oznacza, że bieżący tekst jest szerszy niż wybrany cel wizualny, więc symulator przycina go kropkami. Potraktuj to jako sygnał redakcyjny: zdecyduj, czy ukryte słowa są zbędne, czy fragment potrzebuje ostrzejszej struktury.',
+    },
+    {
+      type: 'title',
+      text: 'Ograniczenia, przepisywanie i realistyczne oczekiwania',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Żaden symulator nie może zagwarantować dokładnego fragmentu, który pokaże Google. Google może przepisywać linki tytułowe, pogrubiać terminy zapytania, wybierać tekst strony zamiast meta opisu lub wyświetlać różne fragmenty dla różnych wyszukiwań. To narzędzie najlepiej sprawdza się jako szybki etap redakcyjny i kontroli jakości: wykrywa oczywiste przepełnienia wizualne, zanim strona trafi do produkcji.',
+    },
+    {
+      type: 'summary',
+      title: 'Najlepsze wykorzystanie tego symulatora SERP',
+      items: [
+        'Użyj paska pikseli, aby wykryć przepełnienia wizualne przed opublikowaniem metadanych.',
+        'Utrzymuj główną intencję wyszukiwania i obietnicę kliknięcia widoczne przed jakimkolwiek wielokropkiem.',
+        'Pobieraj metadane z adresów URL, które zezwalają na CORS, a następnie edytuj wynik ręcznie w razie potrzeby.',
+        'Traktuj podgląd jako wskazówkę redakcyjną, ponieważ Google wciąż może przepisywać fragmenty w zależności od zapytania.',
+      ],
+    },
+  ],
+};

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

@@ -0,0 +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 = 'simulador-serp-contador-pixels';
+const title = 'Simulador SERP e Contador de Píxeis SEO';
+const description = 'Pré-visualize snippets de pesquisa ao estilo Google em tempo real, meça a largura em píxeis do título e da meta description e veja exatamente onde o seu texto será truncado.';
+
+const howTo = [
+  {
+    name: 'Introduza a tag title',
+    text: 'Digite ou cole o título da página que pretende testar. A pré-visualização SERP e o medidor de píxeis atualizam-se a cada tecla premida.',
+  },
+  {
+    name: 'Adicione o URL visível',
+    text: 'Use um domínio e caminho realistas para que o snippet se pareça com o resultado que um utilizador analisaria.',
+  },
+  {
+    name: 'Escreva a meta description',
+    text: 'Adicione o texto da descrição e observe a barra de píxeis. Quando excede a largura visual recomendada, a pré-visualização trunca-a com reticências.',
+  },
+  {
+    name: 'Alterne entre desktop e mobile',
+    text: 'Compare a renderização do título com a largura do cartão de desktop ou mobile antes de publicar os metadados.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Porquê contar píxeis em vez de caracteres para títulos SEO?',
+    answer: 'Os cartões de resultados do Google são limitados pela largura visual. Um título com muitas letras estreitas pode conter mais caracteres do que um com letras largas, maiúsculas ou glifos de aspeto espesso. A medição em píxeis oferece uma pré-visualização mais fiel do resultado visível.',
+  },
+  {
+    question: 'Isto garante exatamente como o Google irá truncar o meu snippet?',
+    answer: 'Não. O Google pode reescrever os links de título e os snippets, e a renderização pode variar consoante a consulta, o dispositivo, o idioma e as experiências. A ferramenta foi concebida como um guia visual prático para escrever metadados com menor probabilidade de serem cortados.',
+  },
+  {
+    question: 'Que limites de píxeis utiliza o simulador?',
+    answer: 'O limite predefinido do título em desktop é de 580 px, o do título em mobile é de 600 px e o limite da meta description é de 920 px. São metas de redação, não limites oficiais do Google.',
+  },
+  {
+    question: 'Porque é que a pré-visualização adiciona reticências?',
+    answer: 'Quando o texto medido excede a largura de píxeis disponível, o simulador trunca a string no último caractere que cabe e acrescenta três pontos, reproduzindo o comportamento prático de que as equipas de SEO precisam para detetar perda de significado.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Tag title',
+  titlePlaceholder: 'GameBob | Estúdio de Desenvolvimento Independente',
+  urlLabel: 'URL visível',
+  urlPlaceholder: 'https://www.gamebob.dev/pt/',
+  descriptionLabel: 'Meta description',
+  descriptionPlaceholder: 'Descubra a nossa coleção de ferramentas e jogos concebidos para elevar o seu fluxo de trabalho digital e entretenimento.',
+  deviceLabel: 'Modo de pré-visualização',
+  desktopLabel: 'Desktop',
+  mobileLabel: 'Mobile',
+  titlePixelsLabel: 'Largura do título',
+  descriptionPixelsLabel: 'Largura da descrição',
+  charactersLabel: 'caracteres',
+  previewLabel: 'Pré-visualização ao vivo estilo Google',
+  tooLongLabel: 'Demasiado largo',
+  goodLabel: 'Ok',
+  emptyTitle: 'O seu título aparecerá aqui',
+  emptyDescription: 'A pré-visualização da sua meta description aparecerá aqui enquanto digita.',
+  defaultTitle: 'GameBob | Estúdio de Desenvolvimento Independente',
+  defaultUrl: 'https://www.gamebob.dev/pt/',
+  defaultDescription: 'Descubra a nossa coleção de ferramentas e jogos concebidos para elevar o seu fluxo de trabalho digital e entretenimento.',
+  fallbackUrl: 'exemplo.com',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Obter',
+  fetchLoadingLabel: 'A obter...',
+  fetchSuccessLabel: 'Metadados carregados a partir do URL.',
+  fetchCorsError: 'O navegador não conseguiu ler esta página. Pode estar bloqueada por CORS, um redireccionamento, conteúdo misto ou uma regra de rede. Pode colar ou editar os metadados manualmente.',
+  fetchInvalidUrlError: 'Introduza um URL válido antes de obter os metadados.',
+  fetchNoMetadataError: 'A página foi obtida, mas não foi encontrado título nem meta description.',
+  fetchGenericError: 'Não foi possível obter os metadados deste URL. Verifique o endereço ou preencha os campos manualmente.',
+};
+
+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: 'pt',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Perguntas frequentes sobre o simulador SERP',
+  faq,
+  bibliographyTitle: 'Documentação sobre resultados de pesquisa',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Deixe de adivinhar como será o seu resultado no Google',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Uma tag title pode parecer perfeita numa folha de cálculo e mesmo assim falhar no resultado de pesquisa. O Google não reserva espaço por contagem de caracteres; renderiza o texto dentro de um cartão visual. Isso significa que <strong>GameBob | Estúdio de Desenvolvimento Independente</strong> e outro título com o mesmo número de caracteres podem ocupar larguras muito diferentes consoante as letras, maiúsculas, pontuação e espaçamento.',
+    },
+    {
+      type: 'tip',
+      title: 'A regra que realmente ajuda',
+      html: 'Escreva o snippet para que a promessa importante sobreviva às reticências. Coloque o tipo de página, a intenção de pesquisa e o motivo mais forte para clicar antes do limite de píxeis. Os nomes de marca são úteis, mas não devem empurrar o benefício principal para fora de vista.',
+    },
+    {
+      type: 'title',
+      text: 'O que o contador de píxeis está a medir',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Elemento', 'O que importa', 'Como usar o resultado'],
+      rows: [
+        ['Tag title', 'Largura renderizada em píxeis, não a contagem bruta de caracteres', 'Mantenha a palavra-chave principal e a promessa de clique visíveis antes do truncamento.'],
+        ['URL visível', 'Confiança visual e clareza do tópico', 'Use um caminho legível que reforce o destino do resultado.'],
+        ['Meta description', 'Uma área de snippet mais ampla com comportamento dependente da consulta', 'Coloque o benefício em primeiro plano, pois o Google pode encurtá-la ou reescrevê-la.'],
+        ['Modo dispositivo', 'Os cartões de desktop e mobile podem parecer diferentes', 'Verifique ambos antes de publicar metadados de páginas importantes.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Porque é que os limites de caracteres são um mau hábito de SEO',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'O conselho tradicional como "mantenha os títulos abaixo dos 60 caracteres" é conveniente, mas esconde o verdadeiro problema. Letras largas como W e M, palavras em maiúsculas, separadores, números e nomes de marca longos consomem todos espaços diferentes. A medição em píxeis torna o compromisso visível de imediato: pode ver se uma frase merece o seu lugar ou rouba espaço a uma mensagem mais forte.',
+    },
+    {
+      type: 'title',
+      text: 'Um fluxo de trabalho prático para melhores snippets',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Comece pela intenção:</strong> descreva o que o utilizador obtém, não apenas como a página se chama.',
+        '<strong>Teste o título completo:</strong> cole-o no simulador e observe a barra antes de publicar.',
+        '<strong>Remova palavras fracas:</strong> se a barra ficar vermelha, elimine o enchimento antes de cortar termos valiosos.',
+        '<strong>Verifique as reticências:</strong> se a pré-visualização truncada perder sentido, reescreva o título em vez de aceitar o corte.',
+        '<strong>Repita para a descrição:</strong> certifique-se de que a primeira frase transmite a proposta de valor por si só.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Quando a barra fica vermelha',
+      html: 'Uma barra vermelha não é um aviso de penalização. Significa que o texto atual é mais largo do que o alvo visual selecionado, pelo que o simulador o trunca com pontos. Trate isso como um sinal editorial: decida se as palavras ocultas são dispensáveis ou se o snippet precisa de uma estrutura mais afiada.',
+    },
+    {
+      type: 'title',
+      text: 'Limites, reescritas e expectativas realistas',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nenhum simulador pode garantir o snippet exato que o Google mostrará. O Google pode reescrever links de título, colocar termos da consulta em negrito, escolher texto da página em vez da meta description ou mostrar snippets diferentes para pesquisas diferentes. Esta ferramenta é mais útil como uma etapa rápida de redação e controlo de qualidade: deteta transbordos visuais óbvios antes de a página chegar à produção.',
+    },
+    {
+      type: 'summary',
+      title: 'Melhor utilização deste simulador SERP',
+      items: [
+        'Use a barra de píxeis para detetar transbordos visuais antes de publicar metadados.',
+        'Mantenha a intenção de pesquisa principal e a promessa de clique visíveis antes de qualquer reticência.',
+        'Obtenha metadados de URLs que permitam CORS e edite o resultado manualmente quando necessário.',
+        'Considere a pré-visualização como um guia de redação, pois o Google ainda pode reescrever snippets por consulta.',
+      ],
+    },
+  ],
+};

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

@@ -0,0 +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 всё ещё может переписывать сниппеты под каждый запрос.',
+      ],
+    },
+  ],
+};