X overlays og:title as white text on the image. Hide it with a zero-width space:
```html
```
In JSX: content={"\u200B"}
Your page </code> stays descriptive for SEO β only <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">og:title</code> uses the trick.</span></p></div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Meta Tags</h3><div><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```html</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><meta property="og:image" content="https://example.com/og/page.png" /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><meta property="og:image:width" content="1200" /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><meta property="og:image:height" content="600" /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><meta property="og:title" content="" /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><meta name="twitter:card" content="summary_large_image" /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><meta name="twitter:image" content="https://example.com/og/page.png" /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p></div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Dynamic Generation</h3><div><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>Use <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">@vercel/og</code> with 2x scale and safe margins:</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```typescript</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>import { ImageResponse } from '@vercel/og';</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>const OG_SCALE = 2;</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>export async function GET(request: Request) {</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> return new ImageResponse(</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> (</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> <div style={{</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> width: '100%',</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> height: '100%',</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> display: 'flex',</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> backgroundColor: '#0a0f1c',</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> padding: 100, // 50px * 2 for safe margins</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> }}></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> {/<em> Your visual content here </em>/}</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> </div></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> ),</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> { width: 1200 <em> OG_SCALE, height: 600 </em> OG_SCALE }</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> );</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>}</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Express</h4><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```typescript</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>app.get('/og/:slug.png', async (req, res) => {</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> const image = new ImageResponse(/<em> ... </em>/);</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> const buffer = await image.arrayBuffer();</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> res.setHeader('Content-Type', 'image/png');</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> res.setHeader('Cache-Control', 'public, max-age=86400');</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> res.send(Buffer.from(buffer));</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>});</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p></div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Dynamic Routes (Optional)</h3><div><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>For per-page OG images, two approaches:</span></p><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">On-Demand Generation</h4><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>Generate when crawler requests the image:</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>/og/[slug].png β generates image on request</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><strong>Risk:</strong> X crawlers timeout after ~5 seconds. Cold starts can exceed this, causing blank previews.</span></p><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Pre-Generated (Recommended)</h4><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>Generate and store image when content is created:</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```typescript</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>// On content creation</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>const imageBuffer = await generateOgImage(data);</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>await db.insert({ ogImageData: imageBuffer }); // Store as BYTEA</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>// On request - instant response</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>app.get('/og/:id.png', (req, res) => {</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> const { ogImageData } = await db.get(req.params.id);</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> res.setHeader('Content-Type', 'image/png');</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> res.send(ogImageData);</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>});</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>Pre-generation ensures instant response for crawlers.</span></p></div></div><div class="mt-6 border-t border-zinc-100 pt-6 dark:border-zinc-800"><h3 class="mb-3 text-lg font-semibold text-zinc-900 dark:text-white">Checklist</h3><div><ul class="mb-4 ml-6 space-y-1 list-disc"><li class="text-zinc-600 dark:text-zinc-400"><span>[ ] 2400Γ1200 (2x retina)</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>[ ] 2:1 aspect ratio</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>[ ] 50-56px safe margins</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>[ ] High contrast colors</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>[ ] <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">.png</code> extension in URL</span></li><li class="text-zinc-600 dark:text-zinc-400"><span>[ ] Zero-width space in <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">og:title</code></span></li><li class="text-zinc-600 dark:text-zinc-400"><span>[ ] Test: https://cards-dev.twitter.com/validator</span></li></ul><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>---</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><em>Built for [BondTerminal](https://bondterminal.com). See it in action: [example X post](https://x.com/0juano/status/2016559903578407358).</em></span></p></div></div></div></div></div><div class="mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800"><h2 class="mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white"><span>More from this repository</span><span class="rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300">2</span></h2><div class="grid gap-3 sm:grid-cols-2"><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/0juano/agent-skills/yahoo-finance"><span class="text-xl">π―</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">yahoo-finance</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>π―</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Retrieves real-time stock quotes, financial metrics, and historical price data from Yahoo Finance for investment research and analysis.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/0juano/agent-skills/edgeone-pages-deploy"><span class="text-xl">π―</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">edgeone-pages-deploy</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>π―</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Instantly deploys static HTML to a public URL without authentication, generating a shareable link for quick web hosting.</p></div></a></div></div></div><!--$--><!--/$--></main><footer class="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-4"><div class="md:col-span-1"><a class="flex items-center" href="/"><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="h-8 w-auto dark:hidden" style="color:transparent" src="/logo.png?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS"/><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="hidden h-8 w-auto dark:block" style="color:transparent" src="/logo-dark.png?v=3&dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS"/></a><p class="mt-4 text-sm text-zinc-600 dark:text-zinc-400">Everything you need for vibe coding. Real-time updates on skills, plugins, MCP servers, and marketplaces.</p></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Resources</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/skills">Skills</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/mcp">MCP Servers</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/marketplaces">Marketplaces</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/plugins">Plugins</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Support</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/about">About Us</a></li><li><a href="mailto:admin@vibeindex.ai" class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white">Contact Us</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/feedback">Feedback</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/activity">Sync Activity</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Legal</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/privacy">Privacy Policy</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/terms">Terms of Service</a></li></ul></div></div><div class="mt-8 border-t border-zinc-200 pt-8 dark:border-zinc-800"><p class="text-center text-sm text-zinc-500 dark:text-zinc-500">Β© <!-- -->2026<!-- --> <!-- -->Vibe Index<!-- -->. <!-- -->All rights reserved.<!-- --> <!-- -->Operated by<!-- --> <a href="https://jolab.ai" target="_blank" rel="noopener noreferrer" class="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">JoLab</a></p></div></div></footer><script src="/_next/static/chunks/a8c74b565bd8a7a9.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[26817,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n3:I[44636,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"Providers\"]\n4:I[3374,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n5:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n7:I[22016,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"\"]\n8:I[58234,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\na:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"ViewportBoundary\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"MetadataBoundary\"]\n11:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n:HL[\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"style\"]\n:HL[\"/_next/static/chunks/2e466e6eeb5ad364.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"KWwxlk9yk9iWRPDa88xZi\",\"c\":[\"\",\"skills\",\"0juano\",\"agent-skills\",\"x-image-cards\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skills\",{\"children\":[[\"owner\",\"0juano\",\"d\"],{\"children\":[[\"repo\",\"agent-skills\",\"d\"],{\"children\":[[\"skill\",\"x-image-cards\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2e466e6eeb5ad364.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased min-h-screen flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex min-h-[60vh] flex-col items-center justify-center px-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-6xl font-bold text-zinc-900 dark:text-white\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-500 dark:text-zinc-400\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"$L7\",null,{\"href\":\"/\",\"className\":\"mt-8 inline-flex items-center rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":\"Go Home\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L8\",null,{}]]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"IconMark\"]\nc:null\n"])</script><script>self.__next_f.push([1,"10:[[\"$\",\"title\",\"0\",{\"children\":\"x-image-cards | Vibe Index\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generates visually appealing X/Twitter social card images dynamically, optimized for platform requirements and visual impact.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Vibe Index Team\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"vibe coding, vibecoding, AI coding, Claude Code, MCP servers, AI skills, AI plugins, AI development, AI assistants, Claude, cursor, windsurf, aider, cline\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Vibe Index - The Ultimate Vibe Coding Directory\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"512\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"512\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Vibe Index Logo\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale:alternate\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Vibe Index - Vibe Coding Directory\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/icon.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L12\",\"28\",{}]]\n"])</script><script>self.__next_f.push([1,"13:I[74533,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"FavoriteButton\"]\n14:I[54371,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n15:I[38848,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"mb-6\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex items-center gap-2 text-sm\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300\",\"children\":\"Skills\"}]}],[\"$\",\"li\",null,{\"className\":\"text-zinc-400\",\"children\":\"/\"}],[\"$\",\"li\",null,{\"className\":\"text-zinc-900 dark:text-white\",\"children\":\"x-image-cards\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-4\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-5xl\",\"children\":\"π―\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 flex-wrap\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold text-zinc-900 dark:text-white\",\"children\":\"x-image-cards\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2.5 py-1 text-sm \",\"children\":[[\"$\",\"span\",null,{\"children\":\"π―\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}],[\"$\",\"$L13\",null,{\"resourceId\":\"b5a61d69-210e-4094-8719-fcda34473571\",\"size\":\"sm\"}],false]}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-600 dark:text-zinc-400\",\"children\":[\"from \",\"0juano\",\"/\",\"agent-skills\"]}]]}]]}],[\"$\",\"$L14\",null,{\"description\":\"Generates visually appealing X/Twitter social card images dynamically, optimized for platform requirements and visual impact.\",\"descriptionKo\":\"X/νΈμν° μμ
μΉ΄λ μ΄λ―Έμ§λ₯Ό λμ μΌλ‘ μμ±νλ©°, νλ«νΌ μꡬμ¬νκ³Ό μκ°μ ν¨κ³Όλ₯Ό μ΅μ νν©λλ€.\",\"resourceId\":\"b5a61d69-210e-4094-8719-fcda34473571\",\"resourceName\":\"x-image-cards\",\"resourceType\":\"skill\",\"descriptionType\":\"ai\"}],null,null,[\"$\",\"$L7\",null,{\"href\":\"/collection/0juano/agent-skills\",\"className\":\"mt-4 flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 transition-all hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-2xl\",\"children\":\"π¦\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Part of\"}],[\"$\",\"p\",null,{\"className\":\"font-semibold text-zinc-900 dark:text-white\",\"children\":[\"0juano\",\"/\",\"agent-skills\",[\"$\",\"span\",null,{\"className\":\"ml-2 text-sm font-normal text-zinc-500 dark:text-zinc-400\",\"children\":[\"(\",3,\" \",\"items\",\")\"]}]]}]]}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5 text-zinc-400\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M9 5l7 7-7 7\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"x-image-cards\",{\"onClick\":\"$undefined\",\"className\":\"inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 \",\"children\":\"x-image-cards\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Installation\"}],[\"$\",\"$L15\",null,{\"installGuide\":{\"found\":true,\"commands\":[{\"label\":\"Quick Install\",\"command\":\"npx skills add 0juano/agent-skills\",\"description\":\"Install with npx\",\"type\":\"skills-sh\"}],\"jsonConfig\":\"$undefined\",\"rawSection\":\"## Install\\n\\n```bash\\nnpx skills add 0juano/agent-skills\\n```\"},\"githubUrl\":\"https://github.com/0juano/agent-skills\",\"owner\":\"0juano\",\"repo\":\"agent-skills\",\"resourceType\":\"skill\",\"resourceName\":\"x-image-cards\"}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8 flex gap-6 text-sm text-zinc-500 dark:text-zinc-400\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"title\":\"Installs\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-4 w-4\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"}]}],\"$L16\",\"$L17\"]}],false,\"$L18\",\"$L19\"]}],\"$L1a\",\"$L1b\",\"$L1c\"]}]\n"])</script><script>self.__next_f.push([1,"1d:I[74533,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"FavoriteCount\"]\n1e:I[13428,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n16:[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"2\"}]\n17:[\"$\",\"span\",null,{\"className\":\"text-zinc-400 dark:text-zinc-500\",\"children\":\"Installs\"}]\n18:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-4 w-4 text-violet-500\",\"fill\":\"currentColor\",\"stroke\":\"currentColor\",\"strokeWidth\":0.5,\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":[\"$\",\"$L1d\",null,{\"resourceId\":\"b5a61d69-210e-4094-8719-fcda34473571\"}]}]]}]\n19:[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Added\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"Feb 4, 2026\"}]]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/0juano/agent-skills\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-5 w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\"clipRule\":\"evenodd\"}]}],\"View on GitHub\"]}],[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-6 py-3 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M10 19l-7-7m0 0l7-7m-7 7h18\"}]}],\"Back to Skills\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1f:Tdce,"])</script><script>self.__next_f.push([1,"---\nname: x-image-cards\ndescription: Create X/Twitter cards that look like images, not marketing banners. Use when asked to \"create OG images\", \"set up X cards\", \"make social cards\", or \"twitter card without text\".\nmetadata:\n author: 0juano\n version: \"1.0.0\"\n---\n\n# X Image Cards\n\nCreate X cards that look like images, not marketing banners. Let the visual be the content β X already shows your title and description in the card UI.\n\n## X-Specific Requirements\n\n| Spec | Value | Why |\n|------|-------|-----|\n| Dimensions | 2400Γ1200 physical (1200Γ600 logical) | 2x for retina, 2:1 aspect ratio |\n| Safe margins | 50-56px padding (at 1x) | X clips edges on mobile |\n| URL format | `/og/page.png` not `/og/page?format=png` | X prefers explicit extensions |\n| Colors | `#FFFFFF` primary, avoid subtle grays | Thumbnails are tiny |\n\n## Zero-Width Space Trick\n\nX overlays `og:title` as white text on the image. Hide it with a zero-width space:\n\n```html\n\u003cmeta property=\"og:title\" content=\"\u0026#8203;\" /\u003e\n```\n\nIn JSX: `content={\"\\u200B\"}`\n\nYour page `\u003ctitle\u003e` stays descriptive for SEO β only `og:title` uses the trick.\n\n## Meta Tags\n\n```html\n\u003cmeta property=\"og:image\" content=\"https://example.com/og/page.png\" /\u003e\n\u003cmeta property=\"og:image:width\" content=\"1200\" /\u003e\n\u003cmeta property=\"og:image:height\" content=\"600\" /\u003e\n\u003cmeta property=\"og:title\" content=\"\u0026#8203;\" /\u003e\n\u003cmeta name=\"twitter:card\" content=\"summary_large_image\" /\u003e\n\u003cmeta name=\"twitter:image\" content=\"https://example.com/og/page.png\" /\u003e\n```\n\n## Dynamic Generation\n\nUse `@vercel/og` with 2x scale and safe margins:\n\n```typescript\nimport { ImageResponse } from '@vercel/og';\n\nconst OG_SCALE = 2;\n\nexport async function GET(request: Request) {\n return new ImageResponse(\n (\n \u003cdiv style={{\n width: '100%',\n height: '100%',\n display: 'flex',\n backgroundColor: '#0a0f1c',\n padding: 100, // 50px * 2 for safe margins\n }}\u003e\n {/* Your visual content here */}\n \u003c/div\u003e\n ),\n { width: 1200 * OG_SCALE, height: 600 * OG_SCALE }\n );\n}\n```\n\n### Express\n\n```typescript\napp.get('/og/:slug.png', async (req, res) =\u003e {\n const image = new ImageResponse(/* ... */);\n const buffer = await image.arrayBuffer();\n\n res.setHeader('Content-Type', 'image/png');\n res.setHeader('Cache-Control', 'public, max-age=86400');\n res.send(Buffer.from(buffer));\n});\n```\n\n## Dynamic Routes (Optional)\n\nFor per-page OG images, two approaches:\n\n### On-Demand Generation\nGenerate when crawler requests the image:\n```\n/og/[slug].png β generates image on request\n```\n\n**Risk:** X crawlers timeout after ~5 seconds. Cold starts can exceed this, causing blank previews.\n\n### Pre-Generated (Recommended)\nGenerate and store image when content is created:\n```typescript\n// On content creation\nconst imageBuffer = await generateOgImage(data);\nawait db.insert({ ogImageData: imageBuffer }); // Store as BYTEA\n\n// On request - instant response\napp.get('/og/:id.png', (req, res) =\u003e {\n const { ogImageData } = await db.get(req.params.id);\n res.setHeader('Content-Type', 'image/png');\n res.send(ogImageData);\n});\n```\n\nPre-generation ensures instant response for crawlers.\n\n## Checklist\n\n- [ ] 2400Γ1200 (2x retina)\n- [ ] 2:1 aspect ratio\n- [ ] 50-56px safe margins\n- [ ] High contrast colors\n- [ ] `.png` extension in URL\n- [ ] Zero-width space in `og:title`\n- [ ] Test: https://cards-dev.twitter.com/validator\n\n---\n\n*Built for [BondTerminal](https://bondterminal.com). See it in action: [example X post](https://x.com/0juano/status/2016559903578407358).*\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Skill Details\"}],[\"$\",\"$L1e\",null,{\"content\":\"$1f\"}]]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"div\",null,{\"className\":\"mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"More from this repository\"}],[\"$\",\"span\",null,{\"className\":\"rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300\",\"children\":2}]]}],[\"$\",\"div\",null,{\"className\":\"grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"$L7\",\"8eab15b5-e64a-4004-a37f-6a6d86cf266d\",{\"href\":\"/skills/0juano/agent-skills/yahoo-finance\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"π―\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"yahoo-finance\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"π―\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Retrieves real-time stock quotes, financial metrics, and historical price data from Yahoo Finance for investment research and analysis.\"}]]}]]}],[\"$\",\"$L7\",\"7ccce037-ffd3-4385-ae39-3e495dcc0afd\",{\"href\":\"/skills/0juano/agent-skills/edgeone-pages-deploy\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"π―\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"edgeone-pages-deploy\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"π―\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Instantly deploys static HTML to a public URL without authentication, generating a shareable link for quick web hosting.\"}]]}]]}]]}]]}]\n"])</script></body></html>
|