This is a Next.js project created to generate and server open graph images for my personal website.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000/api/generate with your browser to see the generated image.
Different image layouts can be selected using URL query parameters. There are three layouts available, page, post and profile. Some layouts may require additional parameters to properly generate an image.
| Parameter | Values | Default | Description |
|---|---|---|---|
| type | 'page', 'profile', 'post' or none |
'page' |
The type of card that you would like to generate |
| title | string |
'Stephen Vondenstein' |
The title of the page, post, or profile |
| subtitle | string |
'Software Engineer' |
The subtitle when using type 'profile' |
| image | URL |
blank image matching background | Link to the image that you would like to use (when using types 'profile' or 'post') |
Below are examples of each layout type, including the URL query string required to generate each image.
Query string: title=Hello%20World!
Result:
Query string: type=profile&title=Hello%20World!&subtitle=Check%20out%20this%20awesome%20Open%20Graph%20&image=https://avatars.githubusercontent.com/u/17032946
Result:
Query string: `type=post&title=Hello%20World!&image=https://vondenstein.com/static/7c7ad6655d44dda060cbd284cd720423/ce7b8/hero.jpg Result:
You can clone/fork this repo and modify it to serve images for your own website by deploying to the Vercel Platform (from the creators of Next.js).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
