Skip to content

theodorusclarence/og

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
October 15, 2021 15:02
October 15, 2021 15:02
October 15, 2021 15:33
src
January 17, 2023 19:39
October 15, 2021 15:02
October 17, 2021 11:33
January 17, 2023 19:39
January 17, 2023 19:39
November 10, 2021 16:24
January 17, 2023 19:39
January 17, 2023 19:39
January 17, 2023 19:39

Open Graph Generator

πŸ‡ Open Graph Generator made using @vercel/og for personal use.

Feel free to fork it and use it for your website!

Deployment Guide

You can achieve deployment fully from the website without cloning the repository.

  1. Fork the repository

  2. Replace the public/images/logo.jpg with your logo. Make sure it has the same file name.

    This is optional, replacing the logo will grant you the ease of using the api without having to add your logo link on the parameters every time.

  3. Deploy to Vercel.

Vercel Configuration Settings

There are some configurations that you need to do:

  1. Add the following to the environment variables. Settings > Environment Variables
Name Value
NEXT_PUBLIC_DEPLOYMENT_URL https://your.domain.com

After configuring, redeploy the project

General OG

Light Mode & Site Name Only

image

Query:

/api/general?siteName=Your Site Name&description=Lorem ipsum&theme=light

Light Mode & Template Title

image

/api/general?templateTitle=Page Name&siteName=Your Site Name&description=Lorem ipsum&theme=light

Dark Mode & Site Name Only

image

/api/general?siteName=Your Site Name&description=Lorem ipsum&theme=dark

Dark Mode & Template Title

image

/api/general?templateTitle=Page Name&siteName=Your Site Name&description=Lorem ipsum&theme=dark

Custom Logo

You can also customize logo by specifying logo, width is defaulted to 100px.

Or you can also add logoWidth and logoHeight by specifying pixel number

image

/api/general?siteName=Your Site Name&description=Lorem ipsum&theme=dark&logo=https://docs.thcl.dev/apple-icon-180x180.png&logoWidth=120