Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork17
An open graph image generator for Creative Commons projects.
License
creativecommons/og-image-generator
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Serverless service that generates dynamic Open Graph images that you can embed in your<meta> tags.
For each keystroke, headless chromium is used to render an HTML page and take a screenshot of the result which gets cached.
The Creative Commons team is committed to fostering a welcoming community.This project and all other Creative Commons open source projects are governedby ourCode of Conduct. Please report unacceptablebehavior toconduct@creativecommons.orgper ourreporting guidelines.
SeeCONTRIBUTING.md.
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>.
TheOpen 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><metaproperty="og:image"content="https://cc-og-image.vercel.app/Hello%20World.png"/></head>
The short answer is that it would take a long time to painstakingly design an image for every single blog post and every single documentation page. And we don't want the exact same image for every blog post because that wouldn't make the article stand out when it was shared to Twitter.
That's wherecc-og-image.vercel.app comes in. We can simply pass the title of our blog post to our generator service and it will generate the image for us on the fly!
It looks like the following:
<head><title>Hello World</title><metaproperty="og:image"content="https://cc-og-image.vercel.app/Hello%20World.png"/></head>
Now try changing the textHello%20World 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_OF_FORKED_REPO_HERE - Change directory with
cd og-image - Make changes by swapping out images, changing colors, etc (seecontributing for more info)
- Hobby plan users will need to remove all configuration inside
vercel.jsonbesidesrewrites - Run locally with
vercel devand visitlocalhost:3000 (if nothing happens, runnpm install -g vercel) - Deploy to the cloud by running
verceland you'll get a unique URL - SetupGitHub to autodeploy on push
If you are using a paid plan, you can do a one-click deploy with the button below.
Once you have an image generator that sparks joy, you can setupautomatic GitHub deployments so that pushing to main will deploy to production! 🚀
This is a fork of the lovelyOpen Graph Image Generator created byVercel. Special thanks to their clearly-written and reuse-friendly repository!
About
An open graph image generator for Creative Commons projects.
Topics
Resources
License
Code of conduct
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.