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"/>
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!