Add OG images to website using OGCOPS (og.codercops.com) #19
Description
Summary
The ChatCops website has no OG images configured. When the site is shared on Twitter/X, LinkedIn, Slack, Discord, or iMessage, it shows a plain text link with no visual preview. This significantly reduces click-through rates.
We already have OGCOPS (og.codercops.com) — our own OG image generator — so adding OG images is straightforward: just add the right <meta> tags pointing to OGCOPS URLs.
Current State
File: website/src/layouts/Landing.astro (lines 29-38)
The layout has OG and Twitter card tags but is missing the image tags:
<!-- Open Graph — currently in Landing.astro -->
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonicalURL} />
<!-- Twitter — currently in Landing.astro -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<!-- ❌ No og:image, no twitter:image, no og:image dimensions -->Result: twitter:card is set to summary_large_image but there's no image — so platforms either show nothing or fall back to a generic preview.
What to Do
Step 1: Add OG Image Meta Tags to Landing Layout
File: website/src/layouts/Landing.astro
Add the following image to the Props interface and the <head>:
---
interface Props {
title: string;
description: string;
ogImage?: string; // NEW — optional override per page
}
const { title, description, ogImage } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
// Default OG image using OGCOPS
const defaultOgImage = `https://og.codercops.com/api/og?template=saas-gradient-mesh&title=${encodeURIComponent(title)}&description=${encodeURIComponent(description)}&color1=%236366f1&color2=%23ec4899&color3=%2306b6d4&textColor=%23FFFFFF`;
const ogImageUrl = ogImage ?? defaultOgImage;
---Then add these meta tags inside <head> (after the existing OG tags at line 33):
<!-- Open Graph Image -->
<meta property="og:image" content={ogImageUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<!-- Twitter Image -->
<meta name="twitter:image" content={ogImageUrl} />Step 2: Set the Homepage OG Image
File: website/src/pages/index.astro
The homepage should use a curated OG image with specific copy:
<Landing
title="ChatCops - AI Chat Widget for Any Website"
description="Universal embeddable AI chatbot widget. Add an AI assistant to any website with a single script tag. Multi-provider, zero dependencies, MIT licensed."
ogImage="https://og.codercops.com/api/og?template=saas-gradient-mesh&title=ChatCops&description=AI+Chat+Widget+for+Any+Website.+Multi-provider%2C+zero+dependencies%2C+MIT+licensed.&color1=%236366f1&color2=%23ec4899&color3=%2306b6d4&textColor=%23FFFFFF"
>Preview this URL to verify: https://og.codercops.com/api/og?template=saas-gradient-mesh&title=ChatCops&description=AI+Chat+Widget+for+Any+Website.+Multi-provider%2C+zero+dependencies%2C+MIT+licensed.&color1=%236366f1&color2=%23ec4899&color3=%2306b6d4&textColor=%23FFFFFF
Step 3: Add OG Images to Starlight Docs
File: website/astro.config.mjs
Starlight supports custom <head> tags. Add a default OG image for all docs pages via the head config (line 25-38):
head: [
// ... existing widget script tag ...
{
tag: 'meta',
attrs: {
property: 'og:image',
content: 'https://og.codercops.com/api/og?template=saas-gradient-mesh&title=ChatCops+Docs&description=Universal+embeddable+AI+chatbot+widget+documentation&color1=%236366f1&color2=%23ec4899&color3=%2306b6d4&textColor=%23FFFFFF',
},
},
{
tag: 'meta',
attrs: { property: 'og:image:width', content: '1200' },
},
{
tag: 'meta',
attrs: { property: 'og:image:height', content: '630' },
},
{
tag: 'meta',
attrs: {
name: 'twitter:image',
content: 'https://og.codercops.com/api/og?template=saas-gradient-mesh&title=ChatCops+Docs&description=Universal+embeddable+AI+chatbot+widget+documentation&color1=%236366f1&color2=%23ec4899&color3=%2306b6d4&textColor=%23FFFFFF',
},
},
],Step 4: Verify
After deploying, test with:
- OGCOPS Preview: https://og.codercops.com/preview — enter the page URL to verify OG tags and image rendering
The OG image should render a 1200x630 PNG with the gradient mesh template showing "ChatCops" as the title and the description text on a purple-pink-cyan gradient.
OGCOPS Template Reference
The saas-gradient-mesh template accepts these query params:
| Param | Value | Purpose |
|---|---|---|
template |
saas-gradient-mesh |
Template ID |
title |
URL-encoded text | Main heading |
description |
URL-encoded text | Subheading |
color1 |
Hex (URL-encoded #) |
Gradient color 1 (indigo %236366f1) |
color2 |
Hex | Gradient color 2 (pink %23ec4899) |
color3 |
Hex | Gradient color 3 (cyan %2306b6d4) |
textColor |
Hex | Text color (white %23FFFFFF) |
Browse other templates at: https://og.codercops.com
Files to Modify
| File | Change |
|---|---|
website/src/layouts/Landing.astro |
Add ogImage prop, add og:image + twitter:image meta tags |
website/src/pages/index.astro |
Pass curated ogImage prop to Landing |
website/astro.config.mjs |
Add OG image meta tags to Starlight head config |
Acceptance Criteria
- Homepage has
og:image,og:image:width,og:image:height,twitter:imagemeta tags - OG image URL points to
og.codercops.com/api/ogwith thesaas-gradient-meshtemplate - Starlight docs pages have a default OG image via the head config
- OG image renders correctly when tested with opengraph.xyz or similar tool
- No existing meta tags are broken
- Image dimensions are 1200x630 (standard OG size)