@jjlmoya/utils-developer 1.14.0 → 1.16.0

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

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

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