OpenGraph Images
Customize how your presentations appear when shared on social media.
Overview
Section titled “Overview”Deckyard automatically generates OpenGraph (OG) preview images when you publish a presentation. These images appear when your presentation link is shared on social platforms like Twitter, LinkedIn, Facebook, and Slack.
Automatic Generation
Section titled “Automatic Generation”How It Works
Section titled “How It Works”When you publish a presentation:
- Deckyard finds the first meaningful slide (skipping internal slides like follow invites)
- Renders the slide at 1600x900 (16:9 aspect ratio)
- Composes it onto a 1200x630 OG canvas (optimized for social platforms)
- Saves the image to your media storage
- Links it to your published presentation
Image Dimensions
Section titled “Image Dimensions”| Purpose | Dimensions | Aspect Ratio |
|---|---|---|
| Slide render | 1600 x 900 | 16:9 |
| OG image | 1200 x 630 | ~1.9:1 |
| Slide in OG | Max 1120 x 630 | Letterboxed |
The slide is centered on a dark background (#121212) to ensure it looks good on any platform.
Author Overlay
Section titled “Author Overlay”Add author information to your preview images for branding.
Enable Author Overlay
Section titled “Enable Author Overlay”
- Open your presentation
- Go to Settings (gear icon)
- Enable Show author on preview
- Save settings
- Republish the presentation
What’s Displayed
Section titled “What’s Displayed”The overlay appears in the top-right corner and includes:
- Author name - From your profile settings, or derived from email
- Profile image - If you’ve uploaded one in user settings
Set Your Profile
Section titled “Set Your Profile”To customize how you appear on previews:
- Go to Settings > Profile
- Upload a profile image
- Set your display name
- Save changes
Regenerating Previews
Section titled “Regenerating Previews”Preview images are generated at publish time. To update them:
Manual Regeneration
Section titled “Manual Regeneration”- Open your presentation
- Go to Share
- Click Regenerate Preview
This is useful when:
- You’ve changed the first slide
- You’ve updated your profile
- You’ve toggled the author overlay
Automatic Regeneration
Section titled “Automatic Regeneration”Preview images are automatically regenerated when you republish. If you make changes to your presentation, click Publish again to update both the content and the preview.
Caching
Section titled “Caching”Platform Caching
Section titled “Platform Caching”Social platforms cache preview images. After updating your preview:
- Twitter - Use their Card Validator to refresh
- LinkedIn - Use their Post Inspector
- Facebook - Use their Sharing Debugger
- Slack - Clear the cache by resharing the link
CDN Caching
Section titled “CDN Caching”If you’re using a media provider (ImageKit, S3, etc.), images may be cached at the CDN level. The regeneration endpoint creates new files with unique names to bypass this.
Image Selection Logic
Section titled “Image Selection Logic”When generating previews, Deckyard uses this priority:
- Server-side render - If Puppeteer is available and media provider is configured
- Image from slide - First image field from the slide content
- Fallback image - Default Deckyard preview image
Slides That Work Best
Section titled “Slides That Work Best”These slide types generate the best previews:
- Title slides - Clean, focused, with clear typography
- Image slides - Hero images display well
- Quote slides - Memorable text with visual appeal
Slides to Avoid as First
Section titled “Slides to Avoid as First”- Video slides - Show static placeholder instead
- Interactive slides - Polls, Q&A don’t preview well
- Follow invite slides - Automatically skipped
Technical Requirements
Section titled “Technical Requirements”Server-Side Rendering
Section titled “Server-Side Rendering”Full preview generation requires:
- Puppeteer - For rendering slides as images
- Chromium - Browser runtime (
PUPPETEER_EXECUTABLE_PATH) - Media Provider - For storing generated images
Without Puppeteer, Deckyard falls back to extracting existing images from slide content.
Media Storage
Section titled “Media Storage”Generated previews are stored via your configured media provider:
- ImageKit
- Scaleway Object Storage
- S3-compatible storage
- Local uploads (development only)
OpenGraph Tags
Section titled “OpenGraph Tags”Published presentations include these OG tags:
<meta property="og:type" content="website" /><meta property="og:title" content="Presentation Title" /><meta property="og:image" content="https://your-cdn.com/og-ABC123.png" /><meta property="og:url" content="https://your-instance.com/p/ABC123-slug" />
<!-- Twitter Card --><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="Presentation Title" /><meta name="twitter:image" content="https://your-cdn.com/og-ABC123.png" />Best Practices
Section titled “Best Practices”Design for Preview
Section titled “Design for Preview”- Put key content on your title slide
- Use high-contrast colors
- Include your logo or branding
- Keep text large and readable
Test Before Sharing
Section titled “Test Before Sharing”- Publish your presentation
- Copy the public URL
- Test in platform validators
- Adjust and regenerate if needed
Consistent Branding
Section titled “Consistent Branding”- Use your organization’s theme
- Enable author overlay for recognition
- Include visual brand elements on first slide
Troubleshooting
Section titled “Troubleshooting”Preview Not Updating
Section titled “Preview Not Updating”- Regenerate the preview
- Clear platform caches (use validators)
- Check that media provider is working
- Verify Puppeteer is installed
Preview Shows Wrong Slide
Section titled “Preview Shows Wrong Slide”- Ensure follow-invite is not your first slide
- Check that first slide has renderable content
- Regenerate after reordering slides
Low Quality Preview
Section titled “Low Quality Preview”- Check source slide resolution
- Verify images are high-quality
- Ensure fonts are loading correctly