How to use a page or website screenshot as an Open Graph image

Some people argue that using a screenshot of a page as an open graph image is a great idea that can increase traffic. That's why several SaaS options offer this service. For example, ScreenshotOne and Image.social. If you have tried them, you'll find that they are not so cheap.

I understand that it costs money to run this type of service. Capturing a screenshot involves using a real browser. And running a browser to capture tons of screenshots requires a lot of computational power.

But for small bloggers like me, I'm not sure if it's worth the money to use those services. Once a blog post is published, I just need to generate the screenshot of the page once. I think it's a waste of money to pay every month for something that I won't use too often. Not to mention that I have a computer that should be powerful enough to perform this task.

So, I created a CLI tool that can generate a screenshot of a URL, resize it to the recommended open graph image size (1200x630px), and save it to a file. It's called og-screenshots. It's open source and free to use. To use this tool, you need to have the following:

1. Node.js. You can download it from here.
2. Chrome browser. You can download it from here.
3. ImageMagick. You can download it from here or by installing it via Homebrew: brew install imagemagick.

Once you have the above tools installed, you can directly run it:

npx og-screenshots -u https://www.nico.fyi/

When the URL you provide with the -u flag is either a sitemap or an RSS feed, the tool will automatically generate open graph images for each page listed in the feed or sitemap!

The tool is still in beta, and I have tested it only on macOS to capture screenshots and generate open graph images for pages on this Next.js website during its development:

1. I run the website locally using bun dev which can be accessed at http://localhost:3000.
2. Open another terminal and run npx og-screenshots -u http://localhost:3000/sitemap.xml -o /path/to/repo/public/static/screenshots.
3. Update the generateMetadata function in the page.tsx file to use the generated open graph images.

Give it a try and let me know if you have any issues.

By the way, I'm making a book about Pull Requests Best Practices. Check it out!