4 min read🌟Reviews
Exited founder (Officient). Now building MagicSpace SEO, LinkDR, AI SEO Tracker, and GenPPT.
Newsletter
Get weekly insights on reviews
Exited founder (Officient). Now building MagicSpace SEO, LinkDR, AI SEO Tracker, and GenPPT.
Get weekly insights on reviews
Sometimes you notice a piece of software that is so simple but yet so useful. ScreenshotOne is one of those tools and I couldn't be more excited in using it. It solves a lot of real pains for me as a developer and SEO consultant. With over 5,000 screenshots taken so far, ScreenshotOne saves me tons of time while delivering reliable, high-quality results.
The best tools, are those that make you money when using them, for me this was when I adopted ScreenshotOne into my OG Image Generator, it was an easy setup, and now my social preview images are nice and clean screenshot of the page, without just being blank or a random image.
Let's dive into what ScreenshotOne is, and how I'm using it.
ScreenshotOne is a screenshot API that allows developers to capture screenshots of websites. It can create full page screenshots, customize rendering with things like dark mode and hiding elements, and output in different image formats.
The API is fast, scalable, and handles edge cases like lazy loading and complex cookie consent banners automatically.
Some of the key features I appreciate are:
I've been using ScreenshotOne for a few months now and I'm really happy with it. All together, I've taken more than 5,000 screenshots with it and currently I'm taking between 30 to 50 screenshots per day.
I integrated ScreenshotOne into my OG Image Generator to dynamically capture screenshots for social link previews. It was a quick 10 minute setup.
Now when links to my site are shared, the screenshot reflects the actual content instead of a generic image. This results in higher click-through rates. Here are some examples:
And the code for this is as simple as using vercel/og and making an <img> tag with the src attribute set to the ScreenshotOne API URL. Take a look at the code below to see how we use it together with Next.js's opengraph-image routes.
You can also combine it with other elements, like a title or other elements, to create a Twitter link preview card. Here's an example:
This can be as simple as adding a <h1> tag to your OG Image in Next.js, and using ScreenShotOne's API to generate the image below it.
Here is the code for this:
<div tw="flex flex-col items-center justify-end w-full h-full text-center text-[#282d33]">
<h1 tw="mb-8 font-black text-5xl">A great example of a title</h1>
<img
tw="rounded-t-2xl shadow-2xl"
src={`https://api.screenshotone.com/take?url=https://il.ly`}
height={500}
width={1200}
/>
</div>You can use ScreenshotOne for a lot more than just generating social link previews. Here are some other use cases:
The use cases are endless. Anywhere you need fresh, high-quality website screenshots, ScreenshotOne delivers. Their API takes care of all the complexity so you can focus on building your application.
I highly recommend giving ScreenshotOne a try if you haven't already. It's one of those developer tools that feels like cheating because it makes hard things easy. And it has the reliability and support of a premium product, at an indie developer friendly price.
Get 100 free screenshots per month with no credit card required.
Get Started5
ScreenshotOne is a powerful tool for generating high-quality website screenshots. It's easy to use, reliable, and offers a developer-friendly API.
Pros: