@jjlmoya/utils-developer 1.15.0 → 1.16.0

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

@@ -0,0 +1,213 @@
+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';
+const title = 'SERP Simulator and SEO Pixel Counter';
+const description = 'Preview Google-style search snippets in real time, measure title and meta description width by pixels, and see exactly where your copy will be trimmed.';
+
+const howTo = [
+  {
+    name: 'Enter the title tag',
+    text: 'Type or paste the page title you want to test. The SERP preview and pixel meter update on every keystroke.',
+  },
+  {
+    name: 'Add the visible URL',
+    text: 'Use a realistic domain and path so the snippet resembles the result a searcher would scan.',
+  },
+  {
+    name: 'Write the meta description',
+    text: 'Add the description copy and watch the pixel bar. When it exceeds the recommended visual width, the preview trims it with an ellipsis.',
+  },
+  {
+    name: 'Switch desktop and mobile',
+    text: 'Compare title rendering with a desktop or mobile card width before publishing metadata.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Why count pixels instead of characters for SEO titles?',
+    answer: 'Google search cards are constrained by visual width. A title with many narrow letters can fit more characters than a title with wide letters, uppercase words, or bold-looking glyphs. Pixel measurement gives a closer preview of the visible result.',
+  },
+  {
+    question: 'Does this guarantee exactly how Google will truncate my snippet?',
+    answer: 'No. Google can rewrite title links and snippets, and rendering can vary by query, device, language and experiment. The tool is designed as a practical visual guardrail for writing metadata that is less likely to be cut off.',
+  },
+  {
+    question: 'What pixel limits does the simulator use?',
+    answer: 'The default desktop title limit is 580 px, the mobile title limit is 600 px, and the meta description guardrail is 920 px. These are writing targets, not official Google limits.',
+  },
+  {
+    question: 'Why does the preview add an ellipsis?',
+    answer: 'When the measured text exceeds the available pixel width, the simulator trims the string at the last fitting character and appends three dots, matching the practical behavior SEO teams need to spot lost meaning.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Title tag',
+  titlePlaceholder: 'GameBob | Indie Development Studio',
+  urlLabel: 'Displayed URL',
+  urlPlaceholder: 'https://www.gamebob.dev/en/',
+  descriptionLabel: 'Meta description',
+  descriptionPlaceholder: 'Discover our collection of tools and games designed to elevate your digital workflow and entertainment.',
+  deviceLabel: 'Preview mode',
+  desktopLabel: 'Desktop',
+  mobileLabel: 'Mobile',
+  titlePixelsLabel: 'Title width',
+  descriptionPixelsLabel: 'Description width',
+  charactersLabel: 'characters',
+  previewLabel: 'Live Google-style preview',
+  tooLongLabel: 'Too wide',
+  goodLabel: 'Fits',
+  emptyTitle: 'Your title will appear here',
+  emptyDescription: 'Your meta description preview will appear here as you type.',
+  defaultTitle: 'GameBob | Indie Development Studio',
+  defaultUrl: 'https://www.gamebob.dev/en/',
+  defaultDescription: 'Discover our collection of tools and games designed to elevate your digital workflow and entertainment.',
+  fallbackUrl: 'example.com',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Fetch',
+  fetchLoadingLabel: 'Fetching...',
+  fetchSuccessLabel: 'Metadata loaded from the URL.',
+  fetchCorsError: 'The browser could not read this page. It may be blocked by CORS, a redirect, mixed content or a network rule. You can still paste or edit the metadata manually.',
+  fetchInvalidUrlError: 'Enter a valid URL before fetching metadata.',
+  fetchNoMetadataError: 'The page was fetched, but no title or meta description was found.',
+  fetchGenericError: 'Metadata could not be fetched from this URL. Check the address or paste the fields manually.',
+};
+
+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',
+  },
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'SERP simulator FAQ',
+  faq,
+  bibliographyTitle: 'Search result documentation',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Stop guessing how your Google result will look',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'A title tag can look perfect in a spreadsheet and still break in the search result. Google does not reserve space by character count; it renders text inside a visual card. That means <strong>GameBob | Indie Development Studio</strong> and another title with the same number of characters can occupy very different widths depending on the letters, casing, punctuation and spacing.',
+    },
+    {
+      type: 'tip',
+      title: 'The rule that actually helps',
+      html: 'Write the snippet so the important promise survives the ellipsis. Put the page type, the search intent and the strongest reason to click before the pixel limit. Brand names are useful, but they should not push the main benefit out of view.',
+    },
+    {
+      type: 'title',
+      text: 'What the pixel counter is measuring',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Element', 'What matters', 'How to use the result'],
+      rows: [
+        ['Title tag', 'Rendered width in pixels, not raw character count', 'Keep the primary keyword and click promise visible before truncation.'],
+        ['Displayed URL', 'Visual trust and topic clarity', 'Use a readable path that reinforces where the result leads.'],
+        ['Meta description', 'A wider snippet area with query-dependent behavior', 'Front-load the benefit because Google may shorten or rewrite it.'],
+        ['Device mode', 'Desktop and mobile cards can feel different', 'Check both before shipping metadata for important pages.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Why character limits are a weak SEO habit',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Traditional advice such as "keep titles under 60 characters" is convenient, but it hides the real problem. Wide letters like W and M, uppercase words, separators, numbers and long brand names all consume different space. Pixel measurement makes the trade-off visible immediately: you can see whether a phrase earns its place or steals room from a stronger message.',
+    },
+    {
+      type: 'title',
+      text: 'A practical workflow for better snippets',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Start with intent:</strong> describe what the user gets, not just what the page is called.',
+        '<strong>Test the full title:</strong> paste it into the simulator and watch the bar before publishing.',
+        '<strong>Move weak words out:</strong> if the bar turns red, remove filler before cutting valuable terms.',
+        '<strong>Check the ellipsis:</strong> if the truncated preview loses meaning, rewrite the title instead of accepting the cut.',
+        '<strong>Repeat for the description:</strong> make sure the first sentence carries the value proposition on its own.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'When the bar turns red',
+      html: 'A red bar is not a penalty warning. It means the current text is wider than the selected visual target, so the simulator trims it with dots. Treat that as an editorial signal: decide whether the hidden words are disposable, or whether the snippet needs a sharper structure.',
+    },
+    {
+      type: 'title',
+      text: 'Limits, rewrites and real-world expectations',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'No simulator can guarantee the exact snippet Google will show. Google may rewrite title links, bold query terms, choose page text instead of the meta description, or display different snippets for different searches. This tool is best used as a fast writing and QA step: it catches obvious visual overflow before the page reaches production.',
+    },
+    {
+      type: 'summary',
+      title: 'Best use of this SERP simulator',
+      items: [
+        'Use the pixel bar to catch visual overflow before publishing metadata.',
+        'Keep the main search intent and click promise visible before any ellipsis.',
+        'Fetch metadata from URLs that allow CORS, then edit the result manually when needed.',
+        'Treat the preview as a writing guardrail, because Google can still rewrite snippets per query.',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/i18n/es.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-pixeles';
+const title = 'Simulador SERP y Contador de Píxeles SEO';
+const description = 'Previsualiza fragmentos de búsqueda estilo Google en tiempo real, mide la anchura en píxeles del título y la meta descripción, y ve exactamente dónde se truncará tu texto.';
+
+const howTo = [
+  {
+    name: 'Introduce la etiqueta title',
+    text: 'Escribe o pega el título de página que quieres probar. La vista previa SERP y el medidor de píxeles se actualizan con cada pulsación.',
+  },
+  {
+    name: 'Añade la URL visible',
+    text: 'Usa un dominio y ruta realistas para que el fragmento se parezca al resultado que un buscador analizaría.',
+  },
+  {
+    name: 'Escribe la meta descripción',
+    text: 'Añade el texto de la descripción y observa la barra de píxeles. Cuando supera el ancho visual recomendado, la vista previa la trunca con puntos suspensivos.',
+  },
+  {
+    name: 'Alterna entre escritorio y móvil',
+    text: 'Compara la representación del título con el ancho de tarjeta de escritorio o móvil antes de publicar los metadatos.',
+  },
+];
+
+const faq = [
+  {
+    question: '¿Por qué contar píxeles en vez de caracteres para los títulos SEO?',
+    answer: 'Las tarjetas de resultados de Google están limitadas por el ancho visual. Un título con muchas letras estrechas puede albergar más caracteres que uno con letras anchas, mayúsculas o glifos de aspecto grueso. La medición en píxeles ofrece una vista previa más fiel del resultado visible.',
+  },
+  {
+    question: '¿Garantiza esto exactamente cómo truncará Google mi fragmento?',
+    answer: 'No. Google puede reescribir los enlaces de título y los fragmentos, y la representación puede variar según la consulta, el dispositivo, el idioma y los experimentos. La herramienta está diseñada como una guía visual práctica para redactar metadatos con menos probabilidades de ser cortados.',
+  },
+  {
+    question: '¿Qué límites de píxeles usa el simulador?',
+    answer: 'El límite predeterminado del título en escritorio es de 580 px, el del título en móvil es de 600 px y el de la meta descripción es de 920 px. Son objetivos de redacción, no límites oficiales de Google.',
+  },
+  {
+    question: '¿Por qué la vista previa añade puntos suspensivos?',
+    answer: 'Cuando el texto medido supera el ancho de píxeles disponible, el simulador trunca la cadena en el último carácter que cabe y añade tres puntos, imitando el comportamiento práctico que los equipos SEO necesitan para detectar pérdida de significado.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Etiqueta title',
+  titlePlaceholder: 'GameBob | Estudio de Desarrollo Indie',
+  urlLabel: 'URL visible',
+  urlPlaceholder: 'https://www.gamebob.dev/es/',
+  descriptionLabel: 'Meta descripción',
+  descriptionPlaceholder: 'Descubre nuestra colección de herramientas y juegos diseñados para elevar tu flujo de trabajo digital y entretenimiento.',
+  deviceLabel: 'Modo de vista previa',
+  desktopLabel: 'Escritorio',
+  mobileLabel: 'Móvil',
+  titlePixelsLabel: 'Ancho del título',
+  descriptionPixelsLabel: 'Ancho de la descripción',
+  charactersLabel: 'caracteres',
+  previewLabel: 'Vista previa estilo Google',
+  tooLongLabel: 'Demasiado ancho',
+  goodLabel: 'Correcto',
+  emptyTitle: 'Tu título aparecerá aquí',
+  emptyDescription: 'La vista previa de tu meta descripción aparecerá aquí mientras escribes.',
+  defaultTitle: 'GameBob | Estudio de Desarrollo Indie',
+  defaultUrl: 'https://www.gamebob.dev/es/',
+  defaultDescription: 'Descubre nuestra colección de herramientas y juegos diseñados para elevar tu flujo de trabajo digital y entretenimiento.',
+  fallbackUrl: 'ejemplo.com',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Obtener',
+  fetchLoadingLabel: 'Obteniendo...',
+  fetchSuccessLabel: 'Metadatos cargados desde la URL.',
+  fetchCorsError: 'El navegador no pudo leer esta página. Puede estar bloqueada por CORS, una redirección, contenido mixto o una regla de red. Puedes pegar o editar los metadatos manualmente.',
+  fetchInvalidUrlError: 'Introduce una URL válida antes de obtener los metadatos.',
+  fetchNoMetadataError: 'La página se obtuvo, pero no se encontró título ni meta descripción.',
+  fetchGenericError: 'No se pudieron obtener los metadatos de esta URL. Comprueba la dirección o completa los 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: 'es',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas frecuentes sobre el simulador SERP',
+  faq,
+  bibliographyTitle: 'Documentación sobre resultados de búsqueda',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Deja de adivinar cómo se verá tu resultado en Google',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Un title tag puede parecer perfecto en una hoja de cálculo y aun así fallar en el resultado de búsqueda. Google no reserva espacio por número de caracteres; renderiza el texto dentro de una tarjeta visual. Eso significa que <strong>GameBob | Estudio de Desarrollo Indie</strong> y otro título con la misma cantidad de caracteres pueden ocupar anchos muy diferentes según las letras, mayúsculas, puntuación y espaciado.',
+    },
+    {
+      type: 'tip',
+      title: 'La regla que realmente ayuda',
+      html: 'Escribe el fragmento para que la promesa importante sobreviva a los puntos suspensivos. Pon el tipo de página, la intención de búsqueda y la razón más fuerte para hacer clic antes del límite de píxeles. Los nombres de marca son útiles, pero no deben desplazar el beneficio principal fuera de la vista.',
+    },
+    {
+      type: 'title',
+      text: 'Qué mide el contador de píxeles',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Elemento', 'Qué importa', 'Cómo usar el resultado'],
+      rows: [
+        ['Etiqueta title', 'Ancho renderizado en píxeles, no el número de caracteres', 'Mantén la palabra clave principal y la promesa de clic visibles antes del truncamiento.'],
+        ['URL visible', 'Confianza visual y claridad del tema', 'Usa una ruta legible que refuerce hacia dónde lleva el resultado.'],
+        ['Meta descripción', 'Un área de fragmento más amplia con comportamiento dependiente de la consulta', 'Pon el beneficio al principio porque Google puede acortarla o reescribirla.'],
+        ['Modo dispositivo', 'Las tarjetas de escritorio y móvil pueden sentirse diferentes', 'Revisa ambas antes de publicar metadatos de páginas importantes.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Por qué los límites de caracteres son un mal hábito SEO',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'El consejo tradicional de "mantén los títulos por debajo de 60 caracteres" es cómodo, pero oculta el problema real. Letras anchas como la W y la M, palabras en mayúsculas, separadores, números y nombres de marca largos consumen espacios diferentes. La medición en píxeles hace visible el compromiso de inmediato: puedes ver si una frase se gana su sitio o le roba espacio a un mensaje más fuerte.',
+    },
+    {
+      type: 'title',
+      text: 'Un flujo de trabajo práctico para mejores fragmentos',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Empieza por la intención:</strong> describe lo que obtiene el usuario, no solo cómo se llama la página.',
+        '<strong>Prueba el título completo:</strong> pégalo en el simulador y observa la barra antes de publicar.',
+        '<strong>Quita las palabras débiles:</strong> si la barra se vuelve roja, elimina relleno antes de recortar términos valiosos.',
+        '<strong>Revisa los puntos suspensivos:</strong> si la vista previa truncada pierde sentido, reescribe el título en vez de aceptar el corte.',
+        '<strong>Repite para la descripción:</strong> asegúrate de que la primera frase transmita la propuesta de valor por sí sola.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Cuando la barra se vuelve roja',
+      html: 'Una barra roja no es un aviso de penalización. Significa que el texto actual es más ancho que el objetivo visual seleccionado, por lo que el simulador lo trunca con puntos. Trátalo como una señal editorial: decide si las palabras ocultas son prescindibles o si el fragmento necesita una estructura más afilada.',
+    },
+    {
+      type: 'title',
+      text: 'Límites, reescrituras y expectativas realistas',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ningún simulador puede garantizar el fragmento exacto que Google mostrará. Google puede reescribir los enlaces de título, poner en negrita los términos de la consulta, elegir texto de la página en lugar de la meta descripción o mostrar fragmentos distintos para diferentes búsquedas. Esta herramienta funciona mejor como un paso rápido de redacción y control de calidad: detecta desbordamientos visuales evidentes antes de que la página llegue a producción.',
+    },
+    {
+      type: 'summary',
+      title: 'Mejor uso de este simulador SERP',
+      items: [
+        'Usa la barra de píxeles para detectar desbordamientos visuales antes de publicar metadatos.',
+        'Mantén la intención de búsqueda principal y la promesa de clic visibles antes de cualquier elipsis.',
+        'Obtén metadatos de URLs que permitan CORS y edita el resultado manualmente cuando sea necesario.',
+        'Considera la vista previa como una guía de redacción, ya que Google puede reescribir fragmentos según la consulta.',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/i18n/fr.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 = 'simulateur-serp-compteur-pixels';
+const title = 'Simulateur SERP et Compteur de Pixels SEO';
+const description = 'Prévisualisez des extraits de recherche façon Google en temps réel, mesurez la largeur en pixels du titre et de la meta description, et voyez exactement où votre texte sera tronqué.';
+
+const howTo = [
+  {
+    name: 'Saisissez la balise title',
+    text: 'Tapez ou collez le titre de page que vous souhaitez tester. L\'aperçu SERP et le compteur de pixels se mettent à jour à chaque frappe.',
+  },
+  {
+    name: 'Ajoutez l\'URL visible',
+    text: 'Utilisez un domaine et un chemin réalistes pour que l\'extrait ressemble au résultat qu\'un internaute analyserait.',
+  },
+  {
+    name: 'Rédigez la meta description',
+    text: 'Ajoutez le texte de la description et surveillez la barre de pixels. Lorsqu\'elle dépasse la largeur visuelle recommandée, l\'aperçu la tronque avec des points de suspension.',
+  },
+  {
+    name: 'Alternez entre bureau et mobile',
+    text: 'Comparez le rendu du titre avec la largeur de carte bureau ou mobile avant de publier les métadonnées.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Pourquoi compter les pixels plutôt que les caractères pour les titres SEO ?',
+    answer: 'Les fiches de résultats Google sont limitées par la largeur visuelle. Un titre composé de nombreuses lettres étroites peut contenir plus de caractères qu\'un titre avec des lettres larges, des majuscules ou des glyphes épais. La mesure en pixels donne un aperçu plus fidèle du résultat visible.',
+  },
+  {
+    question: 'Cela garantit-il exactement la façon dont Google tronquera mon extrait ?',
+    answer: 'Non. Google peut réécrire les liens de titre et les extraits, et le rendu peut varier selon la requête, l\'appareil, la langue et les expérimentations. L\'outil est conçu comme un garde-fou visuel pratique pour rédiger des métadonnées moins susceptibles d\'être coupées.',
+  },
+  {
+    question: 'Quelles limites de pixels le simulateur utilise-t-il ?',
+    answer: 'La limite par défaut du titre sur bureau est de 580 px, celle du titre sur mobile est de 600 px, et celle de la meta description est de 920 px. Ce sont des objectifs de rédaction, pas des limites officielles de Google.',
+  },
+  {
+    question: 'Pourquoi l\'aperçu ajoute-t-il des points de suspension ?',
+    answer: 'Lorsque le texte mesuré dépasse la largeur en pixels disponible, le simulateur tronque la chaîne au dernier caractère qui tient et ajoute trois points, reproduisant le comportement pratique dont les équipes SEO ont besoin pour repérer une perte de sens.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Balise title',
+  titlePlaceholder: 'GameBob | Studio de Développement Indépendant',
+  urlLabel: 'URL visible',
+  urlPlaceholder: 'https://www.gamebob.dev/fr/',
+  descriptionLabel: 'Meta description',
+  descriptionPlaceholder: 'Découvrez notre collection d\'outils et de jeux conçus pour enrichir votre flux de travail numérique et vos loisirs.',
+  deviceLabel: 'Mode d\'aperçu',
+  desktopLabel: 'Bureau',
+  mobileLabel: 'Mobile',
+  titlePixelsLabel: 'Largeur du titre',
+  descriptionPixelsLabel: 'Largeur de la description',
+  charactersLabel: 'caractères',
+  previewLabel: 'Aperçu en direct style Google',
+  tooLongLabel: 'Trop large',
+  goodLabel: 'Correct',
+  emptyTitle: 'Votre titre apparaîtra ici',
+  emptyDescription: 'L\'aperçu de votre meta description apparaîtra ici au fur et à mesure que vous tapez.',
+  defaultTitle: 'GameBob | Studio de Développement Indépendant',
+  defaultUrl: 'https://www.gamebob.dev/fr/',
+  defaultDescription: 'Découvrez notre collection d\'outils et de jeux conçus pour enrichir votre flux de travail numérique et vos loisirs.',
+  fallbackUrl: 'exemple.com',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Récupérer',
+  fetchLoadingLabel: 'Récupération...',
+  fetchSuccessLabel: 'Métadonnées chargées depuis l\'URL.',
+  fetchCorsError: 'Le navigateur n\'a pas pu lire cette page. Elle peut être bloquée par CORS, une redirection, du contenu mixte ou une règle réseau. Vous pouvez toujours coller ou modifier les métadonnées manuellement.',
+  fetchInvalidUrlError: 'Saisissez une URL valide avant de récupérer les métadonnées.',
+  fetchNoMetadataError: 'La page a été récupérée, mais aucun titre ni meta description n\'a été trouvé.',
+  fetchGenericError: 'Les métadonnées n\'ont pas pu être récupérées depuis cette URL. Vérifiez l\'adresse ou remplissez les champs manuellement.',
+};
+
+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: 'fr',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'FAQ du simulateur SERP',
+  faq,
+  bibliographyTitle: 'Documentation sur les résultats de recherche',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Arrêtez de deviner à quoi ressemblera votre résultat Google',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Une balise title peut sembler parfaite dans un tableur et pourtant échouer dans le résultat de recherche. Google ne réserve pas d\'espace par nombre de caractères ; il rend le texte à l\'intérieur d\'une carte visuelle. Cela signifie que <strong>GameBob | Studio de Développement Indépendant</strong> et un autre titre avec le même nombre de caractères peuvent occuper des largeurs très différentes selon les lettres, les majuscules, la ponctuation et l\'espacement.',
+    },
+    {
+      type: 'tip',
+      title: 'La règle qui aide vraiment',
+      html: 'Rédigez l\'extrait pour que la promesse importante survive aux points de suspension. Placez le type de page, l\'intention de recherche et la raison la plus forte de cliquer avant la limite de pixels. Les noms de marque sont utiles, mais ils ne doivent pas repousser le bénéfice principal hors de vue.',
+    },
+    {
+      type: 'title',
+      text: 'Ce que mesure le compteur de pixels',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Élément', 'Ce qui compte', 'Comment utiliser le résultat'],
+      rows: [
+        ['Balise title', 'Largeur rendue en pixels, pas le nombre brut de caractères', 'Gardez le mot-clé principal et la promesse de clic visibles avant la troncature.'],
+        ['URL visible', 'Confiance visuelle et clarté du sujet', 'Utilisez un chemin lisible qui renforce la destination du résultat.'],
+        ['Meta description', 'Une zone d\'extrait plus large avec un comportement dépendant de la requête', 'Placez le bénéfice en premier car Google peut la raccourcir ou la réécrire.'],
+        ['Mode appareil', 'Les cartes bureau et mobile peuvent sembler différentes', 'Vérifiez les deux avant de publier les métadonnées des pages importantes.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Pourquoi les limites de caractères sont une mauvaise habitude SEO',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Le conseil traditionnel "gardez les titres sous 60 caractères" est pratique, mais il masque le vrai problème. Les lettres larges comme le W et le M, les mots en majuscules, les séparateurs, les chiffres et les longs noms de marque consomment tous un espace différent. La mesure en pixels rend le compromis visible immédiatement: vous pouvez voir si une phrase mérite sa place ou vole de l\'espace à un message plus fort.',
+    },
+    {
+      type: 'title',
+      text: 'Un flux de travail pratique pour de meilleurs extraits',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Commencez par l\'intention :</strong> décrivez ce que l\'utilisateur obtient, pas seulement comment la page s\'appelle.',
+        '<strong>Testez le titre complet :</strong> collez-le dans le simulateur et surveillez la barre avant de publier.',
+        '<strong>Supprimez les mots faibles :</strong> si la barre devient rouge, retirez le remplissage avant de couper des termes précieux.',
+        '<strong>Vérifiez les points de suspension :</strong> si l\'aperçu tronqué perd son sens, réécrivez le titre au lieu d\'accepter la coupure.',
+        '<strong>Répétez pour la description :</strong> assurez-vous que la première phrase porte la proposition de valeur à elle seule.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Quand la barre devient rouge',
+      html: 'Une barre rouge n\'est pas un avertissement de pénalité. Cela signifie que le texte actuel est plus large que la cible visuelle sélectionnée, donc le simulateur le tronque avec des points. Considérez cela comme un signal éditorial: décidez si les mots cachés sont jetables ou si l\'extrait a besoin d\'une structure plus affûtée.',
+    },
+    {
+      type: 'title',
+      text: 'Limites, réécritures et attentes réalistes',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Aucun simulateur ne peut garantir l\'extrait exact que Google affichera. Google peut réécrire les liens de titre, mettre en gras les termes de la requête, choisir le texte de la page au lieu de la meta description, ou afficher des extraits différents pour différentes recherches. Cet outil est plus efficace comme étape rapide de rédaction et de contrôle qualité: il détecte les débordements visuels évidents avant que la page n\'arrive en production.',
+    },
+    {
+      type: 'summary',
+      title: 'Meilleure utilisation de ce simulateur SERP',
+      items: [
+        'Utilisez la barre de pixels pour détecter les débordements visuels avant de publier les métadonnées.',
+        'Gardez l\'intention de recherche principale et la promesse de clic visibles avant toute ellipse.',
+        'Récupérez les métadonnées des URL qui autorisent le CORS, puis modifiez le résultat manuellement si nécessaire.',
+        'Considérez l\'aperçu comme un guide de rédaction, car Google peut encore réécrire les extraits selon la requête.',
+      ],
+    },
+  ],
+};