Link previews are a crucial feature on platforms like Facebook/Twitter/Whatsapp, offering users a glimpse of the content behind shared links. If you’ve ever shared a URL and seen a rich preview with a title, description, and image, you’ve likely wondered how this works under the hood. In this article, we explore the technical flow of how Facebook processes link previews and delivers them seamlessly to users.

1. User Action: Sharing a Link
When a user pastes a NDTV link into a Facebook post or comment, the process to generate a link preview begins immediately. Facebook aims to enhance the user experience by providing contextual information about the shared link.

2. Facebook’s Backend Fetches Metadata
As soon as the link is detected, Facebook’s servers initiate a metadata fetching process:

If no metadata is found, only the raw link is displayed.

Request to the URL Facebook’s backend makes an HTTP GET request to the shared NDTV URL.
The server retrieves the HTML content of the page.

Parsing the HTML:Facebook parses the page for Open Graph (OG) metadata tags, which are the preferred format for link previews. Here is the OG Code in the NDTV website.

<meta property="og:title" content="Rahul Gandhi Faces Delhi Police Crime Branch Probe Over Parliament Tussle"/>
        <meta property="og:type" content="article"/>
        <meta property="og:image" content="https://c.ndtvimg.com/2024-12/jfaoamt8_rahul-gandhi-with-bjp-mp-_625x300_19_December_24.jpg?im=FitAndFill,algorithm=dnn,width=1200,height=738"/>
        <meta property="og:image:secure_url" content="https://c.ndtvimg.com/2024-12/jfaoamt8_rahul-gandhi-with-bjp-mp-_625x300_19_December_24.jpg?im=FitAndFill,algorithm=dnn,width=1200,height=738?ver-20241030.100"/>
        <meta property="og:image:width" content="630"/>
        <meta property="og:image:height" content="473"/>
        <meta property="og:url" content="https://www.ndtv.com/india-news/rahul-gandhi-faces-delhi-police-crime-branch-probe-over-parliament-tussle-7296048"/>
        <meta property="og:site_name" content="NDTV.com"/>
        <meta property="og:description" content="The Crime Branch of the Delhi Police will investigate the FIR against Congress MP Rahul Gandhi, who has been accused of injuring two BJP MPs at the Parliament complex, an officer said on Friday."/>
        

Fallbacks:If OG tags are missing, Facebook falls back to other HTML elements like the <title> tag or <meta name="description"> tag.

3. Image and Metadata Processing:

Once Facebook’s servers fetch the metadata:

1. Image Handling:
   • The image URL specified in og:image is downloaded and processed.
   • Facebook may resize or compress the image for optimal display across devices.
2. Metadata Validation:
   • The metadata is sanitized to prevent injection attacks or malicious content.
   • Facebook ensures the preview adheres to its content policies.
3. Caching:
   • To improve performance, Facebook caches the metadata and image on its servers. This reduces the load on the original website and speeds up the preview generation for subsequent shares of the same link.

4. Displaying the Link Preview

Once the metadata and images are processed, the preview data is sent back to the Facebook client app (web or mobile):

1. Rendering the Preview:
   • The title, description, and image are displayed in the post composer.
   • Users can edit or remove the preview before posting.
2. Final Delivery:
   • When the post is published, the preview data (title, description, and image) is included in the post payload.
   • The preview is displayed to other users without needing to fetch the metadata again

Facebook’s link preview system is a sophisticated feature that enhances user experience by providing rich, informative previews of shared links. By leveraging Open Graph metadata, developers and content creators can ensure their links look professional and engaging when shared. Understanding this flow not only helps developers create better experiences but also demystifies the technical magic behind a seemingly simple feature.