@jjlmoya/utils-developer 1.14.0 → 1.16.0

package/src/tool/serpPixelSimulator/i18n/ja.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';
+const title = 'SERPシミュレーター & SEOピクセルカウンター';
+const description = 'Google検索結果のスニペットをリアルタイムでプレビューし、タイトルとメタディスクリプションのピクセル幅を測定して、テキストがどこで切り詰められるかを正確に確認できます。';
+
+const howTo = [
+  {
+    name: 'タイトルタグを入力する',
+    text: 'テストしたいページタイトルを入力または貼り付けます。SERPプレビューとピクセルメーターはキー入力ごとに更新されます。',
+  },
+  {
+    name: '表示URLを追加する',
+    text: '検索者がスキャンする結果に似せるために、現実的なドメインとパスを使用します。',
+  },
+  {
+    name: 'メタディスクリプションを書く',
+    text: '説明文を追加し、ピクセルバーを確認します。推奨される表示幅を超えると、プレビューは省略記号で切り詰めます。',
+  },
+  {
+    name: 'デスクトップとモバイルを切り替える',
+    text: 'メタデータを公開する前に、デスクトップまたはモバイルのカード幅でタイトルの表示を比較します。',
+  },
+];
+
+const faq = [
+  {
+    question: 'SEOタイトルに文字数ではなくピクセル数を使う理由は？',
+    answer: 'Google検索結果カードは表示幅によって制約されます。細い文字が多いタイトルは、太い文字や大文字、太字に見えるグリフを含むタイトルよりも多くの文字を収めることができます。ピクセル測定は、表示される結果のより正確なプレビューを提供します。',
+  },
+  {
+    question: 'これはGoogleがスニペットをどのように切り詰めるかを正確に保証しますか？',
+    answer: 'いいえ。Googleはタイトルリンクやスニペットを書き換えることがあり、表示はクエリ、デバイス、言語、実験によって異なる場合があります。このツールは、切り詰められる可能性の低いメタデータを作成するための実用的な視覚的ガイドとして設計されています。',
+  },
+  {
+    question: 'シミュレーターはどのようなピクセル制限を使用していますか？',
+    answer: 'デスクトップのデフォルトのタイトル制限は580px、モバイルのタイトル制限は600px、メタディスクリプションの制限は920pxです。これらは執筆目標であり、Google公式の制限ではありません。',
+  },
+  {
+    question: 'プレビューが省略記号を追加するのはなぜですか？',
+    answer: '測定されたテキストが利用可能なピクセル幅を超えると、シミュレーターは収まる最後の文字で文字列を切り詰め、3つのドットを追加します。これはSEOチームが意味の喪失を検出するために必要な実用的な動作と一致します。',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'タイトルタグ',
+  titlePlaceholder: 'GameBob | インディー開発スタジオ',
+  urlLabel: '表示URL',
+  urlPlaceholder: 'https://www.gamebob.dev/ja/',
+  descriptionLabel: 'メタディスクリプション',
+  descriptionPlaceholder: 'デジタルワークフローとエンターテイメントを向上させるために設計されたツールとゲームのコレクションをご覧ください。',
+  deviceLabel: 'プレビューモード',
+  desktopLabel: 'デスクトップ',
+  mobileLabel: 'モバイル',
+  titlePixelsLabel: 'タイトルの幅',
+  descriptionPixelsLabel: '説明の幅',
+  charactersLabel: '文字',
+  previewLabel: 'Googleスタイルのライブプレビュー',
+  tooLongLabel: '長すぎます',
+  goodLabel: '収まります',
+  emptyTitle: 'タイトルがここに表示されます',
+  emptyDescription: 'メタディスクリプションのプレビューは入力に応じてここに表示されます。',
+  defaultTitle: 'GameBob | インディー開発スタジオ',
+  defaultUrl: 'https://www.gamebob.dev/ja/',
+  defaultDescription: 'デジタルワークフローとエンターテイメントを向上させるために設計されたツールとゲームのコレクションをご覧ください。',
+  fallbackUrl: 'example.co.jp',
+  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: 'ja',
+};
+
+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: 'タイトルタグはスプレッドシートでは完璧に見えても、検索結果では失敗することがあります。Googleは文字数でスペースを確保するのではなく、視覚的なカード内にテキストをレンダリングします。つまり、<strong>GameBob | インディー開発スタジオ</strong>と同じ文字数の別のタイトルでも、文字、大文字/小文字、句読点、間隔によって非常に異なる幅を占める可能性があります。',
+    },
+    {
+      type: 'tip',
+      title: '本当に役立つルール',
+      html: '重要な約束が省略記号を生き延びるようにスニペットを書きます。ページタイプ、検索意図、クリックする最も強力な理由をピクセル制限の前に配置します。ブランド名は便利ですが、主要な利点を視界から押し出してはいけません。',
+    },
+    {
+      type: 'title',
+      text: 'ピクセルカウンターが測定するもの',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['要素', '重要なこと', '結果の使い方'],
+      rows: [
+        ['タイトルタグ', '生の文字数ではなく、ピクセル単位のレンダリング幅', '切り詰めの前に主要キーワードとクリックの約束を表示されたままにします。'],
+        ['表示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はタイトルリンクを書き換えたり、クエリ用語を太字にしたり、メタディスクリプションの代わりにページテキストを選択したり、異なる検索に対して異なるスニペットを表示したりする場合があります。このツールは、迅速な執筆とQAのステップとして最適です：ページが本番環境に到達する前に明らかな視覚的オーバーフローを検出します。',
+    },
+    {
+      type: 'summary',
+      title: 'このSERPシミュレーターの最適な使い方',
+      items: [
+        'メタデータを公開する前に視覚的オーバーフローを検出するためにピクセルバーを使用します。',
+        '主な検索意図とクリックの約束を省略記号の前に表示されたままにします。',
+        'CORSを許可するURLからメタデータを取得し、必要に応じて手動で結果を編集します。',
+        'Googleがクエリごとにスニペットを書き換える可能性があるため、プレビューを執筆ガイドとして扱います。',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/i18n/ko.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';
+const title = 'SERP 시뮬레이터 & SEO 픽셀 카운터';
+const description = 'Google 스타일 검색 스니펫을 실시간으로 미리보고, 제목과 메타 설명의 픽셀 너비를 측정하며, 텍스트가 정확히 어디서 잘릴지 확인하세요.';
+
+const howTo = [
+  {
+    name: '타이틀 태그 입력하기',
+    text: '테스트하려는 페이지 제목을 입력하거나 붙여넣으세요. SERP 미리보기와 픽셀 측정기는 키 입력마다 업데이트됩니다.',
+  },
+  {
+    name: '표시 URL 추가하기',
+    text: '검색자가 스캔할 결과와 유사하게 보이도록 현실적인 도메인과 경로를 사용하세요.',
+  },
+  {
+    name: '메타 설명 작성하기',
+    text: '설명 텍스트를 추가하고 픽셀 바를 관찰하세요. 권장 시각적 너비를 초과하면 미리보기가 말줄임표로 자릅니다.',
+  },
+  {
+    name: '데스크톱과 모바일 전환하기',
+    text: '메타데이터를 게시하기 전에 데스크톱 또는 모바일 카드 너비로 제목 렌더링을 비교하세요.',
+  },
+];
+
+const faq = [
+  {
+    question: 'SEO 제목에 문자 수 대신 픽셀을 세는 이유는 무엇인가요?',
+    answer: 'Google 검색 결과 카드는 시각적 너비에 의해 제한됩니다. 좁은 글자가 많은 제목은 넓은 글자, 대문자 또는 굵게 보이는 글리프가 있는 제목보다 더 많은 문자를 포함할 수 있습니다. 픽셀 측정은 표시되는 결과를 더 정확하게 미리 볼 수 있게 해줍니다.',
+  },
+  {
+    question: '이것이 Google이 내 스니펫을 어떻게 자를지 정확히 보장하나요?',
+    answer: '아니요. Google은 제목 링크와 스니펫을 다시 작성할 수 있으며, 렌더링은 쿼리, 기기, 언어, 실험에 따라 달라질 수 있습니다. 이 도구는 잘릴 가능성이 적은 메타데이터를 작성하기 위한 실용적인 시각적 가이드로 설계되었습니다.',
+  },
+  {
+    question: '시뮬레이터는 어떤 픽셀 제한을 사용하나요?',
+    answer: '데스크톱의 기본 제목 제한은 580px, 모바일 제목 제한은 600px, 메타 설명 제한은 920px입니다. 이는 작성 목표이며 공식 Google 제한이 아닙니다.',
+  },
+  {
+    question: '미리보기가 말줄임표를 추가하는 이유는 무엇인가요?',
+    answer: '측정된 텍스트가 사용 가능한 픽셀 너비를 초과하면, 시뮬레이터는 맞는 마지막 문자에서 문자열을 자르고 세 개의 점을 추가합니다. 이는 SEO 팀이 의미 손실을 감지하는 데 필요한 실용적인 동작과 일치합니다.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: '타이틀 태그',
+  titlePlaceholder: 'GameBob | 인디 개발 스튜디오',
+  urlLabel: '표시 URL',
+  urlPlaceholder: 'https://www.gamebob.dev/ko/',
+  descriptionLabel: '메타 설명',
+  descriptionPlaceholder: '디지털 워크플로우와 엔터테인먼트를 향상시키도록 설계된 도구 및 게임 컬렉션을 발견하세요.',
+  deviceLabel: '미리보기 모드',
+  desktopLabel: '데스크톱',
+  mobileLabel: '모바일',
+  titlePixelsLabel: '제목 너비',
+  descriptionPixelsLabel: '설명 너비',
+  charactersLabel: '자',
+  previewLabel: 'Google 스타일 실시간 미리보기',
+  tooLongLabel: '너무 김',
+  goodLabel: '적합함',
+  emptyTitle: '제목이 여기에 표시됩니다',
+  emptyDescription: '메타 설명 미리보기가 입력하는 대로 여기에 표시됩니다.',
+  defaultTitle: 'GameBob | 인디 개발 스튜디오',
+  defaultUrl: 'https://www.gamebob.dev/ko/',
+  defaultDescription: '디지털 워크플로우와 엔터테인먼트를 향상시키도록 설계된 도구 및 게임 컬렉션을 발견하세요.',
+  fallbackUrl: 'example.co.kr',
+  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: 'ko',
+};
+
+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: '타이틀 태그는 스프레드시트에서는 완벽해 보여도 검색 결과에서는 실패할 수 있습니다. Google은 문자 수로 공간을 예약하지 않고 시각적 카드 안에 텍스트를 렌더링합니다. 즉, <strong>GameBob | 인디 개발 스튜디오</strong>와 동일한 문자 수의 다른 제목이 문자, 대소문자, 구두점, 간격에 따라 매우 다른 너비를 차지할 수 있습니다.',
+    },
+    {
+      type: 'tip',
+      title: '실제로 도움이 되는 규칙',
+      html: '중요한 약속이 말줄임표를 살아남도록 스니펫을 작성하세요. 페이지 유형, 검색 의도, 클릭해야 할 가장 강력한 이유를 픽셀 제한 이전에 배치하세요. 브랜드 이름은 유용하지만 주요 혜택을 시야에서 밀어내서는 안 됩니다.',
+    },
+    {
+      type: 'title',
+      text: '픽셀 카운터가 측정하는 것',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['요소', '중요한 것', '결과 사용 방법'],
+      rows: [
+        ['타이틀 태그', '원시 문자 수가 아닌 픽셀 단위의 렌더링 너비', '잘리기 전에 주요 키워드와 클릭 약속을 계속 표시합니다.'],
+        ['표시 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은 제목 링크를 다시 쓰거나, 쿼리 용어를 굵게 표시하거나, 메타 설명 대신 페이지 텍스트를 선택하거나, 다른 검색에 대해 다른 스니펫을 표시할 수 있습니다. 이 도구는 빠른 작성 및 QA 단계로 가장 잘 사용됩니다: 페이지가 프로덕션에 도달하기 전에 명백한 시각적 오버플로를 감지합니다.',
+    },
+    {
+      type: 'summary',
+      title: '이 SERP 시뮬레이터의 최적 사용법',
+      items: [
+        '메타데이터를 게시하기 전에 시각적 오버플로를 감지하기 위해 픽셀 바를 사용하세요.',
+        '주요 검색 의도와 클릭 약속을 말줄임표 앞에 계속 표시하세요.',
+        'CORS를 허용하는 URL에서 메타데이터를 가져온 다음 필요에 따라 수동으로 결과를 편집하세요.',
+        'Google이 쿼리별로 스니펫을 다시 작성할 수 있으므로 미리보기를 작성 가이드로 간주하세요.',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/i18n/nl.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-meten';
+const title = 'SERP Simulator en SEO Pixelteller';
+const description = 'Bekijk een voorbeeld van Google-achtige zoeksnippets in realtime, meet de breedte van titel en meta description in pixels en zie precies waar je tekst wordt afgekapt.';
+
+const howTo = [
+  {
+    name: 'Voer de title-tag in',
+    text: 'Typ of plak de paginatitel die je wilt testen. De SERP-voorvertoning en pixelmeter worden bij elke toetsaanslag bijgewerkt.',
+  },
+  {
+    name: 'Voeg de zichtbare URL toe',
+    text: 'Gebruik een realistische domeinnaam en pad zodat het snippet lijkt op het resultaat dat een zoeker zou scannen.',
+  },
+  {
+    name: 'Schrijf de meta description',
+    text: 'Voeg de beschrijvingstekst toe en let op de pixelbalk. Wanneer deze de aanbevolen visuele breedte overschrijdt, wordt de voorvertoning afgekapt met een beletselteken.',
+  },
+  {
+    name: 'Schakel tussen desktop en mobiel',
+    text: 'Vergelijk de titelweergave met de kaartbreedte voor desktop of mobiel voordat je metadata publiceert.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Waarom pixels tellen in plaats van tekens voor SEO-titels?',
+    answer: 'Google-zoekresultaatkaarten worden beperkt door visuele breedte. Een titel met veel smalle letters kan meer tekens bevatten dan een titel met brede letters, hoofdletters of dik ogende glyphs. Pixelmeting geeft een nauwkeuriger voorbeeld van het zichtbare resultaat.',
+  },
+  {
+    question: 'Garandeert dit precies hoe Google mijn snippet zal afkappen?',
+    answer: 'Nee. Google kan titellinks en snippets herschrijven, en de weergave kan variëren per zoekopdracht, apparaat, taal en experiment. De tool is bedoeld als een praktische visuele leidraad voor het schrijven van metadata die minder snel wordt afgekapt.',
+  },
+  {
+    question: 'Welke pixellimieten gebruikt de simulator?',
+    answer: 'De standaard titellimiet voor desktop is 580 px, voor mobiel 600 px en de limiet voor meta descriptions is 920 px. Dit zijn schrijfdoelen, geen officiële Google-limieten.',
+  },
+  {
+    question: 'Waarom voegt de voorvertoning een beletselteken toe?',
+    answer: 'Wanneer de gemeten tekst de beschikbare pixelbreedte overschrijdt, kapt de simulator de string af bij het laatste passende teken en voegt drie puntjes toe. Dit komt overeen met het praktische gedrag dat SEO-teams nodig hebben om betekenisverlies te signaleren.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Title-tag',
+  titlePlaceholder: 'GameBob | Indie Ontwikkelstudio',
+  urlLabel: 'Zichtbare URL',
+  urlPlaceholder: 'https://www.gamebob.dev/nl/',
+  descriptionLabel: 'Meta description',
+  descriptionPlaceholder: 'Ontdek onze collectie tools en games die jouw digitale workflow en entertainment naar een hoger niveau tillen.',
+  deviceLabel: 'Voorvertoningsmodus',
+  desktopLabel: 'Desktop',
+  mobileLabel: 'Mobiel',
+  titlePixelsLabel: 'Titelbreedte',
+  descriptionPixelsLabel: 'Beschrijvingsbreedte',
+  charactersLabel: 'tekens',
+  previewLabel: 'Live voorvertoning in Google-stijl',
+  tooLongLabel: 'Te breed',
+  goodLabel: 'Past',
+  emptyTitle: 'Jouw titel verschijnt hier',
+  emptyDescription: 'De voorvertoning van jouw meta description verschijnt hier terwijl je typt.',
+  defaultTitle: 'GameBob | Indie Ontwikkelstudio',
+  defaultUrl: 'https://www.gamebob.dev/nl/',
+  defaultDescription: 'Ontdek onze collectie tools en games die jouw digitale workflow en entertainment naar een hoger niveau tillen.',
+  fallbackUrl: 'voorbeeld.nl',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Ophalen',
+  fetchLoadingLabel: 'Ophalen...',
+  fetchSuccessLabel: 'Metadata geladen vanaf de URL.',
+  fetchCorsError: 'De browser kon deze pagina niet lezen. Deze kan geblokkeerd zijn door CORS, een omleiding, gemengde inhoud of een netwerkregel. Je kunt de metadata nog steeds handmatig plakken of bewerken.',
+  fetchInvalidUrlError: 'Voer een geldige URL in voordat je metadata ophaalt.',
+  fetchNoMetadataError: 'De pagina is opgehaald, maar er is geen titel of meta description gevonden.',
+  fetchGenericError: 'Metadata kon niet worden opgehaald van deze URL. Controleer het adres of vul de velden handmatig in.',
+};
+
+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: 'nl',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Veelgestelde vragen over de SERP-simulator',
+  faq,
+  bibliographyTitle: 'Documentatie over zoekresultaten',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Stop met gissen hoe je Google-resultaat eruit zal zien',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Een title-tag kan er perfect uitzien in een spreadsheet en toch mislukken in het zoekresultaat. Google reserveert geen ruimte op basis van tekens; het rendert tekst binnen een visuele kaart. Dat betekent dat <strong>GameBob | Indie Ontwikkelstudio</strong> en een andere titel met hetzelfde aantal tekens heel verschillende breedtes kunnen innemen, afhankelijk van de letters, hoofdletters, leestekens en spatiëring.',
+    },
+    {
+      type: 'tip',
+      title: 'De regel die echt helpt',
+      html: 'Schrijf het snippet zo dat de belangrijke belofte het beletselteken overleeft. Plaats het paginatype, de zoekintentie en de sterkste reden om te klikken vóór de pixellimiet. Merknamen zijn nuttig, maar ze mogen het belangrijkste voordeel niet uit het zicht duwen.',
+    },
+    {
+      type: 'title',
+      text: 'Wat de pixelteller meet',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Element', 'Wat telt', 'Hoe gebruik je het resultaat'],
+      rows: [
+        ['Title-tag', 'Gerenderde breedte in pixels, niet het ruwe aantal tekens', 'Houd het primaire keyword en de klikbelofte zichtbaar vóór het afkappen.'],
+        ['Zichtbare URL', 'Visueel vertrouwen en duidelijkheid van het onderwerp', 'Gebruik een leesbaar pad dat aangeeft waar het resultaat naartoe leidt.'],
+        ['Meta description', 'Een breder snippetgebied met zoekopdrachtafhankelijk gedrag', 'Zet het voordeel vooraan, want Google kan het inkorten of herschrijven.'],
+        ['Apparaatmodus', 'Desktop- en mobiele kaarten kunnen anders aanvoelen', 'Controleer beide voordat je metadata voor belangrijke pagina\'s publiceert.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Waarom tekenlimieten een slechte SEO-gewoonte zijn',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Traditioneel advies zoals "houd titels onder de 60 tekens" is gemakkelijk, maar verbergt het echte probleem. Brede letters zoals W en M, hoofdletters, scheidingstekens, cijfers en lange merknamen nemen allemaal verschillende ruimte in. Pixelmeting maakt de afweging direct zichtbaar: je kunt zien of een zin zijn plaats verdient of ruimte steelt van een sterkere boodschap.',
+    },
+    {
+      type: 'title',
+      text: 'Een praktische workflow voor betere snippets',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Begin met de intentie:</strong> beschrijf wat de gebruiker krijgt, niet alleen hoe de pagina heet.',
+        '<strong>Test de volledige titel:</strong> plak hem in de simulator en let op de balk voordat je publiceert.',
+        '<strong>Verwijder zwakke woorden:</strong> als de balk rood wordt, verwijder dan opvulling voordat je waardevolle termen wegsnijdt.',
+        '<strong>Controleer het beletselteken:</strong> als de afgekapte voorvertoning zijn betekenis verliest, herschrijf dan de titel in plaats van de afkapping te accepteren.',
+        '<strong>Herhaal voor de beschrijving:</strong> zorg ervoor dat de eerste zin de waardepropositie op zichzelf draagt.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Als de balk rood wordt',
+      html: 'Een rode balk is geen strafwaarschuwing. Het betekent dat de huidige tekst breder is dan het geselecteerde visuele doel, dus kapt de simulator hem af met puntjes. Behandel dit als een redactioneel signaal: beslis of de verborgen woorden weg kunnen, of dat het snippet een scherpere structuur nodig heeft.',
+    },
+    {
+      type: 'title',
+      text: 'Beperkingen, herschrijvingen en realistische verwachtingen',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Geen enkele simulator kan het exacte snippet garanderen dat Google zal tonen. Google kan titellinks herschrijven, zoektermen vetgedrukt weergeven, paginatekst kiezen in plaats van de meta description, of verschillende snippets tonen voor verschillende zoekopdrachten. Deze tool is het meest geschikt als een snelle schrijf- en QA-stap: hij detecteert duidelijke visuele overloop voordat de pagina in productie gaat.',
+    },
+    {
+      type: 'summary',
+      title: 'Beste gebruik van deze SERP simulator',
+      items: [
+        'Gebruik de pixelbalk om visuele overloop te detecteren voordat je metadata publiceert.',
+        'Houd de belangrijkste zoekintentie en klikbelofte zichtbaar vóór elk beletselteken.',
+        'Haal metadata op van URL\'s die CORS toestaan en bewerk het resultaat handmatig indien nodig.',
+        'Beschouw de voorvertoning als een schrijfhulpmiddel, want Google kan snippets nog steeds herschrijven per zoekopdracht.',
+      ],
+    },
+  ],
+};