Get og

Last updated: June 8, 2023 | at 08:10 PM

Project Links

LIVE SITE LINK: https://get-og.is-a.fun
GITHUB REPO: https://github.com/lrmn7/get-og

🍇Open Graph Image Generator based on @vercel/og for personal use.

What is an GET OG?

Have you ever posted a hyperlink to Twitter, Facebook, or Slack and seen an image popup? How did your social network know how to "unfurl" the URL and get an image? The answer is in your <head>.

The Open Graph protocol says you can put a <meta> tag in the <head> of a webpage to define this image.

It looks like the following:

<head>
  <title>Title</title>
  <meta property="og:image" content="http://example.com/logo.jpg" />
</head>

Why use this service?

Feel free to customize an image for every single blog post or every single documentation page.
This is easily introduced through a link with some params.

Deploy Guide

Fork this repository
Replace the bg image and logo to yours in pulic dir, and change the relevant text infomation.
Connect Vercel for GitHub to automatically deploy each time you git push
Add the following to the vercel environment variables: Settings > Environment Variables

Name | NEXT_PUBLIC_DEPLOYMENT_URL

Value | https://deployment.domain.com

Getting Started 🛠️

Install with

yarn

Then, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.