@jjlmoya/utils-social 1.1.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.
- package/package.json +60 -0
- package/src/category/i18n/en.ts +23 -0
- package/src/category/i18n/es.ts +23 -0
- package/src/category/i18n/fr.ts +23 -0
- package/src/category/index.ts +13 -0
- package/src/category/seo.astro +15 -0
- package/src/components/PreviewNavSidebar.astro +116 -0
- package/src/components/PreviewToolbar.astro +143 -0
- package/src/data.ts +11 -0
- package/src/env.d.ts +5 -0
- package/src/index.ts +27 -0
- package/src/layouts/PreviewLayout.astro +117 -0
- package/src/pages/[locale]/[slug].astro +146 -0
- package/src/pages/[locale].astro +251 -0
- package/src/pages/index.astro +4 -0
- package/src/tests/faq_count.test.ts +19 -0
- package/src/tests/locale_completeness.test.ts +42 -0
- package/src/tests/mocks/astro_mock.js +2 -0
- package/src/tests/no_h1_in_components.test.ts +48 -0
- package/src/tests/seo_length.test.ts +22 -0
- package/src/tests/tool_validation.test.ts +17 -0
- package/src/tool/redditFormatter/bibliography.astro +14 -0
- package/src/tool/redditFormatter/component.astro +246 -0
- package/src/tool/redditFormatter/i18n/en.ts +193 -0
- package/src/tool/redditFormatter/i18n/es.ts +193 -0
- package/src/tool/redditFormatter/i18n/fr.ts +193 -0
- package/src/tool/redditFormatter/index.ts +34 -0
- package/src/tool/redditFormatter/logic.ts +24 -0
- package/src/tool/redditFormatter/seo.astro +14 -0
- package/src/tool/redditFormatter/ui.ts +13 -0
- package/src/tool/safeZones/bibliography.astro +14 -0
- package/src/tool/safeZones/component.astro +857 -0
- package/src/tool/safeZones/i18n/en.ts +244 -0
- package/src/tool/safeZones/i18n/es.ts +244 -0
- package/src/tool/safeZones/i18n/fr.ts +244 -0
- package/src/tool/safeZones/index.ts +34 -0
- package/src/tool/safeZones/logic.ts +137 -0
- package/src/tool/safeZones/seo.astro +14 -0
- package/src/tool/safeZones/ui.ts +34 -0
- package/src/tool/socialImageResizer/bibliography.astro +14 -0
- package/src/tool/socialImageResizer/component.astro +498 -0
- package/src/tool/socialImageResizer/i18n/en.ts +211 -0
- package/src/tool/socialImageResizer/i18n/es.ts +211 -0
- package/src/tool/socialImageResizer/i18n/fr.ts +211 -0
- package/src/tool/socialImageResizer/index.ts +34 -0
- package/src/tool/socialImageResizer/logic.ts +133 -0
- package/src/tool/socialImageResizer/seo.astro +14 -0
- package/src/tool/socialImageResizer/ui.ts +7 -0
- package/src/tool/socialValueCalculator/bibliography.astro +14 -0
- package/src/tool/socialValueCalculator/component.astro +829 -0
- package/src/tool/socialValueCalculator/i18n/en.ts +310 -0
- package/src/tool/socialValueCalculator/i18n/es.ts +310 -0
- package/src/tool/socialValueCalculator/i18n/fr.ts +310 -0
- package/src/tool/socialValueCalculator/index.ts +34 -0
- package/src/tool/socialValueCalculator/logic.ts +60 -0
- package/src/tool/socialValueCalculator/seo.astro +14 -0
- package/src/tool/socialValueCalculator/ui.ts +31 -0
- package/src/tool/tinderPhotoOptimizer/bibliography.astro +14 -0
- package/src/tool/tinderPhotoOptimizer/component.astro +1514 -0
- package/src/tool/tinderPhotoOptimizer/i18n/en.ts +248 -0
- package/src/tool/tinderPhotoOptimizer/i18n/es.ts +248 -0
- package/src/tool/tinderPhotoOptimizer/i18n/fr.ts +248 -0
- package/src/tool/tinderPhotoOptimizer/index.ts +34 -0
- package/src/tool/tinderPhotoOptimizer/logic.ts +199 -0
- package/src/tool/tinderPhotoOptimizer/seo.astro +14 -0
- package/src/tool/tinderPhotoOptimizer/ui.ts +37 -0
- package/src/tool/youtubeThumbnail/bibliography.astro +14 -0
- package/src/tool/youtubeThumbnail/component.astro +419 -0
- package/src/tool/youtubeThumbnail/i18n/en.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/es.ts +207 -0
- package/src/tool/youtubeThumbnail/i18n/fr.ts +207 -0
- package/src/tool/youtubeThumbnail/index.ts +34 -0
- package/src/tool/youtubeThumbnail/logic.ts +7 -0
- package/src/tool/youtubeThumbnail/seo.astro +14 -0
- package/src/tool/youtubeThumbnail/ui.ts +13 -0
- package/src/tool/youtubeThumbnailPreviewer/bibliography.astro +14 -0
- package/src/tool/youtubeThumbnailPreviewer/component.astro +791 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/en.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/es.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/i18n/fr.ts +321 -0
- package/src/tool/youtubeThumbnailPreviewer/index.ts +34 -0
- package/src/tool/youtubeThumbnailPreviewer/seo.astro +14 -0
- package/src/tool/youtubeThumbnailPreviewer/ui.ts +19 -0
- package/src/tools.ts +10 -0
- package/src/types.ts +72 -0
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
3
|
+
import type { YoutubeThumbnailPreviewerUI } from '../ui';
|
|
4
|
+
|
|
5
|
+
const slug = 'youtube-thumbnail-previewer';
|
|
6
|
+
const title = 'YouTube Thumbnail Previewer Online - Boost Your CTR for Free';
|
|
7
|
+
const description =
|
|
8
|
+
'Upload your thumbnail and see how it looks in the real YouTube feed on mobile and desktop. Dark and light mode simulator to optimize clicks instantly.';
|
|
9
|
+
|
|
10
|
+
const faqData = [
|
|
11
|
+
{
|
|
12
|
+
question: 'Why is it important to test YouTube thumbnails?',
|
|
13
|
+
answer:
|
|
14
|
+
'Most users watch YouTube on mobile devices. A thumbnail that looks great on your monitor can be unreadable on a small screen. Testing it in a simulator ensures the text is clear and the main subject stands out at any size.',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
question: 'Do I need to sign up to use this Previewer?',
|
|
18
|
+
answer:
|
|
19
|
+
'No. Our tool is 100% free and works directly in your browser. You do not need to create an account or provide your email to optimize your thumbnails.',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
question: 'Are my designs uploaded to your server?',
|
|
23
|
+
answer:
|
|
24
|
+
'Absolutely not. Privacy is our top priority. When you select a file, it is loaded locally in your browser memory via a temporary URL. No one except you can see the design you are testing.',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: 'How does this tool help improve my CTR?',
|
|
28
|
+
answer:
|
|
29
|
+
'CTR (Click-Through Rate) is the percentage of people who click when they see your thumbnail. By simulating the real environment (dark vs light background, mobile vs desktop), you can fix contrast and composition issues before publishing, increasing your clicks.',
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
question: "Does it work with YouTube's official Dark Mode?",
|
|
33
|
+
answer:
|
|
34
|
+
'Yes. We have included a theme selector (Light and Dark) that exactly mimics the hex colors used by the official YouTube app in both modes.',
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
const howToData = [
|
|
39
|
+
{
|
|
40
|
+
name: 'Upload your design',
|
|
41
|
+
text: 'Click the upload area or drag your image file (PNG, JPG or WebP) directly into the tool.',
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: 'Set the context',
|
|
45
|
+
text: 'Type your video title and channel name so the simulation is as realistic as possible against the real feed.',
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'Switch device',
|
|
49
|
+
text: "Toggle between 'Desktop' and 'Mobile' view to verify readability on screens of different sizes.",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: 'Test the contrast',
|
|
53
|
+
text: "Activate the 'Dark' theme to check if the colors stand out correctly against the black YouTube background.",
|
|
54
|
+
},
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
58
|
+
'@context': 'https://schema.org',
|
|
59
|
+
'@type': 'FAQPage',
|
|
60
|
+
mainEntity: faqData.map((item) => ({
|
|
61
|
+
'@type': 'Question',
|
|
62
|
+
name: item.question,
|
|
63
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
64
|
+
})),
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const howToSchema: WithContext<HowToThing> = {
|
|
68
|
+
'@context': 'https://schema.org',
|
|
69
|
+
'@type': 'HowTo',
|
|
70
|
+
name: title,
|
|
71
|
+
description,
|
|
72
|
+
step: howToData.map((step, i) => ({
|
|
73
|
+
'@type': 'HowToStep',
|
|
74
|
+
position: i + 1,
|
|
75
|
+
name: step.name,
|
|
76
|
+
text: step.text,
|
|
77
|
+
})),
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
81
|
+
'@context': 'https://schema.org',
|
|
82
|
+
'@type': 'SoftwareApplication',
|
|
83
|
+
name: title,
|
|
84
|
+
description,
|
|
85
|
+
applicationCategory: 'UtilityApplication',
|
|
86
|
+
operatingSystem: 'All',
|
|
87
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
|
|
88
|
+
inLanguage: 'en',
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export const content: ToolLocaleContent<YoutubeThumbnailPreviewerUI> = {
|
|
92
|
+
slug,
|
|
93
|
+
title,
|
|
94
|
+
description,
|
|
95
|
+
faqTitle: 'Frequently Asked Questions',
|
|
96
|
+
faq: faqData,
|
|
97
|
+
bibliographyTitle: 'References',
|
|
98
|
+
bibliography: [
|
|
99
|
+
{
|
|
100
|
+
name: 'YouTube Help: Create custom video thumbnails',
|
|
101
|
+
url: 'https://support.google.com/youtube/answer/141805',
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: 'Nielsen Norman Group: Visual Processing and UX Design',
|
|
105
|
+
url: 'https://www.nngroup.com/articles/visual-processing/',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
name: 'Derral Eves: The YouTube Formula (Thumbnail Strategy)',
|
|
109
|
+
url: 'https://derraleves.com/the-youtube-formula/',
|
|
110
|
+
},
|
|
111
|
+
],
|
|
112
|
+
howTo: howToData,
|
|
113
|
+
schemas: [faqSchema, howToSchema, appSchema],
|
|
114
|
+
seo: [
|
|
115
|
+
{
|
|
116
|
+
type: 'title',
|
|
117
|
+
text: 'YouTube Thumbnail Previewer: Master Your Channel CTR',
|
|
118
|
+
level: 2,
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
type: 'paragraph',
|
|
122
|
+
html: "In the YouTube ecosystem, the thumbnail is the gateway to your content. You could have the best video in the world — Hollywood-level editing, an Oscar-worthy script — but if no one clicks, your work will be invisible to the algorithm. This is where <strong>CTR (Click-Through Rate)</strong> comes in, and the thumbnail is the determining factor.",
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
type: 'title',
|
|
126
|
+
text: 'Why You Need to Test Thumbnails Before Uploading',
|
|
127
|
+
level: 3,
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
type: 'list',
|
|
131
|
+
items: [
|
|
132
|
+
'<strong>Real Preview:</strong> See your thumbnail exactly as it will appear in the YouTube feed.',
|
|
133
|
+
'<strong>Dark and Light Mode:</strong> Ensure colors pop under any user configuration.',
|
|
134
|
+
'<strong>Device Simulator:</strong> Check text readability on both monitors and small mobile screens.',
|
|
135
|
+
'<strong>CTR Optimization:</strong> Compare your design against the native interface to maximize clicks.',
|
|
136
|
+
'<strong>No Sign-up Required:</strong> Upload your image and test it instantly without creating accounts.',
|
|
137
|
+
'<strong>Privacy Guaranteed:</strong> Your designs are processed locally and never uploaded to servers.',
|
|
138
|
+
],
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
type: 'paragraph',
|
|
142
|
+
html: 'Many creators make the mistake of designing thumbnails on large monitors, viewing them full screen in their favorite editors. The problem is that the end user rarely sees them that way. Most consume content on a mobile device while doing infinite scroll, or in a corner of the monitor in dark mode. Our <strong>YouTube Thumbnail Previewer</strong> lets you break that "designer illusion" and see the surgical reality of the feed.',
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
type: 'title',
|
|
146
|
+
text: 'Technical Metrics and Performance',
|
|
147
|
+
level: 3,
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
type: 'grid',
|
|
151
|
+
columns: [
|
|
152
|
+
{ title: '0.2s', body: 'Response Time' },
|
|
153
|
+
{ title: '4K', body: 'Maximum Resolution' },
|
|
154
|
+
{ title: '100%', body: 'Local Privacy' },
|
|
155
|
+
{ title: 'HD', body: 'Native Quality' },
|
|
156
|
+
],
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
type: 'title',
|
|
160
|
+
text: 'The Psychology of the Click: Why Thumbnails Fail',
|
|
161
|
+
level: 3,
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
type: 'paragraph',
|
|
165
|
+
html: 'The human brain processes images thousands of times faster than text. Yet on YouTube, the competition is brutal. Your thumbnail must not only be "pretty" — it must be <strong>readable</strong> and have <strong>contrast</strong>.',
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
type: 'paragraph',
|
|
169
|
+
html: 'A common mistake is using colors that blend with the YouTube background. If you use dark greys and your viewer is in dark mode, your video will simply disappear from their peripheral vision. Using this tester, you can switch between themes and make sure your design "pops" in any scenario.',
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
type: 'title',
|
|
173
|
+
text: 'Head-to-Head Comparison: Design vs. Reality',
|
|
174
|
+
level: 3,
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
type: 'paragraph',
|
|
178
|
+
html: 'Is it worth spending 30 seconds testing the thumbnail? The answer is a resounding YES. An optimized thumbnail can double your views in the first 24 hours, signaling to YouTube AI that your content has "hook".',
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
type: 'grid',
|
|
182
|
+
columns: [
|
|
183
|
+
{
|
|
184
|
+
title: 'Designing in Photoshop / Canva',
|
|
185
|
+
body: 'False sense of real size · Ignores contrast with the app background · Text looks readable but may not be · You miss UI elements (duration badge, avatars)',
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
title: 'YouTube Thumbnail Previewer',
|
|
189
|
+
body: 'Real view in the Home feed · Contrast verified in Dark vs Light Mode · Text readability guaranteed on mobile · Title and channel name simulation',
|
|
190
|
+
},
|
|
191
|
+
],
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
type: 'title',
|
|
195
|
+
text: 'Checklist for a Thumbnail with CTR Above 10%',
|
|
196
|
+
level: 3,
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
type: 'paragraph',
|
|
200
|
+
html: 'Before exporting your final design, make sure to go through this checklist using our professional simulator:',
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
type: 'list',
|
|
204
|
+
items: [
|
|
205
|
+
'Is the text readable on a small mobile screen?',
|
|
206
|
+
'Is there enough contrast between the background and the main subject?',
|
|
207
|
+
'Does the thumbnail look good against the black background of Dark Mode?',
|
|
208
|
+
'Does the video title cover vital information in the image?',
|
|
209
|
+
'Does the video duration badge (the black box) hide anything important?',
|
|
210
|
+
'Does the face or main object convey the desired emotion at reduced size?',
|
|
211
|
+
],
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
type: 'title',
|
|
215
|
+
text: 'Anatomy of a High-Impact Thumbnail',
|
|
216
|
+
level: 3,
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
type: 'paragraph',
|
|
220
|
+
html: 'Based on analysis of the biggest channels in the world, a winning thumbnail usually follows this structural pattern:',
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
type: 'grid',
|
|
224
|
+
columns: [
|
|
225
|
+
{
|
|
226
|
+
title: 'Main Subject',
|
|
227
|
+
body: 'Primary focus · Use sharp cutouts with a slight border or extra saturation.',
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
title: 'Text (Max 3 words)',
|
|
231
|
+
body: 'Instant context · Use bold Sans Serif fonts and complementary colors.',
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
title: 'Blurred Background',
|
|
235
|
+
body: 'Plane separation · Adds depth so the main subject "jumps" off the screen.',
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
title: 'Duration Space',
|
|
239
|
+
body: 'Avoid mistakes · Do not place faces or text in the bottom-right corner.',
|
|
240
|
+
},
|
|
241
|
+
],
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
type: 'tip',
|
|
245
|
+
title: 'The Dead Zone Trick',
|
|
246
|
+
html: '<p>YouTube always places a black box with the video duration in the bottom-right corner of the thumbnail. Thousands of creators put vital elements in that zone, only to find out the App covers them. Our tool simulates this box so you never cover your best shot.</p>',
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
type: 'title',
|
|
250
|
+
text: 'Advantages and Limitations of the Tool',
|
|
251
|
+
level: 3,
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
type: 'grid',
|
|
255
|
+
columns: [
|
|
256
|
+
{
|
|
257
|
+
title: 'Ultra fast and reactive interface',
|
|
258
|
+
body: 'Limitation: Does not allow image editing (use Canva/PS)',
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
title: 'Exact App and Web mockups',
|
|
262
|
+
body: 'Limitation: Does not simulate Pre-roll ads',
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
title: 'Free and without intrusive ads',
|
|
266
|
+
body: 'Limitation: Only supports local files',
|
|
267
|
+
},
|
|
268
|
+
],
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
type: 'title',
|
|
272
|
+
text: "Using the 'Split' Mode (Direct Comparison)",
|
|
273
|
+
level: 3,
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
type: 'paragraph',
|
|
277
|
+
html: 'This is the star feature. By activating Split mode, you will see your thumbnail through the lens of Light Mode and Dark Mode simultaneously. It is the definitive way to check whether your color palette is universal or needs brightness and contrast adjustments.',
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
type: 'title',
|
|
281
|
+
text: 'Privacy: Your Designs Are Not Uploaded to the Cloud',
|
|
282
|
+
level: 3,
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
type: 'paragraph',
|
|
286
|
+
html: 'We know your thumbnails are part of your secret strategy before a launch. That is why we designed this utility to work exclusively in your browser engine. <strong>Nothing is uploaded to the internet</strong>. The file you select is loaded via a local temporary URL that disappears when you close the tab. Your intellectual property is 100% under your control.',
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
type: 'title',
|
|
290
|
+
text: 'Conclusion: The Perfect Pixel Guaranteed',
|
|
291
|
+
level: 3,
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
type: 'paragraph',
|
|
295
|
+
html: "Stop guessing and start validating. JJLMoya's <strong>YouTube Thumbnail Previewer</strong> is the free tool that separates amateur creators from professional content makers. A small adjustment in font size or subject position can be the difference between a video that goes unnoticed and a viral success.",
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
type: 'paragraph',
|
|
299
|
+
html: 'Start optimizing your channel now and give your videos the click-through rate they deserve!',
|
|
300
|
+
},
|
|
301
|
+
],
|
|
302
|
+
ui: {
|
|
303
|
+
dropFeedTitle: 'Drop Your Thumbnail',
|
|
304
|
+
dropFeedSub: 'PNG, JPG or WebP · Multiple images',
|
|
305
|
+
dropAvatarTitle: 'Drop Your Avatar',
|
|
306
|
+
dropAvatarSub: 'Channel profile picture',
|
|
307
|
+
labelTitle: 'Video title',
|
|
308
|
+
labelChannel: 'Channel name',
|
|
309
|
+
defaultTitle: 'Your Video Title Here',
|
|
310
|
+
defaultChannel: 'Channel Name',
|
|
311
|
+
btnDesktop: 'Desktop',
|
|
312
|
+
btnMobile: 'Mobile',
|
|
313
|
+
btnClear: 'Clear',
|
|
314
|
+
labelLight: 'Light',
|
|
315
|
+
labelDark: 'Dark',
|
|
316
|
+
views0: '1.2M views · 1 hour ago',
|
|
317
|
+
views1: '45 minutes ago',
|
|
318
|
+
views2: '250K views · 1 day ago',
|
|
319
|
+
views3: '3.1M views · 1 week ago',
|
|
320
|
+
},
|
|
321
|
+
};
|
|
@@ -0,0 +1,321 @@
|
|
|
1
|
+
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
2
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
3
|
+
import type { YoutubeThumbnailPreviewerUI } from '../ui';
|
|
4
|
+
|
|
5
|
+
const slug = 'previsualizador-miniaturas-youtube';
|
|
6
|
+
const title = 'Previsualizador de Miniaturas YouTube Online - Mejora tu CTR Gratis';
|
|
7
|
+
const description =
|
|
8
|
+
'Sube tu miniatura y visualiza cómo queda en el feed real de YouTube móvil y desktop. Simulador de modo oscuro y claro para optimizar clics instantáneos.';
|
|
9
|
+
|
|
10
|
+
const faqData = [
|
|
11
|
+
{
|
|
12
|
+
question: '¿Por qué es vital probar las miniaturas de YouTube?',
|
|
13
|
+
answer:
|
|
14
|
+
'La mayoría de los usuarios ven YouTube en dispositivos móviles. Una miniatura que se ve bien en tu monitor puede ser ilegible en una pantalla pequeña. Probarla en un simulador asegura que el texto sea claro y el sujeto principal destaque en cualquier tamaño.',
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
question: '¿Tengo que registrarme para usar este Previsualizador?',
|
|
18
|
+
answer:
|
|
19
|
+
'No. Nuestra herramienta es 100% gratuita y funciona directamente en tu navegador. No necesitas crear una cuenta ni dejar tu correo electrónico para optimizar tus miniaturas.',
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
question: '¿Mis diseños se suben a vuestro servidor?',
|
|
23
|
+
answer:
|
|
24
|
+
'Absolutamente no. La privacidad es nuestra prioridad número uno. Al seleccionar un archivo, este se carga localmente en la memoria de tu navegador mediante una URL temporal. Nadie, excepto tú, puede ver el diseño que estás probando.',
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
question: '¿Cómo ayuda esta herramienta a mejorar mi CTR?',
|
|
28
|
+
answer:
|
|
29
|
+
'El CTR (Click-Through Rate) es el porcentaje de personas que hacen clic al ver la miniatura. Al simular el entorno real (fondo negro vs blanco, móvil vs PC), puedes corregir errores de contraste y composición antes de publicar, aumentando tus clics.',
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
question: '¿Funciona con el Modo Oscuro oficial de YouTube?',
|
|
33
|
+
answer:
|
|
34
|
+
'Sí. Hemos incluido un selector de temas (Claro y Oscuro) que imita exactamente los colores hexadecimales que utiliza la aplicación oficial de YouTube en ambos modos.',
|
|
35
|
+
},
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
const howToData = [
|
|
39
|
+
{
|
|
40
|
+
name: 'Sube tu diseño',
|
|
41
|
+
text: 'Haz clic en el área de carga o arrastra tu archivo de imagen (PNG, JPG o WebP) directamente a la herramienta.',
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
name: 'Ajusta el contexto',
|
|
45
|
+
text: 'Escribe el título de tu vídeo y el nombre de tu canal para que la simulación sea lo más realista posible frente al feed real.',
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'Cambia de dispositivo',
|
|
49
|
+
text: "Alterna entre la vista de 'Escritorio' y 'Móvil' para verificar la legibilidad en pantallas de diferentes tamaños.",
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
name: 'Prueba el contraste',
|
|
53
|
+
text: "Activa el tema 'Oscuro' para ver si los colores resaltan correctamente contra el fondo negro de YouTube.",
|
|
54
|
+
},
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
58
|
+
'@context': 'https://schema.org',
|
|
59
|
+
'@type': 'FAQPage',
|
|
60
|
+
mainEntity: faqData.map((item) => ({
|
|
61
|
+
'@type': 'Question',
|
|
62
|
+
name: item.question,
|
|
63
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
64
|
+
})),
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
const howToSchema: WithContext<HowToThing> = {
|
|
68
|
+
'@context': 'https://schema.org',
|
|
69
|
+
'@type': 'HowTo',
|
|
70
|
+
name: title,
|
|
71
|
+
description,
|
|
72
|
+
step: howToData.map((step, i) => ({
|
|
73
|
+
'@type': 'HowToStep',
|
|
74
|
+
position: i + 1,
|
|
75
|
+
name: step.name,
|
|
76
|
+
text: step.text,
|
|
77
|
+
})),
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
81
|
+
'@context': 'https://schema.org',
|
|
82
|
+
'@type': 'SoftwareApplication',
|
|
83
|
+
name: title,
|
|
84
|
+
description,
|
|
85
|
+
applicationCategory: 'UtilityApplication',
|
|
86
|
+
operatingSystem: 'All',
|
|
87
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
88
|
+
inLanguage: 'es',
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export const content: ToolLocaleContent<YoutubeThumbnailPreviewerUI> = {
|
|
92
|
+
slug,
|
|
93
|
+
title,
|
|
94
|
+
description,
|
|
95
|
+
faqTitle: 'Preguntas Frecuentes',
|
|
96
|
+
faq: faqData,
|
|
97
|
+
bibliographyTitle: 'Referencias',
|
|
98
|
+
bibliography: [
|
|
99
|
+
{
|
|
100
|
+
name: 'YouTube Help: Create custom video thumbnails',
|
|
101
|
+
url: 'https://support.google.com/youtube/answer/141805',
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
name: 'Nielsen Norman Group: Visual Processing and UX Design',
|
|
105
|
+
url: 'https://www.nngroup.com/articles/visual-processing/',
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
name: 'Derral Eves: The YouTube Formula (Thumbnail Strategy)',
|
|
109
|
+
url: 'https://derraleves.com/the-youtube-formula/',
|
|
110
|
+
},
|
|
111
|
+
],
|
|
112
|
+
howTo: howToData,
|
|
113
|
+
schemas: [faqSchema, howToSchema, appSchema],
|
|
114
|
+
seo: [
|
|
115
|
+
{
|
|
116
|
+
type: 'title',
|
|
117
|
+
text: 'Previsualizador de Miniaturas para YouTube: Domina el CTR de tu Canal',
|
|
118
|
+
level: 2,
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
type: 'paragraph',
|
|
122
|
+
html: 'En el ecosistema de YouTube, la miniatura (o thumbnail) es la puerta de entrada a tu contenido. Puedes tener el mejor vídeo del mundo, con una edición de Hollywood y un guion digno de un Oscar, pero si nadie hace clic, tu trabajo será invisible para el algoritmo. Aquí es donde entra en juego el <strong>CTR (Click-Through Rate)</strong>, y la miniatura es el factor determinante.',
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
type: 'title',
|
|
126
|
+
text: 'Por qué necesitas probar tus miniaturas antes de subirlas',
|
|
127
|
+
level: 3,
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
type: 'list',
|
|
131
|
+
items: [
|
|
132
|
+
'<strong>Previsualización Real:</strong> Mira tu miniatura tal como aparecerá en el feed de YouTube.',
|
|
133
|
+
'<strong>Modo Oscuro y Claro:</strong> Asegura que los colores resalten en cualquier configuración del usuario.',
|
|
134
|
+
'<strong>Simulador de Dispositivos:</strong> Comprueba la legibilidad del texto tanto en monitores como en móviles pequeños.',
|
|
135
|
+
'<strong>Optimización de CTR:</strong> Compara tu diseño con la interfaz nativa para maximizar los clics.',
|
|
136
|
+
'<strong>Sin Registro:</strong> Sube tu imagen y pruébala al instante sin crear cuentas.',
|
|
137
|
+
'<strong>Privacidad Garantizada:</strong> Tus diseños se procesan localmente y nunca se suben a servidores.',
|
|
138
|
+
],
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
type: 'paragraph',
|
|
142
|
+
html: 'Muchos creadores cometen el error de diseñar sus miniaturas en monitores grandes, viéndolas a pantalla completa en sus editores favoritos. El problema es que el usuario final rara vez la ve así. La mayoría la consume en un dispositivo móvil mientras hace scroll infinito, o en una esquina del monitor en modo oscuro. Nuestro <strong>Previsualizador de Miniaturas de YouTube</strong> te permite romper esa "ilusión del diseñador" y ver la realidad quirúrgica del feed.',
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
type: 'title',
|
|
146
|
+
text: 'Métricas Técnicas y Rendimiento',
|
|
147
|
+
level: 3,
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
type: 'grid',
|
|
151
|
+
columns: [
|
|
152
|
+
{ title: '0,2 s', body: 'Tiempo de Respuesta' },
|
|
153
|
+
{ title: '4K', body: 'Resolución Máxima' },
|
|
154
|
+
{ title: '100%', body: 'Privacidad Local' },
|
|
155
|
+
{ title: 'HD', body: 'Calidad Nativa' },
|
|
156
|
+
],
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
type: 'title',
|
|
160
|
+
text: 'La Psicología del Clic: ¿Por qué fallan las miniaturas?',
|
|
161
|
+
level: 3,
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
type: 'paragraph',
|
|
165
|
+
html: 'El cerebro humano procesa imágenes miles de veces más rápido que el texto. Sin embargo, en YouTube, la competencia es brutal. Tu miniatura no solo debe ser "bonita", debe ser <strong>legible</strong> y tener <strong>contraste</strong>.',
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
type: 'paragraph',
|
|
169
|
+
html: 'Un error común es usar colores que se mimetizan con el fondo de YouTube. Si usas grises oscuros y tu espectador está en modo oscuro, tu vídeo simplemente desaparecerá de su vista periférica. Al usar este tester, puedes alternar entre temas y asegurarte de que tu diseño "pop" (resalte) en cualquier escenario.',
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
type: 'title',
|
|
173
|
+
text: 'Comparativa Directa: Diseño vs. Realidad',
|
|
174
|
+
level: 3,
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
type: 'paragraph',
|
|
178
|
+
html: '¿Merece la pena perder 30 segundos probando la miniatura? La respuesta es un rotundo SÍ. Una miniatura optimizada puede duplicar tus visualizaciones en las primeras 24 horas, lo que le indica a la IA de YouTube que tu contenido tiene "gancho".',
|
|
179
|
+
},
|
|
180
|
+
{
|
|
181
|
+
type: 'grid',
|
|
182
|
+
columns: [
|
|
183
|
+
{
|
|
184
|
+
title: 'Diseño en Photoshop / Canva',
|
|
185
|
+
body: 'Falsa sensación de tamaño real · Ignora el contraste con el fondo de la App · El texto parece legible pero quizás no · No ves los elementos de la UI (duración, avatares)',
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
title: 'Previsualizador de Miniaturas YouTube',
|
|
189
|
+
body: 'Vista real en el feed de inicio (Home) · Contraste verificado en Dark vs Light Mode · Legibilidad de texto garantizada en mobile · Simulación de títulos y nombres de canal',
|
|
190
|
+
},
|
|
191
|
+
],
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
type: 'title',
|
|
195
|
+
text: 'Checklist para una Miniatura con CTR Superior al 10%',
|
|
196
|
+
level: 3,
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
type: 'paragraph',
|
|
200
|
+
html: 'Antes de exportar tu diseño final, asegúrate de pasar por esta lista de control utilizando nuestro simulador profesional:',
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
type: 'list',
|
|
204
|
+
items: [
|
|
205
|
+
'¿Es el texto legible en una pantalla de móvil pequeña?',
|
|
206
|
+
'¿Hay suficiente contraste entre el fondo y el sujeto principal?',
|
|
207
|
+
'¿La miniatura se ve bien sobre el fondo negro del Modo Oscuro?',
|
|
208
|
+
'¿El título del vídeo tapa información vital de la imagen?',
|
|
209
|
+
'¿La duración del vídeo (el cuadradito negro) oculta algo importante?',
|
|
210
|
+
'¿La cara o el objeto principal transmiten la emoción deseada a tamaño reducido?',
|
|
211
|
+
],
|
|
212
|
+
},
|
|
213
|
+
{
|
|
214
|
+
type: 'title',
|
|
215
|
+
text: 'Anatomía de una Miniatura de Alto Impacto',
|
|
216
|
+
level: 3,
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
type: 'paragraph',
|
|
220
|
+
html: 'Basándonos en análisis de los canales más grandes del mundo, una miniatura ganadora suele seguir este patrón estructural:',
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
type: 'grid',
|
|
224
|
+
columns: [
|
|
225
|
+
{
|
|
226
|
+
title: 'Sujeto Principal',
|
|
227
|
+
body: 'Foco de atención primaria · Usa recortes nítidos con un ligero borde o saturación extra.',
|
|
228
|
+
},
|
|
229
|
+
{
|
|
230
|
+
title: 'Texto (Máx 3 palabras)',
|
|
231
|
+
body: 'Contexto instantáneo · Usa fuentes Sans Serif gruesas y colores complementarios.',
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
title: 'Fondo Desenfocado',
|
|
235
|
+
body: 'Separación de planos · Añade profundidad para que el sujeto principal "salte" de la pantalla.',
|
|
236
|
+
},
|
|
237
|
+
{
|
|
238
|
+
title: 'Espacio de Duración',
|
|
239
|
+
body: 'Evitar errores · No pongas caras o texto en la esquina inferior derecha.',
|
|
240
|
+
},
|
|
241
|
+
],
|
|
242
|
+
},
|
|
243
|
+
{
|
|
244
|
+
type: 'tip',
|
|
245
|
+
title: 'El Truco de la Zona Muerta',
|
|
246
|
+
html: '<p>YouTube coloca siempre un recuadro negro con la duración del vídeo en la esquina inferior derecha de la miniatura. Miles de creadores ponen elementos vitales en esa zona, solo para descubrir que la App los tapa. Nuestra herramienta simula este recuadro para que nunca tapes tu mejor cara.</p>',
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
type: 'title',
|
|
250
|
+
text: 'Ventajas y Limitaciones de la Herramienta',
|
|
251
|
+
level: 3,
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
type: 'grid',
|
|
255
|
+
columns: [
|
|
256
|
+
{
|
|
257
|
+
title: 'Interfaz ultra rápida y reactiva',
|
|
258
|
+
body: 'Limitación: No permite edición de imagen (usar Canva/PS)',
|
|
259
|
+
},
|
|
260
|
+
{
|
|
261
|
+
title: 'Mockups exactos de la App y Web',
|
|
262
|
+
body: 'Limitación: No simula anuncios Pre-roll',
|
|
263
|
+
},
|
|
264
|
+
{
|
|
265
|
+
title: 'Gratis y sin publicidad intrusiva',
|
|
266
|
+
body: 'Limitación: Solo soporta archivos locales',
|
|
267
|
+
},
|
|
268
|
+
],
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
type: 'title',
|
|
272
|
+
text: "Uso del Modo 'Split' (Comparación Directa)",
|
|
273
|
+
level: 3,
|
|
274
|
+
},
|
|
275
|
+
{
|
|
276
|
+
type: 'paragraph',
|
|
277
|
+
html: 'Esta es la función estrella. Al activar el modo Split, verás tu miniatura bajo el prisma del Modo Claro y el Modo Oscuro al mismo tiempo. Es la forma definitiva de comprobar si tu paleta de colores es universal o si necesita ajustes de brillo y contraste.',
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
type: 'title',
|
|
281
|
+
text: 'Privacidad: Tus Diseños no se Suben a la Nube',
|
|
282
|
+
level: 3,
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
type: 'paragraph',
|
|
286
|
+
html: 'Sabemos que tus miniaturas son parte de tu estrategia secreta antes de un lanzamiento. Por eso, hemos diseñado esta utilidad para que trabaje exclusivamente en el motor de tu navegador. <strong>Nada se sube a internet</strong>. El archivo que seleccionas se carga mediante una URL local temporal que desaparece al cerrar la pestaña. Tu propiedad intelectual está 100% bajo tu control.',
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
type: 'title',
|
|
290
|
+
text: 'Conclusión: El Píxel Perfecto Garantizado',
|
|
291
|
+
level: 3,
|
|
292
|
+
},
|
|
293
|
+
{
|
|
294
|
+
type: 'paragraph',
|
|
295
|
+
html: 'Deja de adivinar y empieza a validar. El <strong>Previsualizador de Miniaturas para YouTube</strong> de JJLMoya es la herramienta gratuita que separa a los creadores aficionados de los profesionales del contenido. Un pequeño ajuste en el tamaño de una fuente o en la posición del sujeto puede ser la diferencia entre un vídeo que pasa desapercibido y un éxito viral.',
|
|
296
|
+
},
|
|
297
|
+
{
|
|
298
|
+
type: 'paragraph',
|
|
299
|
+
html: '¡Empieza a optimizar tu canal ahora y dale a tus vídeos la tasa de clics que se merecen!',
|
|
300
|
+
},
|
|
301
|
+
],
|
|
302
|
+
ui: {
|
|
303
|
+
dropFeedTitle: 'Arrastra tu Miniatura',
|
|
304
|
+
dropFeedSub: 'PNG, JPG o WebP · Múltiples imágenes',
|
|
305
|
+
dropAvatarTitle: 'Arrastra tu Avatar',
|
|
306
|
+
dropAvatarSub: 'Imagen de perfil del canal',
|
|
307
|
+
labelTitle: 'Título del vídeo',
|
|
308
|
+
labelChannel: 'Nombre del canal',
|
|
309
|
+
defaultTitle: 'Tu Título de Vídeo Aquí',
|
|
310
|
+
defaultChannel: 'Nombre del Canal',
|
|
311
|
+
btnDesktop: 'Escritorio',
|
|
312
|
+
btnMobile: 'Móvil',
|
|
313
|
+
btnClear: 'Limpiar',
|
|
314
|
+
labelLight: 'Claro',
|
|
315
|
+
labelDark: 'Oscuro',
|
|
316
|
+
views0: '1,2 M de visualizaciones · hace 1 hora',
|
|
317
|
+
views1: 'Hace 45 minutos',
|
|
318
|
+
views2: '250.000 visualizaciones · hace 1 día',
|
|
319
|
+
views3: '3,1 M de visualizaciones · hace 1 semana',
|
|
320
|
+
},
|
|
321
|
+
};
|