Programmatic SEO & usage
Stop manually designing Open Graph images. SocialCard allows you to generate thousands of unique, on-brand preview images instantly by just changing a URL parameter.
How it works
Instead of uploading a static image for every page, you put our dynamic API URL into your HTML meta tags. When a user shares your link on social media (Twitter, LinkedIn, Slack), their bot hits our API, and we render a custom image on the fly.
- Zero Storage: No need to host or upload generated images.
- Instant Updates: Change the title in your URL, and the image updates instantly.
Integration Guide
HTML / Static Sites
Simply place this meta tag in your <head>. Replace the values dynamically.
<!-- In your HTML <head> --> <meta property="og:image" content="https://socialcard.io/api/render?title=My%20Page%20Title&theme=dark" /> <meta name="twitter:image" content="https://socialcard.io/api/render?title=My%20Page%20Title&theme=dark" />
Next.js (App Router)
Use the generateMetadata function to automatically create unique images for every dynamic route (e.g., blog posts, products).
// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
type Props = { params: { slug: string } };
export async function generateMetadata({ params }: Props): Promise<Metadata> {
// 1. Fetch your post data
const post = await getBlogPost(params.slug);
// 2. Construct the Image URL
const ogUrl = new URL('https://socialcard.io/api/render');
ogUrl.searchParams.set('title', post.title);
ogUrl.searchParams.set('author', post.author);
ogUrl.searchParams.set('theme', 'dark');
return {
title: post.title,
openGraph: {
images: [
{
url: ogUrl.toString(),
width: 1200,
height: 630,
},
],
},
};
}🚀 Use Case: Directory Sites
If you have a directory with 10,000+ listings (e.g., "Best Coffee Shops in [City]"), generating images manually is impossible.
With SocialCard, you just add one line of code. When a user shares specific listing, the image is generated on-demand.
https://socialcard.io/api/render?title=Best%20Coffee%20in%20Tokyo&theme=light
https://socialcard.io/api/render?title=Best%20Coffee%20in%20London&theme=light