Auto-generated Link Preview

Link Previews on social media apps & websites like Twitter, Facebook etc. make your links more clickable and noticeable.

However, to create an attractive image for the link preview for each webpage is still hard and time consuming. Many of us also may not have necessary skills or access to tools to create the image to embed. Soopr simplifies this process - it uses information already available in the webpage and creates a beautiful image that can be used for link preview.

Open Graph Meta Tags

To add a link preview to your website or blog, you need to add what are known as Open Graph meta tags. Here is how one of my blog posts looks like when shared on Twitter.

Open Graph meta tags are HTML tags that decide how links (also called URLs) are displayed on social media. They were first introduced by Facebook and all social media websites honour them.

Here is an example of Open Graph meta tags (og tags) from the same post:

<meta property="og:title" content="Why build Static Websites?" /> 
<meta property="og:description" content="My thoughts on developing good websites while keeping manageability, performance, and SEO in mind" />
<meta property="og:url" content="https://www.abhinav.co/static-websites" />
<meta property="og:site_name" content="Abhinav Saxena" /> 

Take a note on meta property og:image - it specifies the URL of an image that is used by social media websites to show the link preview. In addition, there are other properties like og:title and og:description which are also used.

Twitter also lets you specify kind of card you want to use - one of them is summary_large_image which, as its name suggests, shows large summary card on Twitter.

<meta name="twitter:card" content="summary_large_image" />

How to auto-generate Link Previews using Soopr?

Soopr can help you automatically generate a good looking image for the link. If you have already added Soopr SDK on your page, you can automatically generates the image using og:image meta tag.

<meta property="og:image" content="https://soopr.xyz/images/card?url=https://www.abhinav.co/static-websites" />

If you pass your link/url inside url parameter in the end-point https://soopr.xyz/images/card an image that can be used for link preview is automatically generated.

Soopr uses meta tags like og:title, og:description, og:url and og:site_name to extract necessary information and provides a specific end-point that can create image for the link preview.

As an example https://soopr.xyz/images/card?url=https://www.abhinav.co/static-websites will give you an image using information available on the page https://www.abhinav.co/static-websites

For Jekyll Users

Jekyll users can use our plugin jekyll-soopr-seo-tag to automatically generate most of these tags and automatically add og:image tag with Soopr link preview image. Please see jekyll-soopr-seo-tag on how to use it.

For Wordpress Users

We are in the process of creating a plugin that adds og:image automatically.

Coming Soon

We are working to add more templates and customization options.