Automatic preview image based on screenshot

by @edent | # # # | 3 comments | Read ~535 times.

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="http://example.com/preview.png"/>

(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.

<meta
 property="og:image"
 content="https://s0.wordpress.com/mshots/v1/https%3A%2F%2Fshkspr.mobi%2Fblog%2F?w=480&h480"
/>

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. Mike says:

    I tried this with the BBC News website
    https://s0.wordpress.com/mshots/v1/https%3A%2F%2Fwww.bbc.co.uk%2Fnews?w=480&h480
    The screenshot I get shows different stories to what I see if I view the website in a web browser. I'm in the UK. I guess the screenshot shows what the BBC News website looks like to Wordpress servers in the US.

  2. 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. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.