Building A Beautiful Link Preview With Web Components
Tags: javascript, webdev, programming, webcomponents
Published: 2022-08-29 14:43:00


### Fetching Open Graph Data from URLs to show a thumbnail preview

![Web Highlights Link Preview Component](https://cdn-images-1.medium.com/max/4216/1*ZKEBdcwrjef7hgkv9lx0vw.png)

*This article was originally posted on the [Web Highlights blog](https://web-highlights.com/blog/). You can find it [here](https://web-highlights.com/blog/building-a-beautiful-link-preview-with-web-components/).*

Recently, I improved the design of my [Web Highlights](https://web-highlights.com/) app's dashboard by showing a link preview for each highlighted page. Here is what the new design looks like:

![[Web Highlights](http://web-highlights.com/)** **dashboard](https://cdn-images-1.medium.com/max/5840/1*1PKEfbejvmunHMQk3rCvUQ.png)

In this article, I want to share how to create such a link preview component and make web pages appear with a thumbnail.

If you follow my articles, you will probably know that I am a big fan of **Web Components**. So, of course, I built this component with Web Components as well.

For several reasons:

* I can use the component in the Vue.js web app as well as in the Web Component-based [Chrome Extension](https://chrome.google.com/webstore/detail/web-highlights-pdf-web-hi/hldjnlbobkdkghfidgoecgmklcemanhm).

* The architecture is better encapsulated

* Anyone can reuse the component

Suppose you are not yet convinced. Embedding the application is as easy as including these few lines of code in your web application:

{% gist https://gist.github.com/MariusBongarts/21e614d00a39ae3f2eb2bd182643f158 %}

You can find a [demo here](https://web-highlights.github.io/webhighlights-link-preview/). Here is also a [CodePen](https://codepen.io/marius2502/pen/zYWyPxe) showing how easy it is to use the link preview anywhere.

For the component's design, I followed a plain one as Medium does. The preview card contains a title, description, link, and preview image. Here is what the thumbnail preview component looks like:

![Link Preview Component](https://cdn-images-1.medium.com/max/2088/1*f6To7VWIueY7Rtcrg05S6A.png)

Furthermore, the component shows some **loading** indicators when fetching the open graph data from our API, which we will come to later.

![Link Preview Component loading state](https://cdn-images-1.medium.com/max/2000/1*5_drQ4Yo8J6Yf5GWte_4yQ.gif)

I will not go into detail about the CSS implementation in this article. But you can find the [Github repository here](https://github.com/Web-Highlights/webhighlights-link-preview). Feel free to check it out.

### Building the Web Component

To build this web component I created the custom element webhighlights-link-preview. To make development easier, I am using the [Lit library](https://medium.com/@mariusbongarts/build-your-own-blog-portfolio-with-web-components-lit-library-2701dffc735f) from Google.

We create our custom element by using Lit's customElement decorator and provide some reactive properties to make our element customizable by the client:

{% gist https://gist.github.com/MariusBongarts/0e6fa32c6d963605b696e96e39039339 %}

A client must provide a url for which we will fetch the open graph data from our API. Furthermore, one can provide an alternative apiUrl URL if you want to use a different API.

Not every website provides open graph meta data tags so that a client can provide some fallback data in case we can not find a **title**, **description**, or **image** for the given URL.

Furthermore, we need a reactive property that stores the fetched metadata for the corresponding URL:

{% gist https://gist.github.com/MariusBongarts/e07699bf3f48bf19b5e175f93b7e92b3 %}

The OpenGraphMetaData interface defines the object we expect to get back from the API. It looks like this:

{% gist https://gist.github.com/MariusBongarts/60a04bf62b39c3189e4f291027fe2d46 %}

So, if you wanted to create your own API, you would need to make your server response adapt to this OpenGraphMetaData interface and provide the URL of the endpoint within the components apiUrl property.

Furthermore, we need to know whether the component should show the text-loading indicators. In this case, we want to show it as long as our metaData property is undefined. To check this in the template, we create a simple getter:

{% gist https://gist.github.com/MariusBongarts/f816704ae0915812adbfde529b2bdde4 %}

Now, in the template, we can conditionally add some CSS classes to make our component show a loading state depending on whether the metaData is still being fetched from the server or has already been loaded:

{% gist https://gist.github.com/MariusBongarts/effdb9d6219156db7ba3b0957283e227 %}

## **Fetching Open Graph Data**

To get all the needed data for our preview, we must somehow fetch the Open Graph metadata tags from the corresponding URLs. If you are not familiar with the Open Graph protocol, you should check out this article first:

- [**Make Your Website Have a Beautiful Thumbnail Link Preview**](https://web-highlights.com/blog/turn-your-website-into-a-beautiful-thumbnail-link-preview/)

There is the possibility to get the necessary data using APIs like [OpenGraph.io](https://www.opengraph.io/). Using APIs like this, we wouldn't need to create a server to get the data. Unfortunately, most of those APIs have a limited amount of requests. OpenGraph.io, e.g., limits it to 100 requests.

As I don't want to pay anything to get Open Graph Data, I created a simple Netlify function that fetches Open Graph data using the open-source **openGraphScraper** library. This library is a simple node module for scraping Open Graph for any website.

In production, I am using the normal server environment for my [Web Highlights](http://web-highlights.com/) application as I also wanted to provide some server-side caching to decrease the loading time. But, for this example, a simple Netlify function should be fine.

We can get the Open Graph data for any URL by importing the ogs object from the library:

{% gist https://gist.github.com/MariusBongarts/695cf323140ec4c23b4094afbf3f8933 %}

And then fetch the data like this:

{% gist https://gist.github.com/MariusBongarts/3b954c787ac9031f72e21c2a6c288f3e %}

Afterward, we adapt the received SuccessResult interface to our expected OpenGraphMetaData interface by using an adapter function:

{% gist https://gist.github.com/MariusBongarts/ff5ad6734237c0e6e2f54cbeae12ed2d %}

Here is what the Netlify handler looks like:

{% gist https://gist.github.com/MariusBongarts/d59a998baf73af25f5703897fa5b89f2 %}

Now, in our frontend, we can get the needed metadata by fetching it from our endpoint:

{% gist https://gist.github.com/MariusBongarts/3e1d3b593d989ee52c47bf273636d58b %}

## Final Thoughts

Thanks for reading this article. I hope you could follow along to build your own link-preview component or reuse the one we created here. Notice that I can not guarantee that the provided Netlify API will be available forever. So, if you are planning to use this component in production, make sure to provide your own endpoint.

I am always happy to answer questions and am open to criticism. Feel free to contact me at any time! Get in touch with me via [LinkedIn](https://www.linkedin.com/in/marius-bongarts-6b3638171/), follow me on [Twitter](https://twitter.com/MariusBongarts), [Medium](https://medium.com/@mariusbongarts), or [subscribe](https://medium.com/subscribe/@mariusbongarts) to get my stories via email.


## About the Author

I am a Software Engineering Analyst at Accenture Song. What drives me the most is my urge to create something that has the potential to be helpful and life-changing for others.

For example, are you tired of browsing your history to find the information you saw a few days ago? My [Web Highlights Chrome Extension](https://chrome.google.com/webstore/detail/web-highlights-%20-bookmark/hldjnlbobkdkghfidgoecgmklcemanhm) got you covered and will boost your productivity by organising your research in a structured and efficient way. Just like you do on books and articles, highlight text on any web page or PDF. Your highlights sync directly to the web app on [web-highlights.com](https://web-highlights.com/), where you can find them from anywhere.