How to make a link preview 🤩

#opensource #news #webdev #link

Introduction 😊

Today we are diving into a particularly interesting program. We will be discussing link preview.

For long ago I've been noticing on some social media and apps a small preview of what awaits us in case we click or decide to follow the link, and others not having anything to preview. This has caused a set of variations on the different aspects of this link preview. Without turning around the boring story, let's go through our program.

What is a link preview 🤔

Whenever on social media you add a URL, or when you receive an email message with a URL in the body, you'll see a rich preview that includes a link title, thumbnail image, domain, and description of the link. This is called a link preview.

Below is a clear example of such.

![Image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642981706422/sch3CcsXG.png)

History of the link🧓

In 2010, Facebook launched the Open Graph protocol, which is now managed by the Open Web Foundation. The main purpose is easier integration between Facebook and other websites. The Open Graph Protocol allows controlling what information is used when a website is shared. If websites want to use Open Graph Protocol, they need to have Open Graph meta tags in the <head> part of the website’s code. Later run some other platforms such as LinkedIn, Twitter gradually started following the idea.

How is it implemented? 🥲

For all my fellow HTML programmers and web development newbies not aware of how powerful the <head> tag together with <meta> are.
The implementation of our cute link previews is done using this.

Below are the following Open Graph attributes we'll use in generating a web link preview.

1. Open Graph Title

This tag has no restrictions as concerned with the words count works the same as the meta <title> tag. It allows you to define the content’s title. If Facebook doesn’t find the og: title tag, it uses the meta <title> instead and for Twitter, we use twitter: title This tag is very important because <title> is usually shown in bold.

Example :

<head>
      <meta name="title" 
            content="Yokwejuste's Portfolio">
           ...

2. Open Graph Description

This tag is again similar to the <meta> tag description. This is where you describe the website’s content. Similar rules apply to this tag as for the <title> tag. If a social network robot cannot find the og: description tag, it uses meta description and there is no limit on the number of characters. In this case, you should use around 200 letters.

Examples:

<head>
      <meta name="description" 
            content="I wanna leave in the open-source way!😅">
           ...

3. Open Graph Image

An image is probably the most eye-catching element in the link preview. You can define an image with the og: image title. Recommended resolution is 1200 pixels x 627 pixels (1.91/1 ratio) and image size shouldn’t exceed 5MB.

Example:

<head>
      <meta property="og:image" 
            content="https://avatars.githubusercontent.com/u/71908316?v=4">
          ...

4. Open Graph Url

This tag defines the canonical URL for your page. URL provided is not shown on the Facebook newsfeed, only the domain is visible.

A complete list of og tags available can be found on the Open Graph website

Example:

<head>
      <meta property="og:url" content="https://go-records.me">
     ...

Other minor `og` tags include :

og: audio: A URL to an audio file to accompany this object.
g: description: A one to two-sentence description of your object.
og: determiner: The word that appears before this object's title in a sentence. An enum of (a, an, the, " ", auto). If auto is chosen, the consumer of your data should choose between "a" or "an". Default is " " (blank).
og: locale: The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
`og:locale: alternate: An array of other locales this page is available in.
og:site_name: If your object is part of a larger website, the name should be displayed for the overall site. e.g., "IMDb". og:video: A URL to a video file that complements this object.