@jjlmoya/utils-developer 1.15.0 → 1.16.0

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

package/src/tool/serpPixelSimulator/i18n/sv.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 = 'serp-pixel-simulator-raknare';
+const title = 'SERP Simulator och SEO Pixelräknare';
+const description = 'Förhandsgranska Google-liknande söksnuttar i realtid, mät bredden på titel och metabeskrivning i pixlar och se exakt var din text kommer att kapas.';
+
+const howTo = [
+  {
+    name: 'Ange title-taggen',
+    text: 'Skriv eller klistra in sidtiteln du vill testa. SERP-förhandsgranskningen och pixelmätaren uppdateras vid varje tangenttryckning.',
+  },
+  {
+    name: 'Lägg till den synliga URL:en',
+    text: 'Använd en realistisk domän och sökväg så att snutten liknar resultatet en sökare skulle skanna.',
+  },
+  {
+    name: 'Skriv metabeskrivningen',
+    text: 'Lägg till beskrivningstexten och titta på pixelfältet. När den överskrider den rekommenderade visuella bredden kapar förhandsgranskningen den med ellipser.',
+  },
+  {
+    name: 'Växla mellan dator och mobil',
+    text: 'Jämför titelrenderingen med kortbredden för dator eller mobil innan du publicerar metadata.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Varför räkna pixlar istället för tecken för SEO-titlar?',
+    answer: 'Googles sökresultatkort begränsas av visuell bredd. En titel med många smala bokstäver kan rymma fler tecken än en titel med breda bokstäver, versaler eller fetstilta glyfer. Pixelmätning ger en mer exakt förhandsvisning av det synliga resultatet.',
+  },
+  {
+    question: 'Garanterar detta exakt hur Google kommer att kapa min snutt?',
+    answer: 'Nej. Google kan skriva om titellänkar och snuttar, och renderingen kan variera beroende på sökfråga, enhet, språk och experiment. Verktyget är utformat som en praktisk visuell vägledning för att skriva metadata som är mindre troligt att kapas.',
+  },
+  {
+    question: 'Vilka pixelgränser använder simulatorn?',
+    answer: 'Standardgränsen för titel på dator är 580 px, på mobil 600 px och gränsen för metabeskrivning är 920 px. Dessa är skrivmål, inte officiella Google-gränser.',
+  },
+  {
+    question: 'Varför lägger förhandsgranskningen till ellipser?',
+    answer: 'När den uppmätta texten överskrider den tillgängliga pixelbredden kapar simulatorn strängen vid det sista passande tecknet och lägger till tre punkter, vilket matchar det praktiska beteende SEO-team behöver för att upptäcka meningsförlust.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Title-tagg',
+  titlePlaceholder: 'GameBob | Oberoende Utvecklingsstudio',
+  urlLabel: 'Synlig URL',
+  urlPlaceholder: 'https://www.gamebob.dev/sv/',
+  descriptionLabel: 'Metabeskrivning',
+  descriptionPlaceholder: 'Upptäck vår samling av verktyg och spel som är utformade för att lyfta ditt digitala arbetsflöde och underhållning.',
+  deviceLabel: 'Förhandsgranskningsläge',
+  desktopLabel: 'Dator',
+  mobileLabel: 'Mobil',
+  titlePixelsLabel: 'Titelbredd',
+  descriptionPixelsLabel: 'Beskrivningsbredd',
+  charactersLabel: 'tecken',
+  previewLabel: 'Live-förhandsgranskning i Google-stil',
+  tooLongLabel: 'För bred',
+  goodLabel: 'Passar',
+  emptyTitle: 'Din titel visas här',
+  emptyDescription: 'Förhandsgranskningen av din metabeskrivning visas här medan du skriver.',
+  defaultTitle: 'GameBob | Oberoende Utvecklingsstudio',
+  defaultUrl: 'https://www.gamebob.dev/sv/',
+  defaultDescription: 'Upptäck vår samling av verktyg och spel som är utformade för att lyfta ditt digitala arbetsflöde och underhållning.',
+  fallbackUrl: 'exempel.se',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Hämta',
+  fetchLoadingLabel: 'Hämtar...',
+  fetchSuccessLabel: 'Metadata laddades från URL:en.',
+  fetchCorsError: 'Webbläsaren kunde inte läsa denna sida. Den kan vara blockerad av CORS, en omdirigering, blandat innehåll eller en nätverksregel. Du kan fortfarande klistra in eller redigera metadata manuellt.',
+  fetchInvalidUrlError: 'Ange en giltig URL innan du hämtar metadata.',
+  fetchNoMetadataError: 'Sidan hämtades, men ingen titel eller metabeskrivning hittades.',
+  fetchGenericError: 'Metadata kunde inte hämtas från denna URL. Kontrollera adressen eller fyll i fälten manuellt.',
+};
+
+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: 'sv',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga frågor om SERP simulatorn',
+  faq,
+  bibliographyTitle: 'Dokumentation om sökresultat',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Sluta gissa hur ditt Google-resultat kommer att se ut',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'En title-tagg kan se perfekt ut i ett kalkylblad och ändå misslyckas i sökresultatet. Google reserverar inte utrymme efter teckenantal; det renderar text inuti ett visuellt kort. Det betyder att <strong>GameBob | Oberoende Utvecklingsstudio</strong> och en annan titel med samma antal tecken kan uppta mycket olika bredder beroende på bokstäverna, versaler, interpunktion och mellanrum.',
+    },
+    {
+      type: 'tip',
+      title: 'Regeln som verkligen hjälper',
+      html: 'Skriv snutten så att det viktiga löftet överlever ellipsen. Placera sidtypen, sökintentionen och den starkaste anledningen att klicka före pixelgränsen. Varumärkesnamn är användbara, men de ska inte trycka ut huvudfördelen ur sikte.',
+    },
+    {
+      type: 'title',
+      text: 'Vad pixelräknaren mäter',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Element', 'Vad som spelar roll', 'Hur du använder resultatet'],
+      rows: [
+        ['Title-tagg', 'Renderad bredd i pixlar, inte antal tecken', 'Håll det primära nyckelordet och klicklöftet synliga före kapningen.'],
+        ['Synlig URL', 'Visuellt förtroende och ämnestydehet', 'Använd en läsbar sökväg som förstärker vart resultatet leder.'],
+        ['Metabeskrivning', 'Ett bredare snuttområde med frågeberoende beteende', 'Placera fördelen först eftersom Google kan förkorta eller skriva om den.'],
+        ['Enhetsläge', 'Dator- och mobilkort kan kännas olika', 'Kontrollera båda innan du publicerar metadata för viktiga sidor.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Varför teckengränser är en svag SEO-vana',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Traditionella råd som "håll titlar under 60 tecken" är bekväma, men döljer det verkliga problemet. Breda bokstäver som W och M, versaler, avgränsare, siffror och långa varumärkesnamn tar alla olika utrymme. Pixelmätning gör avvägningen omedelbart synlig: du kan se om en fras förtjänar sin plats eller stjäl utrymme från ett starkare budskap.',
+    },
+    {
+      type: 'title',
+      text: 'Ett praktiskt arbetsflöde för bättre snuttar',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Börja med intentionen:</strong> beskriv vad användaren får, inte bara vad sidan heter.',
+        '<strong>Testa hela titeln:</strong> klistra in den i simulatorn och titta på fältet innan publicering.',
+        '<strong>Ta bort svaga ord:</strong> om fältet blir rött, ta bort utfyllnadsord innan du kapar värdefulla termer.',
+        '<strong>Kontrollera ellipsen:</strong> om den kapade förhandsgranskningen tappar mening, skriv om titeln istället för att acceptera kapningen.',
+        '<strong>Upprepa för beskrivningen:</strong> se till att den första meningen bär värdeerbjudandet på egen hand.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'När fältet blir rött',
+      html: 'Ett rött fält är inte en straffvarning. Det betyder att den aktuella texten är bredare än det valda visuella målet, så simulatorn kapar den med punkter. Behandla det som en redaktionell signal: avgör om de dolda orden är onödiga eller om snutten behöver en skarpare struktur.',
+    },
+    {
+      type: 'title',
+      text: 'Begränsningar, omskrivningar och realistiska förväntningar',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ingen simulator kan garantera den exakta snutt Google kommer att visa. Google kan skriva om titellänkar, fetstilta söktermer, välja sidtext istället för metabeskrivningen eller visa olika snuttar för olika sökningar. Detta verktyg är bäst lämpat som ett snabbt skriv- och QA-steg: det fångar uppenbar visuell överskridning innan sidan når produktion.',
+    },
+    {
+      type: 'summary',
+      title: 'Bästa användning av denna SERP simulator',
+      items: [
+        'Använd pixelfältet för att fånga visuell överskridning innan du publicerar metadata.',
+        'Håll den huvudsakliga sökintentionen och klicklöftet synliga före någon ellips.',
+        'Hämta metadata från URL:er som tillåter CORS och redigera sedan resultatet manuellt vid behov.',
+        'Betrakta förhandsgranskningen som en skrivguide, eftersom Google fortfarande kan skriva om snuttar per sökfråga.',
+      ],
+    },
+  ],
+};