Bookmarks are useful for providing a short summary of a linked website, or a nice preview.
This bookmark has a caption.
Bookmarks will be missing one ingredient, namely the favicon that is rendered in front of the URL in Notion.
We are also using a somewhat home-made solution to pull in the details about the page, so the text displayed in the bookmark may be different from what Notion displays.
To allow supporting bookmarks, we retrieve the linked page on the backend, and use various queries in the DOM to find the title, a suitable image, and a description.
To find the title and image, we search for OpenGraph, then Twitter meta tags. Finally we fall back to the HTML title and first image of the body if nothing can be found. For the description, we search OpenGraph and Twitter tags first.
The bookmark is a link with a bookmark class. Inside, you will find an img tag, an h4 tag, and two paragraphs with classes description and url.