Previews of external links using open-graph data

Summary

I'd like to show previews of external websites on my Webflow pages, similar to what you see when you share a link on social media or in chat programs.


As is

Currently when I add a link that leads to an external website, I have the following options:

  • Display the URL of the link

  • Link any text I want

  • Link any image I want

That's it. There is one option missing, though...


To be

What I would like to have when I add links of external websites to any of my Webflow pages is this:

  • A box with a preview of the external website, showing its title, description, image, and URL.

  • The data should be fetched from the og properties (as defined in the open graph protocol) set in the <head> of the linked web page

  • As a fallback, the meta title and description could be used.

  • Tilman Büttner
  • Sep 12 2023