Open Graph image
The Open Graph image use case adds social share preview images to eligible pages by outputting Open Graph meta tags (including og:image) on the front end. When someone shares a link to your content, platforms can show the image CoverKit generates from your template and field mappings.
When it runs
Section titled “When it runs”CoverKit prints tags only on the front end (not in wp-admin or feeds). A template must be published, have this use case enabled, and match the page you are viewing.
Settings you control
Section titled “Settings you control”| Setting | Purpose |
|---|---|
| Post types | Which singular content types use this template (posts, pages, custom types). Leave none selected if you do not want singular matches. |
| Front page | Allow this template on the site front page (including the posts index when that is the front page). |
| Archives and search | Allow this template on archive and search views (not singular, not the front page). |
| Alt text | Optional alt text for the generated image in meta. |
CoverKit selects the first eligible published template (stable ascending ID order) that matches the current request. If multiple templates could apply, prefer a clear assignment strategy or adjust which templates are enabled.
Required mapping
Section titled “Required mapping”Post title must be mapped to a layer. Recommended fields include excerpt, author, site logo, and featured image—map them when your design uses that data.
Recommended size and crop
Section titled “Recommended size and crop”| Recommended canvas | 1200 × 630 px |
| Aspect ratio | About 1.91∶1 |
| Output | Scaled and cropped to the use case dimensions when needed |
In the template editor, use Apply dimensions to canvas if the use case warns that your canvas proportions differ.
Design tips
Section titled “Design tips”These guidelines help your image look good when cropped or shown small—they are not separate platform “use cases” in the plugin today.
- Safe zone: Keep important text and logos inside roughly 1000 × 530 px (about 50 px margin) so minor platform crops do not clip content.
- Headline: Short—about 6–8 words—so it stays readable as a thumbnail.
- Brand: Place a logo or mark in a consistent corner.
- Contrast: Strong contrast between text and background; use a scrim or overlay on busy photos.
- Platform crops: Some apps crop toward the center (for example messaging apps). Keep critical content near the middle.
| Platform | Typical display | Note |
|---|---|---|
| Facebook / Slack / iMessage | 1200×630 | Full image in many feeds |
| Twitter/X | ~1200×628 | Slight crop possible |
| ~1200×627 | Minor crop possible | |
| Often center-cropped | Design center-safe |
Verify output
Section titled “Verify output”- Enable Open Graph image on a published template and map Post title.
- Open a post that matches your post-type settings.
- View page source and find
og:imagepointing at a generated URL on your site. - Open that URL in a browser to see the image.
If the design changed but the image did not, clear the template cache.
Note: Facebook, LinkedIn, and other networks cache share previews on their servers. Clearing CoverKit’s cache does not force those platforms to refetch immediately.
Open Graph vs. sidebar image
Section titled “Open Graph vs. sidebar image”| Open Graph image | Sidebar image | |
|---|---|---|
| Audience | Visitors and social crawlers | You, while editing the template |
| Typical size | 1200×630 | 300×300 |
| Output | Meta tags on the front end | Preview in the editor sidebar |
Use Open Graph for link previews; use Sidebar image to check layout quickly or download a preview file.
Related
Section titled “Related”- How to configure use cases
- Caching
- Troubleshooting — meta missing or stale images