Search code examples
httpsharelinkedin-apibotshttpresponse

How to prepare HTTP response body for unfurling of URL on LinkedIn?


"Unfurling is the technical term for what happens when you share a link on Twitter, Facebook, LinkedIn or Slack." (From the book: Designing Bots: Creating Conversational Experiences By Amir Shevat)

What spec does the HTTP response body have to conform to in order to enable unfurling the link on the LinkedIn ?


Solution

  • Unfurling works by the app being able to read the meta tags in the HTML head of your document at the specified URL.

    There are a few specs that most of the services you listed will use and/or fallback on, including og (opengraph) and twitter.

    Your HTML head needs to contains something like this (for opengraph)

    <meta property="og:url" content="your website url" />
    <meta property="og:title" content="the title that shows up in the unfurled preview" />
    <meta property="og:description" content="the description in the preview" />
    <meta property="og:image" content="the url of the image you want to show in the preview" />
    

    Note that if you are building an SPA or something that dynamically loads content based on route parameters, you'll need to do server side rendering or something that can serve the HTML statically, because the unfurl-er will not run the javascript that would add to the DOM.

    There is also something called oEmbed that is a standard for sharing meta data with other services. This would be a server that responds with JSON about the links you post. Slack primarily relies on oEmbed but will fall back on og or twitter tags if it isn't available.