Julian lechnerandClaude Opus 5.5
d841ce6ead
Keep the decision steps in SKILL.md and move catalogs, examples, and checklists verbatim to references/ to reduce the context cost of loading the skill. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
882 B
882 B
OG & Social Preview Images
The image that appears when your URL is shared on social media, Slack, Discord, etc.
Required Meta Tags
<meta property="og:image" content="https://yoursite.com/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og/page-name.jpg" />
Dynamic OG Images
Generate OG images programmatically for pages with dynamic content (blog posts, user profiles):
- Vercel OG (
@vercel/og) — generates images at the edge using JSX - Satori — converts HTML/CSS to SVG (powers Vercel OG)
- Cloudinary — URL-based text overlay on template images
Best for programmatic SEO: Generate unique OG images per page using templates + dynamic data.