A service that generates dynamic Open Graph images that you can embed in your <meta> tags.
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>Hello</title>
<meta property="og:image" content="http://example.com/hello.jpg" />
</head>The purpose of the og:image tag is to give some context to the webpage, the URL that was shared on a social network.
It would take a long time to painstakingly design an image for every single blog post so thats where og-image.now.sh comes in.
We can simply pass the title of our blog post as an image name and it will generate the image for us on the fly!
It looks like the following:
<head>
<title>Hello</title>
<meta property="og:image" content="https://og-image.now.sh/Hello.png" />
</head>Now try changing the text Hello to the title of your choosing and watch the magic happen ✨
You'll want to fork this repository and deploy your own image generator.
- Click the fork button at the top right of GitHub
- Clone the repo to your local machine with
git clone URL_TO_FORKED_REPO_HERE - Make changes by swapping out images, changing colors, etc
- Deploy by running
now(if you don't already have it, runnpm install -g now)
Alternatively, you can do a one-click to deploy with the button below.
