@jjlmoya/utils-developer 1.14.0 → 1.16.0

package/src/tool/serpPixelSimulator/i18n/sv.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-raknare';
+const title = 'SERP Simulator och SEO Pixelräknare';
+const description = 'Förhandsgranska Google-liknande söksnuttar i realtid, mät bredden på titel och metabeskrivning i pixlar och se exakt var din text kommer att kapas.';
+
+const howTo = [
+  {
+    name: 'Ange title-taggen',
+    text: 'Skriv eller klistra in sidtiteln du vill testa. SERP-förhandsgranskningen och pixelmätaren uppdateras vid varje tangenttryckning.',
+  },
+  {
+    name: 'Lägg till den synliga URL:en',
+    text: 'Använd en realistisk domän och sökväg så att snutten liknar resultatet en sökare skulle skanna.',
+  },
+  {
+    name: 'Skriv metabeskrivningen',
+    text: 'Lägg till beskrivningstexten och titta på pixelfältet. När den överskrider den rekommenderade visuella bredden kapar förhandsgranskningen den med ellipser.',
+  },
+  {
+    name: 'Växla mellan dator och mobil',
+    text: 'Jämför titelrenderingen med kortbredden för dator eller mobil innan du publicerar metadata.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Varför räkna pixlar istället för tecken för SEO-titlar?',
+    answer: 'Googles sökresultatkort begränsas av visuell bredd. En titel med många smala bokstäver kan rymma fler tecken än en titel med breda bokstäver, versaler eller fetstilta glyfer. Pixelmätning ger en mer exakt förhandsvisning av det synliga resultatet.',
+  },
+  {
+    question: 'Garanterar detta exakt hur Google kommer att kapa min snutt?',
+    answer: 'Nej. Google kan skriva om titellänkar och snuttar, och renderingen kan variera beroende på sökfråga, enhet, språk och experiment. Verktyget är utformat som en praktisk visuell vägledning för att skriva metadata som är mindre troligt att kapas.',
+  },
+  {
+    question: 'Vilka pixelgränser använder simulatorn?',
+    answer: 'Standardgränsen för titel på dator är 580 px, på mobil 600 px och gränsen för metabeskrivning är 920 px. Dessa är skrivmål, inte officiella Google-gränser.',
+  },
+  {
+    question: 'Varför lägger förhandsgranskningen till ellipser?',
+    answer: 'När den uppmätta texten överskrider den tillgängliga pixelbredden kapar simulatorn strängen vid det sista passande tecknet och lägger till tre punkter, vilket matchar det praktiska beteende SEO-team behöver för att upptäcka meningsförlust.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Title-tagg',
+  titlePlaceholder: 'GameBob | Oberoende Utvecklingsstudio',
+  urlLabel: 'Synlig URL',
+  urlPlaceholder: 'https://www.gamebob.dev/sv/',
+  descriptionLabel: 'Metabeskrivning',
+  descriptionPlaceholder: 'Upptäck vår samling av verktyg och spel som är utformade för att lyfta ditt digitala arbetsflöde och underhållning.',
+  deviceLabel: 'Förhandsgranskningsläge',
+  desktopLabel: 'Dator',
+  mobileLabel: 'Mobil',
+  titlePixelsLabel: 'Titelbredd',
+  descriptionPixelsLabel: 'Beskrivningsbredd',
+  charactersLabel: 'tecken',
+  previewLabel: 'Live-förhandsgranskning i Google-stil',
+  tooLongLabel: 'För bred',
+  goodLabel: 'Passar',
+  emptyTitle: 'Din titel visas här',
+  emptyDescription: 'Förhandsgranskningen av din metabeskrivning visas här medan du skriver.',
+  defaultTitle: 'GameBob | Oberoende Utvecklingsstudio',
+  defaultUrl: 'https://www.gamebob.dev/sv/',
+  defaultDescription: 'Upptäck vår samling av verktyg och spel som är utformade för att lyfta ditt digitala arbetsflöde och underhållning.',
+  fallbackUrl: 'exempel.se',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Hämta',
+  fetchLoadingLabel: 'Hämtar...',
+  fetchSuccessLabel: 'Metadata laddades från URL:en.',
+  fetchCorsError: 'Webbläsaren kunde inte läsa denna sida. Den kan vara blockerad av CORS, en omdirigering, blandat innehåll eller en nätverksregel. Du kan fortfarande klistra in eller redigera metadata manuellt.',
+  fetchInvalidUrlError: 'Ange en giltig URL innan du hämtar metadata.',
+  fetchNoMetadataError: 'Sidan hämtades, men ingen titel eller metabeskrivning hittades.',
+  fetchGenericError: 'Metadata kunde inte hämtas från denna URL. Kontrollera adressen eller fyll i fälten manuellt.',
+};
+
+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: 'sv',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga frågor om SERP simulatorn',
+  faq,
+  bibliographyTitle: 'Dokumentation om sökresultat',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Sluta gissa hur ditt Google-resultat kommer att se ut',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'En title-tagg kan se perfekt ut i ett kalkylblad och ändå misslyckas i sökresultatet. Google reserverar inte utrymme efter teckenantal; det renderar text inuti ett visuellt kort. Det betyder att <strong>GameBob | Oberoende Utvecklingsstudio</strong> och en annan titel med samma antal tecken kan uppta mycket olika bredder beroende på bokstäverna, versaler, interpunktion och mellanrum.',
+    },
+    {
+      type: 'tip',
+      title: 'Regeln som verkligen hjälper',
+      html: 'Skriv snutten så att det viktiga löftet överlever ellipsen. Placera sidtypen, sökintentionen och den starkaste anledningen att klicka före pixelgränsen. Varumärkesnamn är användbara, men de ska inte trycka ut huvudfördelen ur sikte.',
+    },
+    {
+      type: 'title',
+      text: 'Vad pixelräknaren mäter',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Element', 'Vad som spelar roll', 'Hur du använder resultatet'],
+      rows: [
+        ['Title-tagg', 'Renderad bredd i pixlar, inte antal tecken', 'Håll det primära nyckelordet och klicklöftet synliga före kapningen.'],
+        ['Synlig URL', 'Visuellt förtroende och ämnestydehet', 'Använd en läsbar sökväg som förstärker vart resultatet leder.'],
+        ['Metabeskrivning', 'Ett bredare snuttområde med frågeberoende beteende', 'Placera fördelen först eftersom Google kan förkorta eller skriva om den.'],
+        ['Enhetsläge', 'Dator- och mobilkort kan kännas olika', 'Kontrollera båda innan du publicerar metadata för viktiga sidor.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Varför teckengränser är en svag SEO-vana',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Traditionella råd som "håll titlar under 60 tecken" är bekväma, men döljer det verkliga problemet. Breda bokstäver som W och M, versaler, avgränsare, siffror och långa varumärkesnamn tar alla olika utrymme. Pixelmätning gör avvägningen omedelbart synlig: du kan se om en fras förtjänar sin plats eller stjäl utrymme från ett starkare budskap.',
+    },
+    {
+      type: 'title',
+      text: 'Ett praktiskt arbetsflöde för bättre snuttar',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Börja med intentionen:</strong> beskriv vad användaren får, inte bara vad sidan heter.',
+        '<strong>Testa hela titeln:</strong> klistra in den i simulatorn och titta på fältet innan publicering.',
+        '<strong>Ta bort svaga ord:</strong> om fältet blir rött, ta bort utfyllnadsord innan du kapar värdefulla termer.',
+        '<strong>Kontrollera ellipsen:</strong> om den kapade förhandsgranskningen tappar mening, skriv om titeln istället för att acceptera kapningen.',
+        '<strong>Upprepa för beskrivningen:</strong> se till att den första meningen bär värdeerbjudandet på egen hand.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'När fältet blir rött',
+      html: 'Ett rött fält är inte en straffvarning. Det betyder att den aktuella texten är bredare än det valda visuella målet, så simulatorn kapar den med punkter. Behandla det som en redaktionell signal: avgör om de dolda orden är onödiga eller om snutten behöver en skarpare struktur.',
+    },
+    {
+      type: 'title',
+      text: 'Begränsningar, omskrivningar och realistiska förväntningar',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ingen simulator kan garantera den exakta snutt Google kommer att visa. Google kan skriva om titellänkar, fetstilta söktermer, välja sidtext istället för metabeskrivningen eller visa olika snuttar för olika sökningar. Detta verktyg är bäst lämpat som ett snabbt skriv- och QA-steg: det fångar uppenbar visuell överskridning innan sidan når produktion.',
+    },
+    {
+      type: 'summary',
+      title: 'Bästa användning av denna SERP simulator',
+      items: [
+        'Använd pixelfältet för att fånga visuell överskridning innan du publicerar metadata.',
+        'Håll den huvudsakliga sökintentionen och klicklöftet synliga före någon ellips.',
+        'Hämta metadata från URL:er som tillåter CORS och redigera sedan resultatet manuellt vid behov.',
+        'Betrakta förhandsgranskningen som en skrivguide, eftersom Google fortfarande kan skriva om snuttar per sökfråga.',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/i18n/tr.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-simulatoru';
+const title = 'SERP Simülatörü ve SEO Piksel Sayacı';
+const description = 'Google tarzı arama snippet\'lerini gerçek zamanlı olarak önizleyin, başlık ve meta açıklamasının piksel cinsinden genişliğini ölçün ve metninizin tam olarak nerede kesileceğini görün.';
+
+const howTo = [
+  {
+    name: 'Title etiketini girin',
+    text: 'Test etmek istediğiniz sayfa başlığını yazın veya yapıştırın. SERP önizlemesi ve piksel ölçer her tuş vuruşunda güncellenir.',
+  },
+  {
+    name: 'Görünen URL\'yi ekleyin',
+    text: 'Snippet\'in bir arayıcının tarayacağı sonuca benzemesi için gerçekçi bir alan adı ve yol kullanın.',
+  },
+  {
+    name: 'Meta açıklamasını yazın',
+    text: 'Açıklama metnini ekleyin ve piksel çubuğunu izleyin. Önerilen görsel genişliği aştığında, önizleme üç nokta ile keser.',
+  },
+  {
+    name: 'Masaüstü ve mobil arasında geçiş yapın',
+    text: 'Meta verilerini yayınlamadan önce başlık görüntülemesini masaüstü veya mobil kart genişliğiyle karşılaştırın.',
+  },
+];
+
+const faq = [
+  {
+    question: 'SEO başlıkları için neden karakter yerine piksel sayılmalı?',
+    answer: 'Google arama sonucu kartları görsel genişlikle sınırlıdır. Çok sayıda dar harf içeren bir başlık, geniş harfler, büyük harfler veya kalın görünen glifler içeren bir başlıktan daha fazla karakter alabilir. Piksel ölçümü, görünen sonucun daha gerçekçi bir önizlemesini sunar.',
+  },
+  {
+    question: 'Bu, Google\'ın snippet\'imi tam olarak nasıl keseceğini garanti eder mi?',
+    answer: 'Hayır. Google başlık bağlantılarını ve snippet\'leri yeniden yazabilir ve görüntüleme sorguya, cihaza, dile ve deneylere göre değişebilir. Araç, kesilme olasılığı daha düşük meta verileri yazmak için pratik bir görsel kılavuz olarak tasarlanmıştır.',
+  },
+  {
+    question: 'Simülatör hangi piksel sınırlarını kullanıyor?',
+    answer: 'Masaüstü için varsayılan başlık sınırı 580 px, mobil için 600 px ve meta açıklama sınırı 920 px\'dir. Bunlar yazım hedefleridir, resmi Google sınırları değildir.',
+  },
+  {
+    question: 'Önizleme neden üç nokta ekliyor?',
+    answer: 'Ölçülen metin mevcut piksel genişliğini aştığında, simülatör dizeyi sığan son karakterde keser ve üç nokta ekler; bu, SEO ekiplerinin anlam kaybını tespit etmek için ihtiyaç duyduğu pratik davranışla örtüşür.',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: 'Title etiketi',
+  titlePlaceholder: 'GameBob | Bağımsız Geliştirme Stüdyosu',
+  urlLabel: 'Görünen URL',
+  urlPlaceholder: 'https://www.gamebob.dev/tr/',
+  descriptionLabel: 'Meta açıklaması',
+  descriptionPlaceholder: 'Dijital iş akışınızı ve eğlencenizi geliştirmek için tasarlanmış araç ve oyun koleksiyonumuzu keşfedin.',
+  deviceLabel: 'Önizleme modu',
+  desktopLabel: 'Masaüstü',
+  mobileLabel: 'Mobil',
+  titlePixelsLabel: 'Başlık genişliği',
+  descriptionPixelsLabel: 'Açıklama genişliği',
+  charactersLabel: 'karakter',
+  previewLabel: 'Canlı Google tarzı önizleme',
+  tooLongLabel: 'Çok geniş',
+  goodLabel: 'Uygun',
+  emptyTitle: 'Başlığınız burada görünecek',
+  emptyDescription: 'Meta açıklamanızın önizlemesi siz yazdıkça burada görünecek.',
+  defaultTitle: 'GameBob | Bağımsız Geliştirme Stüdyosu',
+  defaultUrl: 'https://www.gamebob.dev/tr/',
+  defaultDescription: 'Dijital iş akışınızı ve eğlencenizi geliştirmek için tasarlanmış araç ve oyun koleksiyonumuzu keşfedin.',
+  fallbackUrl: 'ornek.com.tr',
+  fallbackFaviconText: 'G',
+  pixelUnit: 'px',
+  ellipsis: '...',
+  fetchButtonLabel: 'Getir',
+  fetchLoadingLabel: 'Getiriliyor...',
+  fetchSuccessLabel: 'Meta verileri URL\'den yüklendi.',
+  fetchCorsError: 'Tarayıcı bu sayfayı okuyamadı. CORS, bir yönlendirme, karışık içerik veya bir ağ kuralı tarafından engellenmiş olabilir. Meta verileri yine de manuel olarak yapıştırabilir veya düzenleyebilirsiniz.',
+  fetchInvalidUrlError: 'Meta verileri getirmeden önce geçerli bir URL girin.',
+  fetchNoMetadataError: 'Sayfa getirildi, ancak başlık veya meta açıklaması bulunamadı.',
+  fetchGenericError: 'Bu URL\'den meta verileri getirilemedi. Adresi kontrol edin veya alanları manuel olarak doldurun.',
+};
+
+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: 'tr',
+};
+
+export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'SERP simülatörü hakkında sık sorulan sorular',
+  faq,
+  bibliographyTitle: 'Arama sonuçları dokümantasyonu',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Google sonucunuzun nasıl görüneceğini tahmin etmeyi bırakın',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bir title etiketi bir elektronik tabloda mükemmel görünebilir ve yine de arama sonucunda başarısız olabilir. Google, karakter sayısına göre alan ayırmaz; metni görsel bir kart içinde işler. Bu, <strong>GameBob | Bağımsız Geliştirme Stüdyosu</strong> ile aynı sayıda karaktere sahip başka bir başlığın, harflere, büyük/küçük harfe, noktalamaya ve boşluklara bağlı olarak çok farklı genişlikler kaplayabileceği anlamına gelir.',
+    },
+    {
+      type: 'tip',
+      title: 'Gerçekten işe yarayan kural',
+      html: 'Snippet\'i, önemli vaat üç noktadan sağ çıkacak şekilde yazın. Sayfa türünü, arama niyetini ve tıklamak için en güçlü nedeni piksel sınırından önce yerleştirin. Marka adları faydalıdır, ancak ana faydayı görüş alanından çıkarmamalıdır.',
+    },
+    {
+      type: 'title',
+      text: 'Piksel sayacı neyi ölçüyor',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Öğe', 'Önemli olan', 'Sonucu nasıl kullanmalısınız'],
+      rows: [
+        ['Title etiketi', 'Ham karakter sayısı değil, piksel cinsinden işlenmiş genişlik', 'Birincil anahtar kelimeyi ve tıklama vaadini kesilmeden önce görünür tutun.'],
+        ['Görünen URL', 'Görsel güven ve konu netliği', 'Sonucun nereye yönlendirdiğini pekiştiren okunabilir bir yol kullanın.'],
+        ['Meta açıklaması', 'Sorguya bağlı davranışa sahip daha geniş bir snippet alanı', 'Google kısaltabileceği veya yeniden yazabileceği için faydayı öne koyun.'],
+        ['Cihaz modu', 'Masaüstü ve mobil kartlar farklı hissedilebilir', 'Önemli sayfalar için meta verileri yayınlamadan önce her ikisini de kontrol edin.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Karakter sınırları neden zayıf bir SEO alışkanlığıdır',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '"Başlıkları 60 karakterin altında tutun" gibi geleneksel tavsiyeler kullanışlıdır, ancak gerçek sorunu gizler. W ve M gibi geniş harfler, büyük harfli kelimeler, ayırıcılar, sayılar ve uzun marka adları farklı alanlar kaplar. Piksel ölçümü, ödünleşimi hemen görünür kılar: bir ifadenin yerini hak edip etmediğini veya daha güçlü bir mesajdan alan çalıp çalmadığını görebilirsiniz.',
+    },
+    {
+      type: 'title',
+      text: 'Daha iyi snippet\'ler için pratik bir iş akışı',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Niyetle başlayın:</strong> kullanıcının ne elde ettiğini tanımlayın, sadece sayfanın adını değil.',
+        '<strong>Tam başlığı test edin:</strong> simülatöre yapıştırın ve yayınlamadan önce çubuğu izleyin.',
+        '<strong>Zayıf kelimeleri çıkarın:</strong> çubuk kırmızıya dönerse, değerli terimleri kesmeden önce dolgu kelimelerini kaldırın.',
+        '<strong>Üç noktayı kontrol edin:</strong> kesilmiş önizleme anlamını kaybederse, kesmeyi kabul etmek yerine başlığı yeniden yazın.',
+        '<strong>Açıklama için tekrarlayın:</strong> ilk cümlenin değer önerisini tek başına taşıdığından emin olun.',
+      ],
+    },
+    {
+      type: 'diagnostic',
+      variant: 'info',
+      title: 'Çubuk kırmızıya döndüğünde',
+      html: 'Kırmızı çubuk bir ceza uyarısı değildir. Mevcut metnin seçilen görsel hedeften daha geniş olduğu anlamına gelir, bu yüzden simülatör onu noktalarla keser. Bunu bir editoryal sinyal olarak değerlendirin: gizli kelimelerin vazgeçilebilir olup olmadığına veya snippet\'in daha keskin bir yapıya ihtiyacı olup olmadığına karar verin.',
+    },
+    {
+      type: 'title',
+      text: 'Sınırlar, yeniden yazmalar ve gerçekçi beklentiler',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Hiçbir simülatör Google\'ın göstereceği tam snippet\'i garanti edemez. Google başlık bağlantılarını yeniden yazabilir, sorgu terimlerini kalınlaştırabilir, meta açıklaması yerine sayfa metnini seçebilir veya farklı aramalar için farklı snippet\'ler gösterebilir. Bu araç en iyi şekilde hızlı bir yazım ve QA adımı olarak kullanılır: sayfa üretime geçmeden önce bariz görsel taşmaları yakalar.',
+    },
+    {
+      type: 'summary',
+      title: 'Bu SERP simülatörünün en iyi kullanımı',
+      items: [
+        'Meta verileri yayınlamadan önce görsel taşmaları yakalamak için piksel çubuğunu kullanın.',
+        'Ana arama niyetini ve tıklama vaadini herhangi bir üç noktadan önce görünür tutun.',
+        'CORS\'a izin veren URL\'lerden meta verileri getirin, ardından sonucu gerektiğinde manuel olarak düzenleyin.',
+        'Önizlemeyi bir yazım kılavuzu olarak değerlendirin, çünkü Google sorgu başına snippet\'leri yeniden yazabilir.',
+      ],
+    },
+  ],
+};

package/src/tool/serpPixelSimulator/i18n/zh.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: '添加显示网址',
+    text: '使用逼真的域名和路径，让摘要看起来像搜索者会扫描的结果。',
+  },
+  {
+    name: '编写元描述',
+    text: '添加描述文本并观察像素条。当超过推荐的视觉宽度时，预览会用省略号截断。',
+  },
+  {
+    name: '在桌面端和移动端之间切换',
+    text: '在发布元数据之前，将标题的渲染效果与桌面端或移动端的卡片宽度进行比较。',
+  },
+];
+
+const faq = [
+  {
+    question: '为什么要用像素而不是字符数来计算SEO标题？',
+    answer: 'Google搜索结果卡片受视觉宽度限制。包含许多窄字母的标题比包含宽字母、大写字母或粗体字形的标题能容纳更多字符。像素测量可以更准确地预览可见结果。',
+  },
+  {
+    question: '这能保证Google会精确按照这种方式截断我的摘要吗？',
+    answer: '不能。Google可能会重写标题链接和摘要，而且渲染效果可能因查询、设备、语言和实验而异。该工具旨在作为编写不太可能被截断的元数据的实用视觉指南。',
+  },
+  {
+    question: '模拟器使用什么像素限制？',
+    answer: '桌面端默认标题限制为580像素，移动端标题限制为600像素，元描述限制为920像素。这些是编写目标，而不是Google的官方限制。',
+  },
+  {
+    question: '为什么预览会添加省略号？',
+    answer: '当测量的文本超出可用的像素宽度时，模拟器会在最后一个能容纳的字符处截断字符串，并添加三个点，这与SEO团队检测含义丢失所需的实际行为一致。',
+  },
+];
+
+const ui: SerpPixelSimulatorUI = {
+  titleLabel: '标题标签',
+  titlePlaceholder: 'GameBob | 独立开发工作室',
+  urlLabel: '显示网址',
+  urlPlaceholder: 'https://www.gamebob.dev/zh/',
+  descriptionLabel: '元描述',
+  descriptionPlaceholder: '探索我们为提升您的数字工作流程和娱乐体验而设计的工具和游戏集合。',
+  deviceLabel: '预览模式',
+  desktopLabel: '桌面端',
+  mobileLabel: '移动端',
+  titlePixelsLabel: '标题宽度',
+  descriptionPixelsLabel: '描述宽度',
+  charactersLabel: '字符',
+  previewLabel: 'Google风格实时预览',
+  tooLongLabel: '过宽',
+  goodLabel: '适合',
+  emptyTitle: '您的标题将显示在此处',
+  emptyDescription: '您的元描述预览将在您输入时显示在此处。',
+  defaultTitle: 'GameBob | 独立开发工作室',
+  defaultUrl: 'https://www.gamebob.dev/zh/',
+  defaultDescription: '探索我们为提升您的数字工作流程和娱乐体验而设计的工具和游戏集合。',
+  fallbackUrl: 'example.cn',
+  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: 'zh',
+};
+
+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: [
+        ['标题标签', '以像素为单位的渲染宽度，而非原始字符数', '在截断之前保持主要关键词和点击承诺可见。'],
+        ['显示网址', '视觉信任和主题清晰度', '使用可读的路径，强化结果的去向。'],
+        ['元描述', '较宽的摘要区域，具有查询依赖行为', '将优势放在前面，因为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/index.ts

@@ -0,0 +1,12 @@
+import type { ToolDefinition } from '../../types';
+import type { ToolDefinition } from '../../types';
+import { serpPixelSimulator } from './entry';
+
+export * from './entry';
+
+export const SERP_PIXEL_SIMULATOR_TOOL: ToolDefinition = {
+  entry: serpPixelSimulator,
+  Component: () => import('./component.astro'),
+  SEOComponent: () => import('./seo.astro'),
+  BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/serpPixelSimulator/logic.ts

@@ -0,0 +1,18 @@
+export const DESKTOP_TITLE_LIMIT = 580;
+export const MOBILE_TITLE_LIMIT = 600;
+export const DESCRIPTION_LIMIT = 920;
+
+export type SerpDevice = 'desktop' | 'mobile';
+
+export function getTitleLimit(device: SerpDevice): number {
+  return device === 'mobile' ? MOBILE_TITLE_LIMIT : DESKTOP_TITLE_LIMIT;
+}
+
+export function ratioToPercent(width: number, limit: number): number {
+  if (!Number.isFinite(width) || !Number.isFinite(limit) || limit <= 0) return 0;
+  return Math.min(100, Math.max(0, (width / limit) * 100));
+}
+
+export function needsPixelTrim(width: number, limit: number): boolean {
+  return width > limit;
+}