Link Previewer Component
Question

Hi All,

I am trying to create some logic that grabs and presents the metadata that is available for a link that is provided.  This is widely used on social media platforms like Facebook and Linked in as per the image attached.  Is anyone aware of a component or example logic that achieves this that we could leverage? 

Screenshot20210722100012.png

mvp_badge
MVP

Hi Daniel,


You need to use SEO tags for this, namely the Open Graph tags. You can read in more detail the use of this tags in this article.

To use it in OutSystems, you can make use of the SEO Utils on Steroids forge components.

Just take into account that if you are developing a Reactive application, Facebook crawlers may have trouble reading these tags due to the fact that Reactive applications are single page applications. You can read in more detail here.


Kind Regards,
João

Thanks Joao, i am actually looking to be the "Facebook side" of the challenge and reading from other sites in a way that is structured and automated.  I think https://www.outsystems.com/forge/component_overview.aspx?projectid=6733&projectname=social-sharing-tags& was shared in a previous comment on here that might solve this as well.

Handy to understand how we can make sure our OutSystems apps can be leveraged by this logic as well though thank you!

mvp_badge
MVP

Hi Daniel,


Facebook (and others) will present this format if, when crawling the URL, identifies the instructions - open graph meta tags in the HTML - to display it differently. So, in the end, it's up to the pages / applications to provide these instructions / tags on how they should be displayed when shared on social media.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.