@jjlmoya/utils-developer 1.15.0 → 1.17.0

package/src/tool/serpPixelSimulator/i18n/de.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-simulator-pixel-zaehler';
+const title = 'SERP Simulator und SEO Pixelzähler';
+const description = 'Vorschau von Google-ähnlichen Such-Snippets in Echtzeit, messen Sie die Breite von Titel und Meta-Beschreibung in Pixeln und sehen Sie genau, wo Ihr Text abgeschnitten wird.';
+
+const howTo = [
+  {
+    name: 'Geben Sie den Title-Tag ein',
+    text: 'Tippen oder fügen Sie den Seitentitel ein, den Sie testen möchten. Die SERP-Vorschau und der Pixelmesser werden bei jedem Tastendruck aktualisiert.',
+  },
+  {
+    name: 'Fügen Sie die sichtbare URL hinzu',
+    text: 'Verwenden Sie eine realistische Domain und einen Pfad, damit das Snippet dem Ergebnis ähnelt, das ein Suchender scannen würde.',
+  },
+  {
+    name: 'Schreiben Sie die Meta-Beschreibung',
+    text: 'Fügen Sie den Beschreibungstext hinzu und beobachten Sie den Pixelbalken. Wenn er die empfohlene visuelle Breite überschreitet, kürzt die Vorschau ihn mit Auslassungspunkten.',
+  },
+  {
+    name: 'Wechseln Sie zwischen Desktop und Mobilgerät',
+    text: 'Vergleichen Sie die Titeldarstellung mit der Desktop- oder mobilen Kartenbreite, bevor Sie Metadaten veröffentlichen.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Warum Pixel statt Zeichen für SEO-Titel zählen?',
+    answer: 'Google-Suchergebniskarten sind durch die visuelle Breite begrenzt. Ein Titel mit vielen schmalen Buchstaben kann mehr Zeichen enthalten als ein Titel mit breiten Buchstaben, Großbuchstaben oder fett wirkenden Glyphen. Die Pixelmessung liefert eine genauere Vorschau des sichtbaren Ergebnisses.',
+  },
+  {
+    question: 'Garantiert dies genau, wie Google mein Snippet abschneidet?',
+    answer: 'Nein. Google kann Titel-Links und Snippets umschreiben, und die Darstellung kann je nach Suchanfrage, Gerät, Sprache und Experiment variieren. Das Tool ist als praktische visuelle Orientierungshilfe gedacht, um Metadaten zu schreiben, die weniger wahrscheinlich abgeschnitten werden.',
+  },
+  {
+    question: 'Welche Pixelgrenzen verwendet der Simulator?',
+    answer: 'Die Standard-Titelgrenze für Desktop beträgt 580 px, für Mobilgeräte 600 px und die Meta-Beschreibungsgrenze liegt bei 920 px. Dies sind Schreibziele, keine offiziellen Google-Grenzwerte.',
+  },
+  {
+    question: 'Warum fügt die Vorschau Auslassungspunkte hinzu?',
+    answer: 'Wenn der gemessene Text die verfügbare Pixelbreite überschreitet, kürzt der Simulator die Zeichenkette am letzten passenden Zeichen und hängt drei Punkte an, was dem praktischen Verhalten entspricht, das SEO-Teams benötigen, um Bedeutungsverlust zu erkennen.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Title-Tag',
+  titlePlaceholder: 'GameBob | Indie-Entwicklungsstudio',
+  urlLabel: 'Sichtbare URL',
+  urlPlaceholder: 'https://www.gamebob.dev/de/',
+  descriptionLabel: 'Meta-Beschreibung',
+  descriptionPlaceholder: 'Entdecken Sie unsere Sammlung von Tools und Spielen, die Ihren digitalen Workflow und Ihre Unterhaltung bereichern.',
+  deviceLabel: 'Vorschaumodus',
+  desktopLabel: 'Desktop',
+  mobileLabel: 'Mobil',
+  titlePixelsLabel: 'Titelbreite',
+  descriptionPixelsLabel: 'Beschreibungsbreite',
+  charactersLabel: 'Zeichen',
+  previewLabel: 'Live-Vorschau im Google-Stil',
+  tooLongLabel: 'Zu breit',
+  goodLabel: 'Passt',
+  emptyTitle: 'Ihr Titel erscheint hier',
+  emptyDescription: 'Die Vorschau Ihrer Meta-Beschreibung erscheint hier, während Sie tippen.',
+  defaultTitle: 'GameBob | Indie-Entwicklungsstudio',
+  defaultUrl: 'https://www.gamebob.dev/de/',
+  defaultDescription: 'Entdecken Sie unsere Sammlung von Tools und Spielen, die Ihren digitalen Workflow und Ihre Unterhaltung bereichern.',
+  fallbackUrl: 'beispiel.de',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Abrufen',
+  fetchLoadingLabel: 'Wird abgerufen...',
+  fetchSuccessLabel: 'Metadaten von der URL geladen.',
+  fetchCorsError: 'Der Browser konnte diese Seite nicht lesen. Sie könnte durch CORS, eine Weiterleitung, gemischten Inhalt oder eine Netzwerkregel blockiert sein. Sie können die Metadaten weiterhin manuell einfügen oder bearbeiten.',
+  fetchInvalidUrlError: 'Geben Sie eine gültige URL ein, bevor Sie Metadaten abrufen.',
+  fetchNoMetadataError: 'Die Seite wurde abgerufen, aber es wurde kein Titel oder keine Meta-Beschreibung gefunden.',
+  fetchGenericError: 'Metadaten konnten von dieser URL nicht abgerufen werden. Überprüfen Sie die Adresse oder füllen Sie die Felder manuell aus.',
+};
+
+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: 'de',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen zum SERP-Simulator',
+  faq,
+  bibliographyTitle: 'Dokumentation zu Suchergebnissen',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Hören Sie auf zu raten, wie Ihr Google-Ergebnis aussehen wird',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ein Title-Tag kann in einer Tabelle perfekt aussehen und im Suchergebnis trotzdem versagen. Google reserviert keinen Platz nach Zeichenanzahl; es rendert Text innerhalb einer visuellen Karte. Das bedeutet, dass <strong>GameBob | Indie-Entwicklungsstudio</strong> und ein anderer Titel mit der gleichen Zeichenanzahl je nach Buchstaben, Groß-/Kleinschreibung, Zeichensetzung und Abständen sehr unterschiedliche Breiten einnehmen können.',
+    },
+    {
+      type: 'tip',
+      title: 'Die Regel, die wirklich hilft',
+      html: 'Schreiben Sie das Snippet so, dass das wichtige Versprechen die Auslassungspunkte überlebt. Platzieren Sie Seitentyp, Suchabsicht und den stärksten Klickgrund vor der Pixelgrenze. Markennamen sind nützlich, sollten aber den Hauptnutzen nicht aus dem Blickfeld drängen.',
+    },
+    {
+      type: 'title',
+      text: 'Was der Pixelzähler misst',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Element', 'Was zählt', 'So nutzen Sie das Ergebnis'],
+      rows: [
+        ['Title-Tag', 'Gerenderte Breite in Pixeln, nicht rohe Zeichenanzahl', 'Halten Sie das Hauptkeyword und das Klickversprechen vor der Kürzung sichtbar.'],
+        ['Sichtbare URL', 'Visuelles Vertrauen und Themenklarheit', 'Verwenden Sie einen lesbaren Pfad, der das Ziel des Ergebnisses unterstreicht.'],
+        ['Meta-Beschreibung', 'Ein breiterer Snippet-Bereich mit suchanfragenabhängigem Verhalten', 'Stellen Sie den Nutzen an den Anfang, da Google ihn kürzen oder umschreiben kann.'],
+        ['Gerätemodus', 'Desktop- und Mobilkarten können sich unterschiedlich anfühlen', 'Überprüfen Sie beide, bevor Sie Metadaten für wichtige Seiten veröffentlichen.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Warum Zeichenbegrenzungen eine schwache SEO-Gewohnheit sind',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Der traditionelle Ratschlag wie "Titel unter 60 Zeichen halten" ist bequem, verschleiert aber das eigentliche Problem. Breite Buchstaben wie W und M, Großbuchstaben, Trennzeichen, Zahlen und lange Markennamen verbrauchen alle unterschiedlichen Platz. Die Pixelmessung macht den Kompromiss sofort sichtbar: Sie können sehen, ob eine Phrase ihren Platz verdient oder Raum von einer stärkeren Botschaft stiehlt.',
+    },
+    {
+      type: 'title',
+      text: 'Ein praktischer Workflow für bessere Snippets',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Beginnen Sie mit der Absicht:</strong> beschreiben Sie, was der Nutzer bekommt, nicht nur, wie die Seite heißt.',
+        '<strong>Testen Sie den vollständigen Titel:</strong> fügen Sie ihn in den Simulator ein und beobachten Sie den Balken vor der Veröffentlichung.',
+        '<strong>Entfernen Sie schwache Wörter:</strong> wenn der Balken rot wird, entfernen Sie Füllwörter, bevor Sie wertvolle Begriffe kürzen.',
+        '<strong>Prüfen Sie die Auslassungspunkte:</strong> wenn die gekürzte Vorschau an Bedeutung verliert, schreiben Sie den Titel um, anstatt die Kürzung hinzunehmen.',
+        '<strong>Wiederholen Sie dies für die Beschreibung:</strong> stellen Sie sicher, dass der erste Satz das Wertversprechen für sich allein trägt.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Wenn der Balken rot wird',
+      html: 'Ein roter Balken ist keine Strafwarnung. Er bedeutet, dass der aktuelle Text breiter ist als das gewählte visuelle Ziel, sodass der Simulator ihn mit Punkten kürzt. Betrachten Sie dies als redaktionelles Signal: Entscheiden Sie, ob die versteckten Wörter verzichtbar sind oder ob das Snippet eine schärfere Struktur benötigt.',
+    },
+    {
+      type: 'title',
+      text: 'Grenzen, Umschreibungen und realistische Erwartungen',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Kein Simulator kann das exakte Snippet garantieren, das Google anzeigen wird. Google kann Titel-Links umschreiben, Suchbegriffe fett formatieren, Seitentext anstelle der Meta-Beschreibung wählen oder verschiedene Snippets für verschiedene Suchanfragen anzeigen. Dieses Tool eignet sich am besten als schneller Schreib- und QA-Schritt: Es erkennt offensichtlichen visuellen Überlauf, bevor die Seite in die Produktion gelangt.',
+    },
+    {
+      type: 'summary',
+      title: 'Beste Nutzung dieses SERP Simulators',
+      items: [
+        'Nutzen Sie den Pixelbalken, um visuellen Überlauf vor der Veröffentlichung von Metadaten zu erkennen.',
+        'Halten Sie die Hauptsuchabsicht und das Klickversprechen vor jeder Auslassung sichtbar.',
+        'Rufen Sie Metadaten von URLs ab, die CORS erlauben, und bearbeiten Sie das Ergebnis bei Bedarf manuell.',
+        'Betrachten Sie die Vorschau als Schreibhilfe, denn Google kann Snippets pro Suchanfrage weiterhin umschreiben.',
+      ],
+    },
+  ],
+};

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.',
+      ],
+    },
+  ],
+};