Automatic preview image based on screenshot

When you share a URl on services like Twitter and WhatsApp, they often display a preview image.

This is usually accomplished by the author of the page selecting an image from the page, and adding it to the Page's metadata like this:

<meta property="og:image" content=""/>

(See the OpenGraph Protocol and Twitter's Guide for more detailed information.)

But not every page has an obvious "hero" image. You can use the same default icon for all previews - but that looks a bit dull.

How can we automate a screenshot of the current page?

There are dozens of screenshot APIs

I quite like WordPress's free mShots API. A simple URl to generate a screenshot, it looks something like this.


So, there you have it. If you have a page which doesn't have an obvious shareable image, you can use a single line of code to show a screenshot of the page. I hope that's useful!

3 thoughts on “Automatic preview image based on screenshot

  1. Unfortunately, this doesn't seem to work with Facebook.

    When testing a URL using this as og:image, the Facebook Debugger returns no image and if we insist on performing the test two or three times we get "This webpage contains a blocked URL".

    Maybe Facebook doesn't want to fetch images from this service, or maybe the service is blocking the Facebook crawlers.

Leave a Reply

Your email address will not be published.

%d bloggers like this: