How to Create a Custom OG Image Template
Someone shares your latest post and the card that shows up is the homepage logo. It is on brand, and it says nothing about the article. That is what happens when every URL points at the same image.
A custom OG template flips that. One 1200×630 layout, with the page title as the thing that changes, set as og:image. Design it in Canva, then generate a preview per URL with Layerre instead of exporting by hand. Sizes and meta tags are in the Open Graph image guide.
Which OG template approach should you use?
| Approach | Best for | Canva design |
|---|---|---|
| One static PNG | A single default share image | Export once from Canva |
| Vercel OG / @vercel/og | Next.js apps that draw the card in code | No. Layout is JSX. |
| Bannerbear or Placid | API images after you rebuild the card | No. Their editor. |
| Layerre | One card per page from a Canva template | Yes. Paste the share link. |
A static file is enough for a homepage and a handful of marketing URLs. The template starts to matter when a CMS publishes pages and each one would otherwise share the same preview. Free starting sizes: OG template sizes. Crop check: OG and X card preview.
What goes on the template?
Keep the card boring on purpose. A share preview is a thumbnail. The pieces that survive are a background, a logo, and one title.
- Title. One text box, two lines at most. This is the layer you map to the page title.
- Eyebrow. Optional. A category, doc section, or site name in smaller type. Map it only if it changes per page.
- Logo and color bar. Static. Do not bind these to data unless you really run more than one brand through the same file.
- Background. A flat color or a simple pattern. A busy screenshot makes the title unreadable at feed size.
Name the dynamic text box title. If you also swap a photo, name that frame image and pass a public image URL. Everything else stays locked in Canva.
Are there free OG templates?
Yes. Canva's free plan includes social and blog templates you can resize to 1200×630. Search for a blog banner or a LinkedIn link card, then set a custom size instead of trusting the preset. Use a short title, one brand color, and almost no small text.
The useful free step is one master file you can refill: page title in, image URL out. A zip of fifty PNGs is a static default repeated fifty times. Resize, replace the sample headline, and save that file as the template.
How do you generate one image per page?
- Design 1200×630 in Canva. Put the title in one text box and share the design.
- Import the share link into Layerre and map
title. Render one page you already know the title of, and read the card at phone size. - When a page is published, send that title and store the returned URL. Set it as
og:image. Use the same URL fortwitter:imageunless you designed a second crop.
Where the trigger lives depends on the site. A Next.js route can call the API at build or at request time. WordPress can generate on publish and upload the file. Webflow can store the URL on the CMS item. The WordPress path is what WordPress does with a Layerre image.
Vercel OG is the alternative when the card is already a React component and you do not have a Canva file. Bannerbear and Placid are the alternative when you are willing to rebuild the layout in their editor to get an API. If the designer's source of truth is Canva, keep it there.
Why does the old preview keep showing?
Facebook, LinkedIn, and Slack cache the image. Changing the file at the same URL often does nothing until the crawler is told to look again. After you ship a new title, scrape the page in the Facebook Sharing Debugger or the LinkedIn Post Inspector, and paste the link into Slack again.
Give each render its own URL instead of overwriting yesterday's file. A title change then points og:image at a new address, which is the reliable way around a warm cache. Debugging steps live in the Open Graph image guide. Renders are 50 free, then $15 a month for 500 on pricing.