@jjlmoya/utils-developer 1.15.0 → 1.16.0

package/src/tool/serpPixelSimulator/controller.ts

@@ -0,0 +1,323 @@
+import { DESCRIPTION_LIMIT, getTitleLimit, ratioToPercent, type SerpDevice } from './logic';
+import type { SerpPixelSimulatorUI } from './ui';
+
+interface StoredState {
+  title?: string;
+  url?: string;
+  description?: string;
+  device?: SerpDevice;
+  favicon?: string;
+}
+
+interface Elements {
+  titleInput: HTMLInputElement;
+  urlInput: HTMLInputElement;
+  fetchButton: HTMLButtonElement;
+  fetchMessage: HTMLElement;
+  descriptionInput: HTMLTextAreaElement;
+  desktopButton: HTMLButtonElement;
+  mobileButton: HTMLButtonElement;
+  serpCard: HTMLElement;
+  faviconFallback: HTMLElement;
+  faviconImage: HTMLImageElement;
+  previewTitle: HTMLElement;
+  previewUrl: HTMLElement;
+  previewDescription: HTMLElement;
+  titleMeter: HTMLElement;
+  descriptionMeter: HTMLElement;
+  titleFill: HTMLElement;
+  descriptionFill: HTMLElement;
+  titleCount: HTMLElement;
+  descriptionCount: HTMLElement;
+  titleStatus: HTMLElement;
+  descriptionStatus: HTMLElement;
+}
+
+interface MeterParts {
+  meter: HTMLElement;
+  fill: HTMLElement;
+  count: HTMLElement;
+  status: HTMLElement;
+}
+
+interface FetchResult {
+  response: Response;
+  url: string;
+}
+
+const storageKey = 'serpPixelSimulator:lastState';
+const titleFont = '20px Arial, Helvetica, sans-serif';
+const descriptionFont = '14px Arial, Helvetica, sans-serif';
+
+function getElement<T extends HTMLElement>(id: string): T {
+  return document.getElementById(id) as T;
+}
+
+function collectElements(): Elements {
+  return {
+    titleInput: getElement<HTMLInputElement>('sps-title'),
+    urlInput: getElement<HTMLInputElement>('sps-url'),
+    fetchButton: getElement<HTMLButtonElement>('sps-fetch'),
+    fetchMessage: getElement('sps-fetch-message'),
+    descriptionInput: getElement<HTMLTextAreaElement>('sps-description'),
+    desktopButton: getElement<HTMLButtonElement>('sps-desktop'),
+    mobileButton: getElement<HTMLButtonElement>('sps-mobile'),
+    serpCard: getElement('sps-serp'),
+    faviconFallback: getElement('sps-favicon-fallback'),
+    faviconImage: getElement<HTMLImageElement>('sps-favicon-image'),
+    previewTitle: getElement('sps-preview-title'),
+    previewUrl: getElement('sps-preview-url'),
+    previewDescription: getElement('sps-preview-description'),
+    titleMeter: getElement('sps-title-meter'),
+    descriptionMeter: getElement('sps-description-meter'),
+    titleFill: getElement('sps-title-fill'),
+    descriptionFill: getElement('sps-description-fill'),
+    titleCount: getElement('sps-title-count'),
+    descriptionCount: getElement('sps-description-count'),
+    titleStatus: getElement('sps-title-status'),
+    descriptionStatus: getElement('sps-description-status'),
+  };
+}
+
+function measure(context: CanvasRenderingContext2D, text: string, font: string): number {
+  context.font = font;
+  return context.measureText(text).width;
+}
+
+function trimToPixels(context: CanvasRenderingContext2D, text: string, limit: number, font: string, suffix: string): string {
+  if (measure(context, text, font) <= limit) return text;
+  let low = 0;
+  let high = text.length;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    const candidate = `${text.slice(0, middle).trimEnd()}${suffix}`;
+    if (measure(context, candidate, font) <= limit) low = middle;
+    else high = middle - 1;
+  }
+  return `${text.slice(0, low).trimEnd()}${suffix}`;
+}
+
+function displayUrl(rawUrl: string, fallbackUrl: string): string {
+  if (!rawUrl.trim()) return fallbackUrl;
+  try {
+    const url = new URL(rawUrl);
+    return `${url.hostname}${url.pathname === '/' ? '' : url.pathname}`;
+  } catch {
+    return rawUrl.replace(/^https?:\/\//, '').replace(/\/$/, '') || fallbackUrl;
+  }
+}
+
+function setMessage(el: HTMLElement, message: string, tone: string): void {
+  el.textContent = message;
+  el.dataset.tone = tone;
+}
+
+function normalizedUrl(rawUrl: string): string | null {
+  const trimmed = rawUrl.trim();
+  if (!trimmed) return null;
+  const value = /^[a-z][a-z\d+.-]*:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
+  try {
+    return new URL(value).toString();
+  } catch {
+    return null;
+  }
+}
+
+function candidateUrls(rawUrl: string): string[] {
+  const trimmed = rawUrl.trim();
+  if (!trimmed) return [];
+  if (/^[a-z][a-z\d+.-]*:\/\//i.test(trimmed)) {
+    const url = normalizedUrl(trimmed);
+    return url ? [url] : [];
+  }
+  return ['https://', 'http://'].flatMap((protocol) => {
+    try {
+      return [new URL(`${protocol}${trimmed}`).toString()];
+    } catch {
+      return [];
+    }
+  });
+}
+
+function extractMetaDescription(doc: Document): string {
+  const selectors = ['meta[name="description"]', 'meta[property="og:description"]', 'meta[name="twitter:description"]'];
+  for (const selector of selectors) {
+    const value = doc.querySelector(selector)?.getAttribute('content')?.trim();
+    if (value) return value;
+  }
+  return '';
+}
+
+function extractFavicon(doc: Document, pageUrl: string): string {
+  const selectors = ['link[rel~="icon"][href]', 'link[rel="shortcut icon"][href]', 'link[rel="apple-touch-icon"][href]', 'link[rel="apple-touch-icon-precomposed"][href]'];
+  for (const selector of selectors) {
+    const href = doc.querySelector(selector)?.getAttribute('href')?.trim();
+    if (!href) continue;
+    try {
+      return new URL(href, pageUrl).toString();
+    } catch {
+      return '';
+    }
+  }
+  return new URL('/favicon.ico', pageUrl).toString();
+}
+
+function stateFromElements(elements: Elements, device: SerpDevice): StoredState {
+  return {
+    title: elements.titleInput.value,
+    url: elements.urlInput.value,
+    description: elements.descriptionInput.value,
+    device,
+    favicon: elements.faviconImage.classList.contains('sps-hidden') ? '' : elements.faviconImage.src,
+  };
+}
+
+function saveState(elements: Elements, device: SerpDevice): void {
+  try {
+    localStorage.setItem(storageKey, JSON.stringify(stateFromElements(elements, device)));
+  } catch {
+    return;
+  }
+}
+
+function readState(): StoredState | null {
+  try {
+    const rawState = localStorage.getItem(storageKey);
+    return rawState ? (JSON.parse(rawState) as StoredState) : null;
+  } catch {
+    localStorage.removeItem(storageKey);
+    return null;
+  }
+}
+
+function setDevice(elements: Elements, device: SerpDevice): void {
+  elements.desktopButton.setAttribute('aria-pressed', String(device === 'desktop'));
+  elements.mobileButton.setAttribute('aria-pressed', String(device === 'mobile'));
+  elements.serpCard.classList.toggle('sps-mobile', device === 'mobile');
+}
+
+function setFavicon(elements: Elements, src: string): void {
+  elements.faviconImage.src = src;
+  elements.faviconImage.hidden = false;
+  elements.faviconImage.removeAttribute('hidden');
+  elements.faviconImage.classList.remove('sps-hidden');
+  elements.faviconFallback.hidden = false;
+  elements.faviconFallback.removeAttribute('hidden');
+  elements.faviconFallback.classList.add('sps-hidden');
+}
+
+function restoreState(elements: Elements): SerpDevice {
+  const state = readState();
+  if (!state) return 'desktop';
+  if (typeof state.title === 'string') elements.titleInput.value = state.title;
+  if (typeof state.url === 'string') elements.urlInput.value = state.url;
+  if (typeof state.description === 'string') elements.descriptionInput.value = state.description;
+  if (typeof state.favicon === 'string' && state.favicon) setFavicon(elements, state.favicon);
+  return state.device === 'mobile' ? 'mobile' : 'desktop';
+}
+
+function updateMeter(parts: MeterParts, width: number, limit: number, unit: string, okText: string, tooLongText: string): void {
+  const isOver = width > limit;
+  parts.meter.classList.toggle('sps-over', isOver);
+  parts.fill.style.width = `${ratioToPercent(width, limit)}%`;
+  parts.count.textContent = `${Math.round(width)} ${unit} / ${Math.round(limit)} ${unit}`;
+  parts.status.textContent = isOver ? tooLongText : okText;
+}
+
+function updatePreview(elements: Elements, context: CanvasRenderingContext2D, ui: SerpPixelSimulatorUI, device: SerpDevice): void {
+  const title = elements.titleInput.value.trim() || ui.emptyTitle;
+  const description = elements.descriptionInput.value.trim() || ui.emptyDescription;
+  const titleLimit = getTitleLimit(device);
+  elements.previewTitle.textContent = trimToPixels(context, title, titleLimit, titleFont, ui.ellipsis);
+  elements.previewDescription.textContent = trimToPixels(context, description, DESCRIPTION_LIMIT, descriptionFont, ui.ellipsis);
+  elements.previewUrl.textContent = displayUrl(elements.urlInput.value, ui.fallbackUrl);
+  updateMeter({ meter: elements.titleMeter, fill: elements.titleFill, count: elements.titleCount, status: elements.titleStatus }, measure(context, title, titleFont), titleLimit, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
+  updateMeter({ meter: elements.descriptionMeter, fill: elements.descriptionFill, count: elements.descriptionCount, status: elements.descriptionStatus }, measure(context, description, descriptionFont), DESCRIPTION_LIMIT, ui.pixelUnit, ui.goodLabel, ui.tooLongLabel);
+}
+
+async function fetchFirst(urls: string[]): Promise<FetchResult> {
+  let lastError: unknown = null;
+  for (const url of urls) {
+    try {
+      return { response: await fetch(url, { method: 'GET', mode: 'cors', credentials: 'omit' }), url };
+    } catch (error) {
+      lastError = error;
+    }
+  }
+  throw lastError instanceof Error ? lastError : new TypeError('Fetch failed');
+}
+
+function applyFetched(elements: Elements, doc: Document, url: string): boolean {
+  const title = doc.querySelector('title')?.textContent?.trim() ?? '';
+  const description = extractMetaDescription(doc);
+  if (!title && !description) return false;
+  if (title) elements.titleInput.value = title;
+  if (description) elements.descriptionInput.value = description;
+  setFavicon(elements, extractFavicon(doc, url));
+  elements.urlInput.value = url;
+  return true;
+}
+
+export function initSerpPixelSimulator(root: HTMLElement): void {
+  const ui = JSON.parse(root.dataset.i18n ?? '{}') as SerpPixelSimulatorUI;
+  const elements = collectElements();
+  const context = document.createElement('canvas').getContext('2d') as CanvasRenderingContext2D;
+  let device = restoreState(elements);
+  const render = () => updatePreview(elements, context, ui, device);
+  const persistAndRender = () => {
+    setMessage(elements.fetchMessage, '', 'neutral');
+    saveState(elements, device);
+    render();
+  };
+
+  setDevice(elements, device);
+  elements.titleInput.addEventListener('input', persistAndRender);
+  elements.urlInput.addEventListener('input', persistAndRender);
+  elements.descriptionInput.addEventListener('input', persistAndRender);
+  elements.desktopButton.addEventListener('click', () => {
+    device = 'desktop';
+    setDevice(elements, device);
+    persistAndRender();
+  });
+  elements.mobileButton.addEventListener('click', () => {
+    device = 'mobile';
+    setDevice(elements, device);
+    persistAndRender();
+  });
+  elements.faviconImage.addEventListener('error', () => {
+    elements.faviconImage.removeAttribute('src');
+    elements.faviconImage.classList.add('sps-hidden');
+    elements.faviconFallback.classList.remove('sps-hidden');
+    saveState(elements, device);
+  });
+  elements.fetchButton.addEventListener('click', () => {
+    void fetchMetadata(elements, ui, device, context);
+  });
+  render();
+}
+
+async function fetchMetadata(elements: Elements, ui: SerpPixelSimulatorUI, device: SerpDevice, context: CanvasRenderingContext2D): Promise<void> {
+  const urls = candidateUrls(elements.urlInput.value);
+  if (urls.length === 0) {
+    setMessage(elements.fetchMessage, ui.fetchInvalidUrlError, 'error');
+    saveState(elements, device);
+    return;
+  }
+  elements.fetchButton.disabled = true;
+  elements.fetchButton.textContent = ui.fetchLoadingLabel;
+  setMessage(elements.fetchMessage, '', 'neutral');
+  try {
+    const result = await fetchFirst(urls);
+    if (!result.response.ok) throw new Error(`HTTP ${result.response.status}`);
+    const doc = new DOMParser().parseFromString(await result.response.text(), 'text/html');
+    if (!applyFetched(elements, doc, result.url)) setMessage(elements.fetchMessage, ui.fetchNoMetadataError, 'error');
+    else setMessage(elements.fetchMessage, ui.fetchSuccessLabel, 'success');
+  } catch (error) {
+    setMessage(elements.fetchMessage, error instanceof TypeError ? ui.fetchCorsError : ui.fetchGenericError, 'error');
+  } finally {
+    elements.fetchButton.disabled = false;
+    elements.fetchButton.textContent = ui.fetchButtonLabel;
+    saveState(elements, device);
+    updatePreview(elements, context, ui, device);
+  }
+}

package/src/tool/serpPixelSimulator/entry.ts

@@ -0,0 +1,30 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+
+import type { SerpPixelSimulatorUI } from './ui';
+
+export type SerpPixelSimulatorLocaleContent = ToolLocaleContent<SerpPixelSimulatorUI>;
+
+export const serpPixelSimulator: DeveloperToolEntry<SerpPixelSimulatorUI> = {
+  id: 'serp-pixel-simulator',
+  icons: {
+    bg: 'mdi:google',
+    fg: 'mdi:ruler-square',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};

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