@jjlmoya/utils-developer 1.15.0 → 1.16.0

package/src/tool/serpPixelSimulator/i18n/id.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 = 'simulator-serp-penghitung-piksel';
+const title = 'Simulator SERP dan Penghitung Piksel SEO';
+const description = 'Pratinjau cuplikan pencarian gaya Google secara real-time, ukur lebar judul dan meta deskripsi dalam piksel, dan lihat dengan tepat di mana teks Anda akan dipotong.';
+
+const howTo = [
+  {
+    name: 'Masukkan tag judul',
+    text: 'Ketik atau tempel judul halaman yang ingin Anda uji. Pratinjau SERP dan pengukur piksel diperbarui pada setiap ketikan.',
+  },
+  {
+    name: 'Tambahkan URL yang terlihat',
+    text: 'Gunakan domain dan jalur yang realistis agar cuplikan menyerupai hasil yang akan dipindai oleh pencari.',
+  },
+  {
+    name: 'Tulis deskripsi meta',
+    text: 'Tambahkan teks deskripsi dan perhatikan bilah piksel. Saat melebihi lebar visual yang disarankan, pratinjau memotongnya dengan elipsis.',
+  },
+  {
+    name: 'Beralih antara desktop dan seluler',
+    text: 'Bandingkan rendering judul dengan lebar kartu desktop atau seluler sebelum menerbitkan metadata.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Mengapa menghitung piksel alih-alih karakter untuk judul SEO?',
+    answer: 'Kartu hasil Google dibatasi oleh lebar visual. Judul dengan banyak huruf sempit dapat memuat lebih banyak karakter daripada judul dengan huruf lebar, huruf besar, atau glif yang terlihat tebal. Pengukuran piksel memberikan pratinjau yang lebih akurat dari hasil yang terlihat.',
+  },
+  {
+    question: 'Apakah ini menjamin persis bagaimana Google akan memotong cuplikan saya?',
+    answer: 'Tidak. Google dapat menulis ulang tautan judul dan cuplikan, dan rendering dapat bervariasi menurut kueri, perangkat, bahasa, dan eksperimen. Alat ini dirancang sebagai panduan visual praktis untuk menulis metadata yang lebih kecil kemungkinannya untuk dipotong.',
+  },
+  {
+    question: 'Batas piksel apa yang digunakan simulator?',
+    answer: 'Batas default judul desktop adalah 580 px, judul seluler 600 px, dan batas deskripsi meta adalah 920 px. Ini adalah target penulisan, bukan batas resmi Google.',
+  },
+  {
+    question: 'Mengapa pratinjau menambahkan elipsis?',
+    answer: 'Saat teks yang diukur melebihi lebar piksel yang tersedia, simulator memotong string pada karakter terakhir yang muat dan menambahkan tiga titik, mencocokkan perilaku praktis yang dibutuhkan tim SEO untuk mendeteksi hilangnya makna.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Tag judul',
+  titlePlaceholder: 'GameBob | Studio Pengembangan Independen',
+  urlLabel: 'URL yang terlihat',
+  urlPlaceholder: 'https://www.gamebob.dev/id/',
+  descriptionLabel: 'Deskripsi meta',
+  descriptionPlaceholder: 'Temukan koleksi alat dan permainan kami yang dirancang untuk meningkatkan alur kerja digital dan hiburan Anda.',
+  deviceLabel: 'Mode pratinjau',
+  desktopLabel: 'Desktop',
+  mobileLabel: 'Seluler',
+  titlePixelsLabel: 'Lebar judul',
+  descriptionPixelsLabel: 'Lebar deskripsi',
+  charactersLabel: 'karakter',
+  previewLabel: 'Pratinjau langsung gaya Google',
+  tooLongLabel: 'Terlalu lebar',
+  goodLabel: 'Pas',
+  emptyTitle: 'Judul Anda akan muncul di sini',
+  emptyDescription: 'Pratinjau deskripsi meta Anda akan muncul di sini saat Anda mengetik.',
+  defaultTitle: 'GameBob | Studio Pengembangan Independen',
+  defaultUrl: 'https://www.gamebob.dev/id/',
+  defaultDescription: 'Temukan koleksi alat dan permainan kami yang dirancang untuk meningkatkan alur kerja digital dan hiburan Anda.',
+  fallbackUrl: 'contoh.co.id',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Ambil',
+  fetchLoadingLabel: 'Mengambil...',
+  fetchSuccessLabel: 'Metadata dimuat dari URL.',
+  fetchCorsError: 'Browser tidak dapat membaca halaman ini. Mungkin diblokir oleh CORS, pengalihan, konten campuran, atau aturan jaringan. Anda masih dapat menempelkan atau mengedit metadata secara manual.',
+  fetchInvalidUrlError: 'Masukkan URL yang valid sebelum mengambil metadata.',
+  fetchNoMetadataError: 'Halaman diambil, tetapi tidak ada judul atau deskripsi meta yang ditemukan.',
+  fetchGenericError: 'Metadata tidak dapat diambil dari URL ini. Periksa alamat atau isi kolom secara manual.',
+};
+
+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: 'id',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Pertanyaan umum tentang simulator SERP',
+  faq,
+  bibliographyTitle: 'Dokumentasi hasil pencarian',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Berhenti menebak bagaimana hasil Google Anda akan terlihat',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tag judul bisa terlihat sempurna di spreadsheet dan tetap gagal di hasil pencarian. Google tidak mencadangkan ruang berdasarkan jumlah karakter; Google merender teks di dalam kartu visual. Itu berarti <strong>GameBob | Studio Pengembangan Independen</strong> dan judul lain dengan jumlah karakter yang sama dapat menempati lebar yang sangat berbeda tergantung pada huruf, kapitalisasi, tanda baca, dan spasi.',
+    },
+    {
+      type: 'tip',
+      title: 'Aturan yang benar benar membantu',
+      html: 'Tulis cuplikan sehingga janji penting bertahan dari elipsis. Tempatkan jenis halaman, maksud pencarian, dan alasan terkuat untuk mengklik sebelum batas piksel. Nama merek berguna, tetapi tidak boleh mendorong manfaat utama keluar dari pandangan.',
+    },
+    {
+      type: 'title',
+      text: 'Apa yang diukur oleh penghitung piksel',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Elemen', 'Yang penting', 'Cara menggunakan hasilnya'],
+      rows: [
+        ['Tag judul', 'Lebar yang dirender dalam piksel, bukan jumlah karakter mentah', 'Jaga kata kunci utama dan janji klik tetap terlihat sebelum pemotongan.'],
+        ['URL yang terlihat', 'Kepercayaan visual dan kejelasan topik', 'Gunakan jalur yang dapat dibaca yang memperkuat ke mana hasil mengarah.'],
+        ['Deskripsi meta', 'Area cuplikan yang lebih luas dengan perilaku tergantung kueri', 'Tempatkan manfaat di depan karena Google dapat mempersingkat atau menulis ulangnya.'],
+        ['Mode perangkat', 'Kartu desktop dan seluler bisa terasa berbeda', 'Periksa keduanya sebelum menerbitkan metadata untuk halaman penting.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Mengapa batas karakter adalah kebiasaan SEO yang lemah',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Saran tradisional seperti "jaga judul di bawah 60 karakter" memang nyaman, tetapi menyembunyikan masalah sebenarnya. Huruf lebar seperti W dan M, kata huruf besar, pemisah, angka, dan nama merek panjang semuanya mengonsumsi ruang yang berbeda. Pengukuran piksel membuat pertukaran langsung terlihat: Anda dapat melihat apakah sebuah frasa pantas mendapat tempatnya atau mencuri ruang dari pesan yang lebih kuat.',
+    },
+    {
+      type: 'title',
+      text: 'Alur kerja praktis untuk cuplikan yang lebih baik',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Mulai dengan maksud:</strong> jelaskan apa yang didapat pengguna, bukan hanya apa nama halamannya.',
+        '<strong>Uji judul lengkap:</strong> tempelkan ke simulator dan perhatikan bilahnya sebelum menerbitkan.',
+        '<strong>Hapus kata-kata lemah:</strong> jika bilah berubah merah, hapus kata pengisi sebelum memotong istilah berharga.',
+        '<strong>Periksa elipsis:</strong> jika pratinjau yang dipotong kehilangan makna, tulis ulang judul alih-alih menerima pemotongan.',
+        '<strong>Ulangi untuk deskripsi:</strong> pastikan kalimat pertama membawa proposisi nilai dengan sendirinya.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Saat bilah berubah merah',
+      html: 'Bilah merah bukan peringatan penalti. Itu berarti teks saat ini lebih lebar dari target visual yang dipilih, jadi simulator memotongnya dengan titik. Perlakukan itu sebagai sinyal editorial: putuskan apakah kata-kata tersembunyi dapat dibuang, atau apakah cuplikan membutuhkan struktur yang lebih tajam.',
+    },
+    {
+      type: 'title',
+      text: 'Batasan, penulisan ulang, dan harapan realistis',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tidak ada simulator yang dapat menjamin cuplikan persis yang akan ditampilkan Google. Google dapat menulis ulang tautan judul, menebalkan istilah kueri, memilih teks halaman alih-alih deskripsi meta, atau menampilkan cuplikan berbeda untuk pencarian yang berbeda. Alat ini paling baik digunakan sebagai langkah penulisan dan QA cepat: alat ini mendeteksi kelebihan visual yang jelas sebelum halaman mencapai produksi.',
+    },
+    {
+      type: 'summary',
+      title: 'Penggunaan terbaik simulator SERP ini',
+      items: [
+        'Gunakan bilah piksel untuk mendeteksi kelebihan visual sebelum menerbitkan metadata.',
+        'Jaga maksud pencarian utama dan janji klik tetap terlihat sebelum elipsis apa pun.',
+        'Ambil metadata dari URL yang mengizinkan CORS, lalu edit hasilnya secara manual jika diperlukan.',
+        'Anggap pratinjau sebagai panduan penulisan, karena Google masih dapat menulis ulang cuplikan per kueri.',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/i18n/it.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 = 'simulatore-serp-contatore-pixel';
+const title = 'Simulatore SERP e Contatore Pixel SEO';
+const description = 'Visualizza in anteprima gli snippet di ricerca in stile Google in tempo reale, misura la larghezza in pixel del titolo e della meta description e scopri esattamente dove il testo verrà troncato.';
+
+const howTo = [
+  {
+    name: 'Inserisci il tag title',
+    text: 'Digita o incolla il titolo della pagina che vuoi testare. L\'anteprima SERP e il misuratore di pixel si aggiornano a ogni tasto premuto.',
+  },
+  {
+    name: 'Aggiungi l\'URL visibile',
+    text: 'Usa un dominio e un percorso realistici in modo che lo snippet assomigli al risultato che un utente esaminerebbe.',
+  },
+  {
+    name: 'Scrivi la meta description',
+    text: 'Aggiungi il testo della descrizione e osserva la barra dei pixel. Quando supera la larghezza visiva consigliata, l\'anteprima la tronca con i puntini di sospensione.',
+  },
+  {
+    name: 'Passa da desktop a mobile',
+    text: 'Confronta la resa del titolo con la larghezza della scheda desktop o mobile prima di pubblicare i metadati.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Perché contare i pixel invece dei caratteri per i titoli SEO?',
+    answer: 'Le schede dei risultati di Google sono vincolate dalla larghezza visiva. Un titolo con molte lettere strette può contenere più caratteri di uno con lettere larghe, maiuscole o glifi dall\'aspetto marcato. La misurazione in pixel offre un\'anteprima più fedele del risultato visibile.',
+  },
+  {
+    question: 'Questo garantisce esattamente come Google troncherà il mio snippet?',
+    answer: 'No. Google può riscrivere i link del titolo e gli snippet, e la resa può variare in base alla query, al dispositivo, alla lingua e agli esperimenti. Lo strumento è pensato come una guida visiva pratica per scrivere metadati con meno probabilità di essere tagliati.',
+  },
+  {
+    question: 'Quali limiti di pixel utilizza il simulatore?',
+    answer: 'Il limite predefinito del titolo su desktop è di 580 px, su mobile di 600 px e il limite della meta description è di 920 px. Sono obiettivi di scrittura, non limiti ufficiali di Google.',
+  },
+  {
+    question: 'Perché l\'anteprima aggiunge i puntini di sospensione?',
+    answer: 'Quando il testo misurato supera la larghezza in pixel disponibile, il simulatore tronca la stringa all\'ultimo carattere che rientra e aggiunge tre puntini, riproducendo il comportamento pratico di cui i team SEO hanno bisogno per individuare la perdita di significato.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Tag title',
+  titlePlaceholder: 'GameBob | Studio di Sviluppo Indipendente',
+  urlLabel: 'URL visibile',
+  urlPlaceholder: 'https://www.gamebob.dev/it/',
+  descriptionLabel: 'Meta description',
+  descriptionPlaceholder: 'Scopri la nostra collezione di strumenti e giochi pensati per migliorare il tuo flusso di lavoro digitale e l\'intrattenimento.',
+  deviceLabel: 'Modalità anteprima',
+  desktopLabel: 'Desktop',
+  mobileLabel: 'Mobile',
+  titlePixelsLabel: 'Larghezza titolo',
+  descriptionPixelsLabel: 'Larghezza descrizione',
+  charactersLabel: 'caratteri',
+  previewLabel: 'Anteprima dal vivo in stile Google',
+  tooLongLabel: 'Troppo larga',
+  goodLabel: 'Ok',
+  emptyTitle: 'Il tuo titolo apparirà qui',
+  emptyDescription: 'L\'anteprima della tua meta description apparirà qui mentre digiti.',
+  defaultTitle: 'GameBob | Studio di Sviluppo Indipendente',
+  defaultUrl: 'https://www.gamebob.dev/it/',
+  defaultDescription: 'Scopri la nostra collezione di strumenti e giochi pensati per migliorare il tuo flusso di lavoro digitale e l\'intrattenimento.',
+  fallbackUrl: 'esempio.com',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Recupera',
+  fetchLoadingLabel: 'Recupero in corso...',
+  fetchSuccessLabel: 'Metadati caricati dall\'URL.',
+  fetchCorsError: 'Il browser non ha potuto leggere questa pagina. Potrebbe essere bloccata da CORS, un reindirizzamento, contenuti misti o una regola di rete. Puoi comunque incollare o modificare i metadati manualmente.',
+  fetchInvalidUrlError: 'Inserisci un URL valido prima di recuperare i metadati.',
+  fetchNoMetadataError: 'La pagina è stata recuperata, ma non è stato trovato alcun titolo o meta description.',
+  fetchGenericError: 'Impossibile recuperare i metadati da questo URL. Verifica l\'indirizzo o compila i campi 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: 'it',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande frequenti sul simulatore SERP',
+  faq,
+  bibliographyTitle: 'Documentazione sui risultati di ricerca',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Smetti di indovinare come apparirà il tuo risultato su Google',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Un tag title può sembrare perfetto in un foglio di calcolo e comunque fallire nel risultato di ricerca. Google non riserva spazio in base al numero di caratteri; mostra il testo all\'interno di una scheda visiva. Questo significa che <strong>GameBob | Studio di Sviluppo Indipendente</strong> e un altro titolo con lo stesso numero di caratteri possono occupare larghezze molto diverse a seconda delle lettere, delle maiuscole, della punteggiatura e della spaziatura.',
+    },
+    {
+      type: 'tip',
+      title: 'La regola che aiuta davvero',
+      html: 'Scrivi lo snippet in modo che la promessa importante sopravviva ai puntini di sospensione. Metti il tipo di pagina, l\'intento di ricerca e il motivo più forte per cliccare prima del limite di pixel. I nomi dei marchi sono utili, ma non devono spingere il beneficio principale fuori dalla vista.',
+    },
+    {
+      type: 'title',
+      text: 'Cosa misura il contatore di pixel',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Elemento', 'Cosa conta', 'Come usare il risultato'],
+      rows: [
+        ['Tag title', 'Larghezza renderizzata in pixel, non il conteggio grezzo dei caratteri', 'Mantieni la parola chiave principale e la promessa di clic visibili prima del troncamento.'],
+        ['URL visibile', 'Fiducia visiva e chiarezza dell\'argomento', 'Usa un percorso leggibile che rafforzi la destinazione del risultato.'],
+        ['Meta description', 'Un\'area snippet più ampia con comportamento dipendente dalla query', 'Metti il beneficio in primo piano perché Google potrebbe accorciarla o riscriverla.'],
+        ['Modalità dispositivo', 'Le schede desktop e mobile possono sembrare diverse', 'Controlla entrambe prima di pubblicare i metadati per le pagine importanti.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Perché i limiti di caratteri sono una cattiva abitudine SEO',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Il consiglio tradizionale come "mantieni i titoli sotto i 60 caratteri" è comodo, ma nasconde il vero problema. Lettere larghe come W e M, parole in maiuscolo, separatori, numeri e nomi di marca lunghi consumano tutti spazi diversi. La misurazione in pixel rende il compromesso immediatamente visibile: puoi vedere se una frase si guadagna il suo posto o ruba spazio a un messaggio più forte.',
+    },
+    {
+      type: 'title',
+      text: 'Un flusso di lavoro pratico per snippet migliori',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Inizia con l\'intento:</strong> descrivi cosa ottiene l\'utente, non solo come si chiama la pagina.',
+        '<strong>Testa il titolo completo:</strong> incollalo nel simulatore e osserva la barra prima di pubblicare.',
+        '<strong>Rimuovi le parole deboli:</strong> se la barra diventa rossa, elimina i riempitivi prima di tagliare i termini preziosi.',
+        '<strong>Controlla i puntini di sospensione:</strong> se l\'anteprima troncata perde significato, riscrivi il titolo invece di accettare il taglio.',
+        '<strong>Ripeti per la descrizione:</strong> assicurati che la prima frase porti da sola la proposta di valore.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Quando la barra diventa rossa',
+      html: 'Una barra rossa non è un avviso di penalizzazione. Significa che il testo attuale è più largo dell\'obiettivo visivo selezionato, quindi il simulatore lo tronca con i puntini. Consideralo come un segnale editoriale: decidi se le parole nascoste sono sacrificabili o se lo snippet ha bisogno di una struttura più affilata.',
+    },
+    {
+      type: 'title',
+      text: 'Limiti, riscritture e aspettative realistiche',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nessun simulatore può garantire lo snippet esatto che Google mostrerà. Google può riscrivere i link del titolo, mettere in grassetto i termini della query, scegliere il testo della pagina invece della meta description o mostrare snippet diversi per ricerche diverse. Questo strumento è più utile come fase rapida di scrittura e controllo qualità: rileva gli overflow visivi evidenti prima che la pagina arrivi in produzione.',
+    },
+    {
+      type: 'summary',
+      title: 'Miglior uso di questo simulatore SERP',
+      items: [
+        'Usa la barra dei pixel per individuare gli overflow visivi prima di pubblicare i metadati.',
+        'Mantieni l\'intento di ricerca principale e la promessa di clic visibili prima di qualsiasi ellissi.',
+        'Recupera i metadati dagli URL che consentono CORS, poi modifica il risultato manualmente se necessario.',
+        'Considera l\'anteprima come una guida alla scrittura, perché Google può comunque riscrivere gli snippet per ogni query.',
+      ],
+    },
+  ],
+};

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がクエリごとにスニペットを書き換える可能性があるため、プレビューを執筆ガイドとして扱います。',
+      ],
+    },
+  ],
+};