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>
24 lines
882 B
Markdown
24 lines
882 B
Markdown
# OG & Social Preview Images
|
|
|
|
The image that appears when your URL is shared on social media, Slack, Discord, etc.
|
|
|
|
## Required Meta Tags
|
|
|
|
```html
|
|
<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.
|