@jjlmoya/utils-developer 1.15.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/package.json +1 -1
  2. package/src/category/index.ts +2 -1
  3. package/src/entries.ts +4 -1
  4. package/src/index.ts +2 -0
  5. package/src/tests/locale_completeness.test.ts +2 -3
  6. package/src/tests/pagespeed_best_practices.test.ts +198 -0
  7. package/src/tests/tool_validation.test.ts +2 -2
  8. package/src/tool/aspectRatio/component.astro +3 -1
  9. package/src/tool/colorConverter/component.astro +3 -3
  10. package/src/tool/llmCostCalculator/component.astro +1 -2
  11. package/src/tool/mobileMockupGenerator/component.astro +4 -5
  12. package/src/tool/placeholderGenerator/component.astro +2 -2
  13. package/src/tool/readabilityCalculator/component.astro +4 -4
  14. package/src/tool/serpPixelSimulator/bibliography.astro +7 -0
  15. package/src/tool/serpPixelSimulator/bibliography.ts +16 -0
  16. package/src/tool/serpPixelSimulator/component.astro +84 -0
  17. package/src/tool/serpPixelSimulator/controller.ts +323 -0
  18. package/src/tool/serpPixelSimulator/entry.ts +30 -0
  19. package/src/tool/serpPixelSimulator/i18n/de.ts +214 -0
  20. package/src/tool/serpPixelSimulator/i18n/en.ts +213 -0
  21. package/src/tool/serpPixelSimulator/i18n/es.ts +214 -0
  22. package/src/tool/serpPixelSimulator/i18n/fr.ts +214 -0
  23. package/src/tool/serpPixelSimulator/i18n/id.ts +214 -0
  24. package/src/tool/serpPixelSimulator/i18n/it.ts +214 -0
  25. package/src/tool/serpPixelSimulator/i18n/ja.ts +214 -0
  26. package/src/tool/serpPixelSimulator/i18n/ko.ts +214 -0
  27. package/src/tool/serpPixelSimulator/i18n/nl.ts +214 -0
  28. package/src/tool/serpPixelSimulator/i18n/pl.ts +214 -0
  29. package/src/tool/serpPixelSimulator/i18n/pt.ts +214 -0
  30. package/src/tool/serpPixelSimulator/i18n/ru.ts +214 -0
  31. package/src/tool/serpPixelSimulator/i18n/sv.ts +214 -0
  32. package/src/tool/serpPixelSimulator/i18n/tr.ts +214 -0
  33. package/src/tool/serpPixelSimulator/i18n/zh.ts +214 -0
  34. package/src/tool/serpPixelSimulator/index.ts +12 -0
  35. package/src/tool/serpPixelSimulator/logic.ts +18 -0
  36. package/src/tool/serpPixelSimulator/seo.astro +12 -0
  37. package/src/tool/serpPixelSimulator/serp-pixel-simulator.css +335 -0
  38. package/src/tool/serpPixelSimulator/ui.ts +33 -0
  39. package/src/tools.ts +2 -2
@@ -0,0 +1,214 @@
1
+ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SerpPixelSimulatorUI } from '../ui';
4
+ import { bibliography } from '../bibliography';
5
+
6
+ const slug = 'serp-pixel-simulator';
7
+ const title = 'SERP 시뮬레이터 & SEO 픽셀 카운터';
8
+ const description = 'Google 스타일 검색 스니펫을 실시간으로 미리보고, 제목과 메타 설명의 픽셀 너비를 측정하며, 텍스트가 정확히 어디서 잘릴지 확인하세요.';
9
+
10
+ const howTo = [
11
+ {
12
+ name: '타이틀 태그 입력하기',
13
+ text: '테스트하려는 페이지 제목을 입력하거나 붙여넣으세요. SERP 미리보기와 픽셀 측정기는 키 입력마다 업데이트됩니다.',
14
+ },
15
+ {
16
+ name: '표시 URL 추가하기',
17
+ text: '검색자가 스캔할 결과와 유사하게 보이도록 현실적인 도메인과 경로를 사용하세요.',
18
+ },
19
+ {
20
+ name: '메타 설명 작성하기',
21
+ text: '설명 텍스트를 추가하고 픽셀 바를 관찰하세요. 권장 시각적 너비를 초과하면 미리보기가 말줄임표로 자릅니다.',
22
+ },
23
+ {
24
+ name: '데스크톱과 모바일 전환하기',
25
+ text: '메타데이터를 게시하기 전에 데스크톱 또는 모바일 카드 너비로 제목 렌더링을 비교하세요.',
26
+ },
27
+ ];
28
+
29
+ const faq = [
30
+ {
31
+ question: 'SEO 제목에 문자 수 대신 픽셀을 세는 이유는 무엇인가요?',
32
+ answer: 'Google 검색 결과 카드는 시각적 너비에 의해 제한됩니다. 좁은 글자가 많은 제목은 넓은 글자, 대문자 또는 굵게 보이는 글리프가 있는 제목보다 더 많은 문자를 포함할 수 있습니다. 픽셀 측정은 표시되는 결과를 더 정확하게 미리 볼 수 있게 해줍니다.',
33
+ },
34
+ {
35
+ question: '이것이 Google이 내 스니펫을 어떻게 자를지 정확히 보장하나요?',
36
+ answer: '아니요. Google은 제목 링크와 스니펫을 다시 작성할 수 있으며, 렌더링은 쿼리, 기기, 언어, 실험에 따라 달라질 수 있습니다. 이 도구는 잘릴 가능성이 적은 메타데이터를 작성하기 위한 실용적인 시각적 가이드로 설계되었습니다.',
37
+ },
38
+ {
39
+ question: '시뮬레이터는 어떤 픽셀 제한을 사용하나요?',
40
+ answer: '데스크톱의 기본 제목 제한은 580px, 모바일 제목 제한은 600px, 메타 설명 제한은 920px입니다. 이는 작성 목표이며 공식 Google 제한이 아닙니다.',
41
+ },
42
+ {
43
+ question: '미리보기가 말줄임표를 추가하는 이유는 무엇인가요?',
44
+ answer: '측정된 텍스트가 사용 가능한 픽셀 너비를 초과하면, 시뮬레이터는 맞는 마지막 문자에서 문자열을 자르고 세 개의 점을 추가합니다. 이는 SEO 팀이 의미 손실을 감지하는 데 필요한 실용적인 동작과 일치합니다.',
45
+ },
46
+ ];
47
+
48
+ const ui: SerpPixelSimulatorUI = {
49
+ titleLabel: '타이틀 태그',
50
+ titlePlaceholder: 'GameBob | 인디 개발 스튜디오',
51
+ urlLabel: '표시 URL',
52
+ urlPlaceholder: 'https://www.gamebob.dev/ko/',
53
+ descriptionLabel: '메타 설명',
54
+ descriptionPlaceholder: '디지털 워크플로우와 엔터테인먼트를 향상시키도록 설계된 도구 및 게임 컬렉션을 발견하세요.',
55
+ deviceLabel: '미리보기 모드',
56
+ desktopLabel: '데스크톱',
57
+ mobileLabel: '모바일',
58
+ titlePixelsLabel: '제목 너비',
59
+ descriptionPixelsLabel: '설명 너비',
60
+ charactersLabel: '자',
61
+ previewLabel: 'Google 스타일 실시간 미리보기',
62
+ tooLongLabel: '너무 김',
63
+ goodLabel: '적합함',
64
+ emptyTitle: '제목이 여기에 표시됩니다',
65
+ emptyDescription: '메타 설명 미리보기가 입력하는 대로 여기에 표시됩니다.',
66
+ defaultTitle: 'GameBob | 인디 개발 스튜디오',
67
+ defaultUrl: 'https://www.gamebob.dev/ko/',
68
+ defaultDescription: '디지털 워크플로우와 엔터테인먼트를 향상시키도록 설계된 도구 및 게임 컬렉션을 발견하세요.',
69
+ fallbackUrl: 'example.co.kr',
70
+ fallbackFaviconText: 'G',
71
+ pixelUnit: 'px',
72
+ ellipsis: '...',
73
+ fetchButtonLabel: '가져오기',
74
+ fetchLoadingLabel: '가져오는 중...',
75
+ fetchSuccessLabel: 'URL에서 메타데이터를 로드했습니다.',
76
+ fetchCorsError: '브라우저가 이 페이지를 읽을 수 없습니다. CORS, 리디렉션, 혼합 콘텐츠 또는 네트워크 규칙에 의해 차단되었을 수 있습니다. 여전히 메타데이터를 수동으로 붙여넣거나 편집할 수 있습니다.',
77
+ fetchInvalidUrlError: '메타데이터를 가져오기 전에 유효한 URL을 입력하세요.',
78
+ fetchNoMetadataError: '페이지를 가져왔지만 제목 또는 메타 설명을 찾을 수 없습니다.',
79
+ fetchGenericError: '이 URL에서 메타데이터를 가져올 수 없습니다. 주소를 확인하거나 필드를 수동으로 입력하세요.',
80
+ };
81
+
82
+ const faqSchema: WithContext<FAQPage> = {
83
+ '@context': 'https://schema.org',
84
+ '@type': 'FAQPage',
85
+ mainEntity: faq.map((item) => ({
86
+ '@type': 'Question',
87
+ name: item.question,
88
+ acceptedAnswer: {
89
+ '@type': 'Answer',
90
+ text: item.answer,
91
+ },
92
+ })),
93
+ };
94
+
95
+ const howToSchema: WithContext<HowTo> = {
96
+ '@context': 'https://schema.org',
97
+ '@type': 'HowTo',
98
+ name: title,
99
+ description,
100
+ step: howTo.map((step, index) => ({
101
+ '@type': 'HowToStep',
102
+ position: index + 1,
103
+ name: step.name,
104
+ text: step.text,
105
+ })),
106
+ };
107
+
108
+ const appSchema: WithContext<SoftwareApplication> = {
109
+ '@context': 'https://schema.org',
110
+ '@type': 'SoftwareApplication',
111
+ name: title,
112
+ description,
113
+ applicationCategory: 'BusinessApplication',
114
+ operatingSystem: 'Any',
115
+ offers: {
116
+ '@type': 'Offer',
117
+ price: '0',
118
+ priceCurrency: 'EUR',
119
+ },
120
+ inLanguage: 'ko',
121
+ };
122
+
123
+ export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
124
+ slug,
125
+ title,
126
+ description,
127
+ ui,
128
+ faqTitle: 'SERP 시뮬레이터에 관한 자주 묻는 질문',
129
+ faq,
130
+ bibliographyTitle: '검색 결과 문서',
131
+ bibliography,
132
+ howTo,
133
+ schemas: [appSchema, faqSchema, howToSchema],
134
+ seo: [
135
+ {
136
+ type: 'title',
137
+ text: 'Google 결과가 어떻게 보일지 추측하지 마세요',
138
+ level: 2,
139
+ },
140
+ {
141
+ type: 'paragraph',
142
+ html: '타이틀 태그는 스프레드시트에서는 완벽해 보여도 검색 결과에서는 실패할 수 있습니다. Google은 문자 수로 공간을 예약하지 않고 시각적 카드 안에 텍스트를 렌더링합니다. 즉, <strong>GameBob | 인디 개발 스튜디오</strong>와 동일한 문자 수의 다른 제목이 문자, 대소문자, 구두점, 간격에 따라 매우 다른 너비를 차지할 수 있습니다.',
143
+ },
144
+ {
145
+ type: 'tip',
146
+ title: '실제로 도움이 되는 규칙',
147
+ html: '중요한 약속이 말줄임표를 살아남도록 스니펫을 작성하세요. 페이지 유형, 검색 의도, 클릭해야 할 가장 강력한 이유를 픽셀 제한 이전에 배치하세요. 브랜드 이름은 유용하지만 주요 혜택을 시야에서 밀어내서는 안 됩니다.',
148
+ },
149
+ {
150
+ type: 'title',
151
+ text: '픽셀 카운터가 측정하는 것',
152
+ level: 3,
153
+ },
154
+ {
155
+ type: 'table',
156
+ headers: ['요소', '중요한 것', '결과 사용 방법'],
157
+ rows: [
158
+ ['타이틀 태그', '원시 문자 수가 아닌 픽셀 단위의 렌더링 너비', '잘리기 전에 주요 키워드와 클릭 약속을 계속 표시합니다.'],
159
+ ['표시 URL', '시각적 신뢰와 주제 명확성', '결과가 어디로 연결되는지 강화하는 읽기 쉬운 경로를 사용합니다.'],
160
+ ['메타 설명', '쿼리 종속 동작이 있는 더 넓은 스니펫 영역', 'Google이 축소하거나 다시 작성할 수 있으므로 혜택을 앞에 배치합니다.'],
161
+ ['기기 모드', '데스크톱과 모바일 카드는 다르게 느껴질 수 있습니다', '중요한 페이지의 메타데이터를 게시하기 전에 두 가지를 모두 확인합니다.'],
162
+ ],
163
+ },
164
+ {
165
+ type: 'title',
166
+ text: '문자 제한이 약한 SEO 습관인 이유',
167
+ level: 3,
168
+ },
169
+ {
170
+ type: 'paragraph',
171
+ html: '"제목을 60자 미만으로 유지하라"와 같은 전통적인 조언은 편리하지만 실제 문제를 숨깁니다. W와 M 같은 넓은 글자, 대문자 단어, 구분자, 숫자, 긴 브랜드 이름은 모두 다른 공간을 소비합니다. 픽셀 측정은 절충안을 즉시 가시화합니다: 문구가 그 자리를 차지할 자격이 있는지, 더 강한 메시지로부터 공간을 빼앗고 있는지 확인할 수 있습니다.',
172
+ },
173
+ {
174
+ type: 'title',
175
+ text: '더 나은 스니펫을 위한 실용적인 워크플로우',
176
+ level: 3,
177
+ },
178
+ {
179
+ type: 'list',
180
+ items: [
181
+ '<strong>의도로 시작하세요:</strong> 페이지의 이름뿐만 아니라 사용자가 얻는 것을 설명하세요.',
182
+ '<strong>완전한 제목을 테스트하세요:</strong> 게시하기 전에 시뮬레이터에 붙여넣고 바를 관찰하세요.',
183
+ '<strong>약한 단어를 제거하세요:</strong> 바가 빨간색으로 바뀌면, 가치 있는 용어를 자르기 전에 채우기 단어를 제거하세요.',
184
+ '<strong>말줄임표를 확인하세요:</strong> 잘린 미리보기가 의미를 잃으면, 자르기를 수용하는 대신 제목을 다시 작성하세요.',
185
+ '<strong>설명에 대해 반복하세요:</strong> 첫 문장이 가치 제안을 자체적으로 전달하는지 확인하세요.',
186
+ ],
187
+ },
188
+ {
189
+ type: 'diagnostic',
190
+ variant: 'info',
191
+ title: '바가 빨간색으로 바뀔 때',
192
+ html: '빨간색 바는 패널티 경고가 아닙니다. 현재 텍스트가 선택한 시각적 목표보다 넓어서 시뮬레이터가 점으로 자르고 있음을 의미합니다. 이것을 편집 신호로 처리하세요: 숨겨진 단어를 버릴 수 있는지, 아니면 스니펫이 더 날카로운 구조가 필요한지 결정하세요.',
193
+ },
194
+ {
195
+ type: 'title',
196
+ text: '제한, 재작성 및 현실적인 기대',
197
+ level: 3,
198
+ },
199
+ {
200
+ type: 'paragraph',
201
+ html: '어떤 시뮬레이터도 Google이 표시할 정확한 스니펫을 보장할 수 없습니다. Google은 제목 링크를 다시 쓰거나, 쿼리 용어를 굵게 표시하거나, 메타 설명 대신 페이지 텍스트를 선택하거나, 다른 검색에 대해 다른 스니펫을 표시할 수 있습니다. 이 도구는 빠른 작성 및 QA 단계로 가장 잘 사용됩니다: 페이지가 프로덕션에 도달하기 전에 명백한 시각적 오버플로를 감지합니다.',
202
+ },
203
+ {
204
+ type: 'summary',
205
+ title: '이 SERP 시뮬레이터의 최적 사용법',
206
+ items: [
207
+ '메타데이터를 게시하기 전에 시각적 오버플로를 감지하기 위해 픽셀 바를 사용하세요.',
208
+ '주요 검색 의도와 클릭 약속을 말줄임표 앞에 계속 표시하세요.',
209
+ 'CORS를 허용하는 URL에서 메타데이터를 가져온 다음 필요에 따라 수동으로 결과를 편집하세요.',
210
+ 'Google이 쿼리별로 스니펫을 다시 작성할 수 있으므로 미리보기를 작성 가이드로 간주하세요.',
211
+ ],
212
+ },
213
+ ],
214
+ };
@@ -0,0 +1,214 @@
1
+ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SerpPixelSimulatorUI } from '../ui';
4
+ import { bibliography } from '../bibliography';
5
+
6
+ const slug = 'serp-pixel-simulator-meten';
7
+ const title = 'SERP Simulator en SEO Pixelteller';
8
+ 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.';
9
+
10
+ const howTo = [
11
+ {
12
+ name: 'Voer de title-tag in',
13
+ text: 'Typ of plak de paginatitel die je wilt testen. De SERP-voorvertoning en pixelmeter worden bij elke toetsaanslag bijgewerkt.',
14
+ },
15
+ {
16
+ name: 'Voeg de zichtbare URL toe',
17
+ text: 'Gebruik een realistische domeinnaam en pad zodat het snippet lijkt op het resultaat dat een zoeker zou scannen.',
18
+ },
19
+ {
20
+ name: 'Schrijf de meta description',
21
+ text: 'Voeg de beschrijvingstekst toe en let op de pixelbalk. Wanneer deze de aanbevolen visuele breedte overschrijdt, wordt de voorvertoning afgekapt met een beletselteken.',
22
+ },
23
+ {
24
+ name: 'Schakel tussen desktop en mobiel',
25
+ text: 'Vergelijk de titelweergave met de kaartbreedte voor desktop of mobiel voordat je metadata publiceert.',
26
+ },
27
+ ];
28
+
29
+ const faq = [
30
+ {
31
+ question: 'Waarom pixels tellen in plaats van tekens voor SEO-titels?',
32
+ 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.',
33
+ },
34
+ {
35
+ question: 'Garandeert dit precies hoe Google mijn snippet zal afkappen?',
36
+ 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.',
37
+ },
38
+ {
39
+ question: 'Welke pixellimieten gebruikt de simulator?',
40
+ 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.',
41
+ },
42
+ {
43
+ question: 'Waarom voegt de voorvertoning een beletselteken toe?',
44
+ 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.',
45
+ },
46
+ ];
47
+
48
+ const ui: SerpPixelSimulatorUI = {
49
+ titleLabel: 'Title-tag',
50
+ titlePlaceholder: 'GameBob | Indie Ontwikkelstudio',
51
+ urlLabel: 'Zichtbare URL',
52
+ urlPlaceholder: 'https://www.gamebob.dev/nl/',
53
+ descriptionLabel: 'Meta description',
54
+ descriptionPlaceholder: 'Ontdek onze collectie tools en games die jouw digitale workflow en entertainment naar een hoger niveau tillen.',
55
+ deviceLabel: 'Voorvertoningsmodus',
56
+ desktopLabel: 'Desktop',
57
+ mobileLabel: 'Mobiel',
58
+ titlePixelsLabel: 'Titelbreedte',
59
+ descriptionPixelsLabel: 'Beschrijvingsbreedte',
60
+ charactersLabel: 'tekens',
61
+ previewLabel: 'Live voorvertoning in Google-stijl',
62
+ tooLongLabel: 'Te breed',
63
+ goodLabel: 'Past',
64
+ emptyTitle: 'Jouw titel verschijnt hier',
65
+ emptyDescription: 'De voorvertoning van jouw meta description verschijnt hier terwijl je typt.',
66
+ defaultTitle: 'GameBob | Indie Ontwikkelstudio',
67
+ defaultUrl: 'https://www.gamebob.dev/nl/',
68
+ defaultDescription: 'Ontdek onze collectie tools en games die jouw digitale workflow en entertainment naar een hoger niveau tillen.',
69
+ fallbackUrl: 'voorbeeld.nl',
70
+ fallbackFaviconText: 'G',
71
+ pixelUnit: 'px',
72
+ ellipsis: '...',
73
+ fetchButtonLabel: 'Ophalen',
74
+ fetchLoadingLabel: 'Ophalen...',
75
+ fetchSuccessLabel: 'Metadata geladen vanaf de URL.',
76
+ 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.',
77
+ fetchInvalidUrlError: 'Voer een geldige URL in voordat je metadata ophaalt.',
78
+ fetchNoMetadataError: 'De pagina is opgehaald, maar er is geen titel of meta description gevonden.',
79
+ fetchGenericError: 'Metadata kon niet worden opgehaald van deze URL. Controleer het adres of vul de velden handmatig in.',
80
+ };
81
+
82
+ const faqSchema: WithContext<FAQPage> = {
83
+ '@context': 'https://schema.org',
84
+ '@type': 'FAQPage',
85
+ mainEntity: faq.map((item) => ({
86
+ '@type': 'Question',
87
+ name: item.question,
88
+ acceptedAnswer: {
89
+ '@type': 'Answer',
90
+ text: item.answer,
91
+ },
92
+ })),
93
+ };
94
+
95
+ const howToSchema: WithContext<HowTo> = {
96
+ '@context': 'https://schema.org',
97
+ '@type': 'HowTo',
98
+ name: title,
99
+ description,
100
+ step: howTo.map((step, index) => ({
101
+ '@type': 'HowToStep',
102
+ position: index + 1,
103
+ name: step.name,
104
+ text: step.text,
105
+ })),
106
+ };
107
+
108
+ const appSchema: WithContext<SoftwareApplication> = {
109
+ '@context': 'https://schema.org',
110
+ '@type': 'SoftwareApplication',
111
+ name: title,
112
+ description,
113
+ applicationCategory: 'BusinessApplication',
114
+ operatingSystem: 'Any',
115
+ offers: {
116
+ '@type': 'Offer',
117
+ price: '0',
118
+ priceCurrency: 'EUR',
119
+ },
120
+ inLanguage: 'nl',
121
+ };
122
+
123
+ export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
124
+ slug,
125
+ title,
126
+ description,
127
+ ui,
128
+ faqTitle: 'Veelgestelde vragen over de SERP-simulator',
129
+ faq,
130
+ bibliographyTitle: 'Documentatie over zoekresultaten',
131
+ bibliography,
132
+ howTo,
133
+ schemas: [appSchema, faqSchema, howToSchema],
134
+ seo: [
135
+ {
136
+ type: 'title',
137
+ text: 'Stop met gissen hoe je Google-resultaat eruit zal zien',
138
+ level: 2,
139
+ },
140
+ {
141
+ type: 'paragraph',
142
+ 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.',
143
+ },
144
+ {
145
+ type: 'tip',
146
+ title: 'De regel die echt helpt',
147
+ 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.',
148
+ },
149
+ {
150
+ type: 'title',
151
+ text: 'Wat de pixelteller meet',
152
+ level: 3,
153
+ },
154
+ {
155
+ type: 'table',
156
+ headers: ['Element', 'Wat telt', 'Hoe gebruik je het resultaat'],
157
+ rows: [
158
+ ['Title-tag', 'Gerenderde breedte in pixels, niet het ruwe aantal tekens', 'Houd het primaire keyword en de klikbelofte zichtbaar vóór het afkappen.'],
159
+ ['Zichtbare URL', 'Visueel vertrouwen en duidelijkheid van het onderwerp', 'Gebruik een leesbaar pad dat aangeeft waar het resultaat naartoe leidt.'],
160
+ ['Meta description', 'Een breder snippetgebied met zoekopdrachtafhankelijk gedrag', 'Zet het voordeel vooraan, want Google kan het inkorten of herschrijven.'],
161
+ ['Apparaatmodus', 'Desktop- en mobiele kaarten kunnen anders aanvoelen', 'Controleer beide voordat je metadata voor belangrijke pagina\'s publiceert.'],
162
+ ],
163
+ },
164
+ {
165
+ type: 'title',
166
+ text: 'Waarom tekenlimieten een slechte SEO-gewoonte zijn',
167
+ level: 3,
168
+ },
169
+ {
170
+ type: 'paragraph',
171
+ 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.',
172
+ },
173
+ {
174
+ type: 'title',
175
+ text: 'Een praktische workflow voor betere snippets',
176
+ level: 3,
177
+ },
178
+ {
179
+ type: 'list',
180
+ items: [
181
+ '<strong>Begin met de intentie:</strong> beschrijf wat de gebruiker krijgt, niet alleen hoe de pagina heet.',
182
+ '<strong>Test de volledige titel:</strong> plak hem in de simulator en let op de balk voordat je publiceert.',
183
+ '<strong>Verwijder zwakke woorden:</strong> als de balk rood wordt, verwijder dan opvulling voordat je waardevolle termen wegsnijdt.',
184
+ '<strong>Controleer het beletselteken:</strong> als de afgekapte voorvertoning zijn betekenis verliest, herschrijf dan de titel in plaats van de afkapping te accepteren.',
185
+ '<strong>Herhaal voor de beschrijving:</strong> zorg ervoor dat de eerste zin de waardepropositie op zichzelf draagt.',
186
+ ],
187
+ },
188
+ {
189
+ type: 'diagnostic',
190
+ variant: 'info',
191
+ title: 'Als de balk rood wordt',
192
+ 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.',
193
+ },
194
+ {
195
+ type: 'title',
196
+ text: 'Beperkingen, herschrijvingen en realistische verwachtingen',
197
+ level: 3,
198
+ },
199
+ {
200
+ type: 'paragraph',
201
+ 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.',
202
+ },
203
+ {
204
+ type: 'summary',
205
+ title: 'Beste gebruik van deze SERP simulator',
206
+ items: [
207
+ 'Gebruik de pixelbalk om visuele overloop te detecteren voordat je metadata publiceert.',
208
+ 'Houd de belangrijkste zoekintentie en klikbelofte zichtbaar vóór elk beletselteken.',
209
+ 'Haal metadata op van URL\'s die CORS toestaan en bewerk het resultaat handmatig indien nodig.',
210
+ 'Beschouw de voorvertoning als een schrijfhulpmiddel, want Google kan snippets nog steeds herschrijven per zoekopdracht.',
211
+ ],
212
+ },
213
+ ],
214
+ };
@@ -0,0 +1,214 @@
1
+ import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SerpPixelSimulatorUI } from '../ui';
4
+ import { bibliography } from '../bibliography';
5
+
6
+ const slug = 'symulator-serp-licznik-pikseli';
7
+ const title = 'Symulator SERP i Licznik Pikseli SEO';
8
+ const description = 'Podglądaj fragmenty wyników wyszukiwania w stylu Google w czasie rzeczywistym, mierz szerokość tytułu i meta opisu w pikselach i zobacz dokładnie, gdzie twój tekst zostanie przycięty.';
9
+
10
+ const howTo = [
11
+ {
12
+ name: 'Wprowadź znacznik title',
13
+ text: 'Wpisz lub wklej tytuł strony, który chcesz przetestować. Podgląd SERP i miernik pikseli aktualizują się przy każdym naciśnięciu klawisza.',
14
+ },
15
+ {
16
+ name: 'Dodaj widoczny adres URL',
17
+ text: 'Użyj realistycznej domeny i ścieżki, aby fragment przypominał wynik, który przeskanowałby użytkownik.',
18
+ },
19
+ {
20
+ name: 'Wpisz meta opis',
21
+ text: 'Dodaj tekst opisu i obserwuj pasek pikseli. Gdy przekroczy zalecaną szerokość wizualną, podgląd przycina go wielokropkiem.',
22
+ },
23
+ {
24
+ name: 'Przełącz między pulpitem a urządzeniem mobilnym',
25
+ text: 'Porównaj renderowanie tytułu z szerokością karty na pulpicie lub urządzeniu mobilnym przed opublikowaniem metadanych.',
26
+ },
27
+ ];
28
+
29
+ const faq = [
30
+ {
31
+ question: 'Dlaczego liczyć piksele zamiast znaków dla tytułów SEO?',
32
+ answer: 'Karty wyników Google są ograniczone szerokością wizualną. Tytuł z wieloma wąskimi literami może pomieścić więcej znaków niż tytuł z szerokimi literami, wielkimi literami lub grubo wyglądającymi glifami. Pomiar w pikselach daje dokładniejszy podgląd widocznego wyniku.',
33
+ },
34
+ {
35
+ question: 'Czy to gwarantuje dokładnie, jak Google przytnie mój fragment?',
36
+ answer: 'Nie. Google może przepisywać linki tytułowe i fragmenty, a renderowanie może się różnić w zależności od zapytania, urządzenia, języka i eksperymentów. Narzędzie jest pomyślane jako praktyczna wizualna wskazówka do pisania metadanych, które rzadziej zostaną przycięte.',
37
+ },
38
+ {
39
+ question: 'Jakie limity pikseli stosuje symulator?',
40
+ answer: 'Domyślny limit tytułu na pulpicie wynosi 580 px, na urządzeniu mobilnym 600 px, a limit meta opisu to 920 px. Są to cele redakcyjne, a nie oficjalne limity Google.',
41
+ },
42
+ {
43
+ question: 'Dlaczego podgląd dodaje wielokropek?',
44
+ answer: 'Gdy zmierzony tekst przekracza dostępną szerokość w pikselach, symulator przycina ciąg przy ostatnim pasującym znaku i dodaje trzy kropki, naśladując praktyczne zachowanie potrzebne zespołom SEO do wykrywania utraty znaczenia.',
45
+ },
46
+ ];
47
+
48
+ const ui: SerpPixelSimulatorUI = {
49
+ titleLabel: 'Znacznik title',
50
+ titlePlaceholder: 'GameBob | Niezależne Studio Deweloperskie',
51
+ urlLabel: 'Widoczny URL',
52
+ urlPlaceholder: 'https://www.gamebob.dev/pl/',
53
+ descriptionLabel: 'Meta opis',
54
+ descriptionPlaceholder: 'Odkryj naszą kolekcję narzędzi i gier zaprojektowanych, aby ulepszyć twój cyfrowy przepływ pracy i rozrywkę.',
55
+ deviceLabel: 'Tryb podglądu',
56
+ desktopLabel: 'Pulpit',
57
+ mobileLabel: 'Mobilny',
58
+ titlePixelsLabel: 'Szerokość tytułu',
59
+ descriptionPixelsLabel: 'Szerokość opisu',
60
+ charactersLabel: 'znaków',
61
+ previewLabel: 'Podgląd na żywo w stylu Google',
62
+ tooLongLabel: 'Za szeroki',
63
+ goodLabel: 'Pasuje',
64
+ emptyTitle: 'Twój tytuł pojawi się tutaj',
65
+ emptyDescription: 'Podgląd twojego meta opisu pojawi się tutaj podczas pisania.',
66
+ defaultTitle: 'GameBob | Niezależne Studio Deweloperskie',
67
+ defaultUrl: 'https://www.gamebob.dev/pl/',
68
+ defaultDescription: 'Odkryj naszą kolekcję narzędzi i gier zaprojektowanych, aby ulepszyć twój cyfrowy przepływ pracy i rozrywkę.',
69
+ fallbackUrl: 'przyklad.pl',
70
+ fallbackFaviconText: 'G',
71
+ pixelUnit: 'px',
72
+ ellipsis: '...',
73
+ fetchButtonLabel: 'Pobierz',
74
+ fetchLoadingLabel: 'Pobieranie...',
75
+ fetchSuccessLabel: 'Metadane załadowane z adresu URL.',
76
+ fetchCorsError: 'Przeglądarka nie mogła odczytać tej strony. Może być zablokowana przez CORS, przekierowanie, mieszaną zawartość lub regułę sieciową. Nadal możesz wkleić lub edytować metadane ręcznie.',
77
+ fetchInvalidUrlError: 'Wprowadź prawidłowy adres URL przed pobraniem metadanych.',
78
+ fetchNoMetadataError: 'Strona została pobrana, ale nie znaleziono tytułu ani meta opisu.',
79
+ fetchGenericError: 'Nie można pobrać metadanych z tego adresu URL. Sprawdź adres lub wypełnij pola ręcznie.',
80
+ };
81
+
82
+ const faqSchema: WithContext<FAQPage> = {
83
+ '@context': 'https://schema.org',
84
+ '@type': 'FAQPage',
85
+ mainEntity: faq.map((item) => ({
86
+ '@type': 'Question',
87
+ name: item.question,
88
+ acceptedAnswer: {
89
+ '@type': 'Answer',
90
+ text: item.answer,
91
+ },
92
+ })),
93
+ };
94
+
95
+ const howToSchema: WithContext<HowTo> = {
96
+ '@context': 'https://schema.org',
97
+ '@type': 'HowTo',
98
+ name: title,
99
+ description,
100
+ step: howTo.map((step, index) => ({
101
+ '@type': 'HowToStep',
102
+ position: index + 1,
103
+ name: step.name,
104
+ text: step.text,
105
+ })),
106
+ };
107
+
108
+ const appSchema: WithContext<SoftwareApplication> = {
109
+ '@context': 'https://schema.org',
110
+ '@type': 'SoftwareApplication',
111
+ name: title,
112
+ description,
113
+ applicationCategory: 'BusinessApplication',
114
+ operatingSystem: 'Any',
115
+ offers: {
116
+ '@type': 'Offer',
117
+ price: '0',
118
+ priceCurrency: 'EUR',
119
+ },
120
+ inLanguage: 'pl',
121
+ };
122
+
123
+ export const content: ToolLocaleContent<SerpPixelSimulatorUI> = {
124
+ slug,
125
+ title,
126
+ description,
127
+ ui,
128
+ faqTitle: 'Najczęściej zadawane pytania o symulator SERP',
129
+ faq,
130
+ bibliographyTitle: 'Dokumentacja dotycząca wyników wyszukiwania',
131
+ bibliography,
132
+ howTo,
133
+ schemas: [appSchema, faqSchema, howToSchema],
134
+ seo: [
135
+ {
136
+ type: 'title',
137
+ text: 'Przestań zgadywać, jak będzie wyglądać twój wynik w Google',
138
+ level: 2,
139
+ },
140
+ {
141
+ type: 'paragraph',
142
+ html: 'Znacznik title może wyglądać idealnie w arkuszu kalkulacyjnym, a mimo to zawieść w wyniku wyszukiwania. Google nie rezerwuje miejsca według liczby znaków; renderuje tekst wewnątrz karty wizualnej. Oznacza to, że <strong>GameBob | Niezależne Studio Deweloperskie</strong> i inny tytuł o tej samej liczbie znaków mogą zajmować bardzo różne szerokości w zależności od liter, wielkości znaków, interpunkcji i odstępów.',
143
+ },
144
+ {
145
+ type: 'tip',
146
+ title: 'Zasada, która naprawdę pomaga',
147
+ html: 'Napisz fragment tak, aby ważna obietnica przetrwała wielokropek. Umieść typ strony, intencję wyszukiwania i najsilniejszy powód do kliknięcia przed limitem pikseli. Nazwy marek są przydatne, ale nie powinny wypychać głównej korzyści poza widok.',
148
+ },
149
+ {
150
+ type: 'title',
151
+ text: 'Co mierzy licznik pikseli',
152
+ level: 3,
153
+ },
154
+ {
155
+ type: 'table',
156
+ headers: ['Element', 'Co ma znaczenie', 'Jak użyć wyniku'],
157
+ rows: [
158
+ ['Znacznik title', 'Szerokość renderowana w pikselach, nie surowa liczba znaków', 'Utrzymuj główne słowo kluczowe i obietnicę kliknięcia widoczne przed przycięciem.'],
159
+ ['Widoczny URL', 'Zaufanie wizualne i jasność tematu', 'Użyj czytelnej ścieżki, która wzmacnia, dokąd prowadzi wynik.'],
160
+ ['Meta opis', 'Szerszy obszar fragmentu z zachowaniem zależnym od zapytania', 'Umieść korzyść na początku, ponieważ Google może go skrócić lub przepisać.'],
161
+ ['Tryb urządzenia', 'Karty na pulpicie i urządzeniach mobilnych mogą wyglądać inaczej', 'Sprawdź oba przed opublikowaniem metadanych dla ważnych stron.'],
162
+ ],
163
+ },
164
+ {
165
+ type: 'title',
166
+ text: 'Dlaczego limity znaków to słaby nawyk SEO',
167
+ level: 3,
168
+ },
169
+ {
170
+ type: 'paragraph',
171
+ html: 'Tradycyjna porada, taka jak "utrzymuj tytuły poniżej 60 znaków", jest wygodna, ale ukrywa prawdziwy problem. Szerokie litery, takie jak W i M, wielkie litery, separatory, cyfry i długie nazwy marek zajmują różną przestrzeń. Pomiar w pikselach natychmiast uwidacznia kompromis: możesz zobaczyć, czy fraza zasługuje na swoje miejsce, czy kradnie przestrzeń silniejszemu przekazowi.',
172
+ },
173
+ {
174
+ type: 'title',
175
+ text: 'Praktyczny przepływ pracy dla lepszych fragmentów',
176
+ level: 3,
177
+ },
178
+ {
179
+ type: 'list',
180
+ items: [
181
+ '<strong>Zacznij od intencji:</strong> opisz, co otrzymuje użytkownik, a nie tylko jak nazywa się strona.',
182
+ '<strong>Przetestuj pełny tytuł:</strong> wklej go do symulatora i obserwuj pasek przed publikacją.',
183
+ '<strong>Usuń słabe słowa:</strong> jeśli pasek zmieni kolor na czerwony, usuń wypełniacze przed obcięciem wartościowych terminów.',
184
+ '<strong>Sprawdź wielokropek:</strong> jeśli przycięty podgląd traci znaczenie, przepisz tytuł zamiast akceptować cięcie.',
185
+ '<strong>Powtórz dla opisu:</strong> upewnij się, że pierwsze zdanie samodzielnie niesie propozycję wartości.',
186
+ ],
187
+ },
188
+ {
189
+ type: 'diagnostic',
190
+ variant: 'info',
191
+ title: 'Gdy pasek zmienia kolor na czerwony',
192
+ html: 'Czerwony pasek nie jest ostrzeżeniem o karze. Oznacza, że bieżący tekst jest szerszy niż wybrany cel wizualny, więc symulator przycina go kropkami. Potraktuj to jako sygnał redakcyjny: zdecyduj, czy ukryte słowa są zbędne, czy fragment potrzebuje ostrzejszej struktury.',
193
+ },
194
+ {
195
+ type: 'title',
196
+ text: 'Ograniczenia, przepisywanie i realistyczne oczekiwania',
197
+ level: 3,
198
+ },
199
+ {
200
+ type: 'paragraph',
201
+ html: 'Żaden symulator nie może zagwarantować dokładnego fragmentu, który pokaże Google. Google może przepisywać linki tytułowe, pogrubiać terminy zapytania, wybierać tekst strony zamiast meta opisu lub wyświetlać różne fragmenty dla różnych wyszukiwań. To narzędzie najlepiej sprawdza się jako szybki etap redakcyjny i kontroli jakości: wykrywa oczywiste przepełnienia wizualne, zanim strona trafi do produkcji.',
202
+ },
203
+ {
204
+ type: 'summary',
205
+ title: 'Najlepsze wykorzystanie tego symulatora SERP',
206
+ items: [
207
+ 'Użyj paska pikseli, aby wykryć przepełnienia wizualne przed opublikowaniem metadanych.',
208
+ 'Utrzymuj główną intencję wyszukiwania i obietnicę kliknięcia widoczne przed jakimkolwiek wielokropkiem.',
209
+ 'Pobieraj metadane z adresów URL, które zezwalają na CORS, a następnie edytuj wynik ręcznie w razie potrzeby.',
210
+ 'Traktuj podgląd jako wskazówkę redakcyjną, ponieważ Google wciąż może przepisywać fragmenty w zależności od zapytania.',
211
+ ],
212
+ },
213
+ ],
214
+ };