Programming

What's the proper approach to implement external links preview in user-created content? [closed]

What's the proper way to generate and display a preview of external links in user-created content? Consider the following scenario in Angular application: User creates content (e.g. post, article) using WYSIWYG editor (e.g. Quill) User pastes a link, e.g. https://stackexchange.com Editor sends HTTP request to /opengraph which returns title, description and thumbnail of the link Editor builds HTML code of the preview and inserts it in place of the link The preview should look the same in the editor and in the post/article/etc. There may be multiple link previews in the post/article/etc. (not only one like on Facebook, Twitter). Questions: Should we store generated HTML code of the preview in database? Or instead, should we store plain HTTP links and the preview should be generated by JavaScript after opening editor or after opening post/article/etc.? Is it a good approach to create custom element or Angular component for displaying link preview, e.g. but this needs JavaScript to render (as the whole app)? This would allow to change the look of link preview in older posts but are there any cons or considerations of this approach? Should we store link metadata (e.g. title, description, URL and base64-encoded thumbnail image) in database? So should these information be hardcoded? Or instead, should /opengraph be queried on every render? The pros of this approach is that link metadata is always up-to-date. Third option is hybrid approach. How other WYSIWYG editors, bulletin boards, forums, portals generate and store external link previews? Can you recommend a good example of already properly implemented external link preview feature? How to make it safe and protect against abuse / DDoS / etc? Is is better approach to keep plain HTTP links untouched in post/article/etc. but store metadata of external links in another database table and dynamically create the preview with JavaScript? But, in the WYSIWYG editor (e.g. Quill), there is a need to display the live preview and return other HTML code (which is stored in database). Assume we want also previews of images, videos and other content like Twitter posts. I don't think that storing HTML code of a Twitter post is a good approach but maybe this is the way that most systems store these metadata?

Jan 16, 2025 - 17:32

What's the proper way to generate and display a preview of external links in user-created content?

Consider the following scenario in Angular application:

User creates content (e.g. post, article) using WYSIWYG editor (e.g. Quill)
User pastes a link, e.g. https://stackexchange.com
Editor sends HTTP request to /opengraph which returns title, description and thumbnail of the link
Editor builds HTML code of the preview and inserts it in place of the link
The preview should look the same in the editor and in the post/article/etc.

There may be multiple link previews in the post/article/etc. (not only one like on Facebook, Twitter).

Questions:

Should we store generated HTML code of the preview in database? Or instead, should we store plain HTTP links and the preview should be generated by JavaScript after opening editor or after opening post/article/etc.?
Is it a good approach to create custom element or Angular component for displaying link preview, e.g. but this needs JavaScript to render (as the whole app)? This would allow to change the look of link preview in older posts but are there any cons or considerations of this approach?
Should we store link metadata (e.g. title, description, URL and base64-encoded thumbnail image) in database? So should these information be hardcoded? Or instead, should /opengraph be queried on every render? The pros of this approach is that link metadata is always up-to-date. Third option is hybrid approach.
How other WYSIWYG editors, bulletin boards, forums, portals generate and store external link previews? Can you recommend a good example of already properly implemented external link preview feature?
How to make it safe and protect against abuse / DDoS / etc?
Is is better approach to keep plain HTTP links untouched in post/article/etc. but store metadata of external links in another database table and dynamically create the preview with JavaScript? But, in the WYSIWYG editor (e.g. Quill), there is a need to display the live preview and return other HTML code (which is stored in database).

Assume we want also previews of images, videos and other content like Twitter posts. I don't think that storing HTML code of a Twitter post is a good approach but maybe this is the way that most systems store these metadata?