We developed a web app using React for the front end and Ruby on Rails for the back end. Having the need to share the pages (those of videos and activities) on social media: Whatsapp, Facebook, X but above all LinkedIn we have inserted the meta tags in the head of the page.

React is a Single Page Application and when I paste the URL of the page into Whatsapp its bot retrieves the page but does not run any script, therefore it will not have any Open Graph tag (eg): the title will be the one defined by the title tag, the description from the meta description tag and will not have any preview image.

Then we introduced buttons to share the page to which we assigned a slightly different URL pointing to a passing page served by the Ruby on Rails framework (Server Side Rendering approach):

An example better explains the mechanism:
Resource: https://www.openlabdigital.com/education?video=primo-canvas
Share URL: https://link.openlabdigital.com/education?video=primo-canvas
After 1500 ms you are automatically redirected to the resource page.

The pass page (which differs from the original page only for the link subdomain) includes the meta Open Graph tags with the title, description, image, and url properties. This mechanism correctly solves the preview of Whatsapp and that of Facebook.

We’ve added the twitter:title , twitter:description and twitter:image tags to correct the operation with X.

The operation with LinkedIn has been much more complex and has not yet been resolved.

LinkedIn provides an Inspector: Post Inspector very useful that “can help you identify the data missing on your page, and what you need to add for your content to have better previews in posts”. Meta also provides a similar tool: Sharing Debugger – Meta for Developers

The first thing that catches the eye is the difference between fetched URL ( https://link... ) and canonical URL ( https://www... ) , it looks like the bot ends up on the second page, it’s not clear why. For Meta, the Canonical URL remains the same as the Fetched URL. To overcome this unexpected behavior, we have introduced the following tag to force the canonical URL:
<link rel="canonical" href="https://link.openlabdigital.com/education?video=primo-canvas" />

But in vain.

Maybe the bot runs the script and redirects to the page with subdomain www . Then we intercept the LinkedIn User Agent and prevent the Javascript code that makes the redirect from being inserted on the page.

<% if Rails.env.production? && !@linkedinbot %>
  <script>
    // redirect after 1.5 seconds
    setTimeout(function() {
      window.location.href = "<%= @destination %>";
    }, 1500);
  </script>
<% end %>

It doesn’t change anything.

We see that LinkedIn alternately uses oEmbed to create previews (Troubleshooting issues sharing URLs) so let’s try to insert a mechanism that makes the oEmbed tag available in json format.

Lost time.

Let’s add configurations to CORS. We injected meta tags into the React app.

All in vain.

Why does the LinkedIn bot always end up analyzing the canonical page (the one with the subdomain www ) instead of the requested one (the one with the subdomain www )?
How do I make the preview of shared web pages on LinkedIn work properly? Are we ignoring something?

The web app is published with the links I shared earlier. Any suggestions are welcome.