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.
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: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" />
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: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
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.
We are in the process of creating a plugin that adds
We are working to add more templates and customization options.