Automatic preview image based on screenshot
HTML5 Social Media web · 3 comments · 250 words · read ~622 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:
HTML
<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!
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.
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.