ReactJS: How can I change the link preview of a URL?

user_7122016 0
Viewed 10405

I don't know where to start with this, my default link preview for my site looks like this: enter image description here I don't know why it's displaying bootstrap and not what is in my site. This is the page I am trying to share:

enter image description here

so I was expecting that the link would have the image and the title(blacked out).

But on the good side, when you click on the bootstrap link, it will redirect to my page and not to bootstrap but still what I cannot get is why is it displaying bootstrap and not what is on the page? Where can I change it?

Thanks for the help.

reactjs javascript
4 Answers

Your problem is this line in your <head>:

<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">

This tells bots, web crawlers, and generally everyone that this page is exactly the same as https://getbootstrap.com/docs/4.0/examples/blog/. It even goes a step further and indicates that this is the proper URL for your page.

Most automated systems will stop parsing your page after seeing a <link rel="canonical"> tag and instead parse the linked page as though it was the current one. This is where Facebook et al. are getting the Bootstrap metadata from.

TL;DR: Remove this line.

For future reference, you can use Facebook’s Sharing Debugger to troubleshoot problems like this. For the given URL, this is the current result:

Facebook Sharing Debugger screenshot

Note the Canonical URL and Redirect Path fields, which indicate my above diagnosis.

user_18131690

You need to use something like react-helmet or react-meta-tags to set your <head> data correctly. The data you are looking to set would be openGraph data which can be found here.

user_12704070

Not sure if this is the answer you were looking for but I was searching for how to update the info your react app shows when you preview the link in some other app. Every solution I tried wasn't working with github pages and react (react-helmet, react-meta-tags, react-document-meta). What ended up working was that you can edit the index.html located inside the public folder to change this info. Include this somewhere in the head: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>IMDB</title>
    <meta property="og:audio" content="http://example.com/bond/theme.mp3" />
    <meta property="og:description" 
      content="Sean Connery found fame and fortune as the
               suave, sophisticated British agent, James Bond." />
    <meta property="og:determiner" content="the" />
    <meta property="og:locale" content="en_GB" />
    <meta property="og:locale:alternate" content="fr_FR" />
    <meta property="og:locale:alternate" content="es_ES" />
    <meta property="og:site_name" content="IMDb" />
    <meta property="og:video" content="http://example.com/bond/trailer.swf" />

Example from https://ogp.me/

user_53026550

You can also use the ogtag.me API that allows you to shorten your links dynamically and send the data you want it to display on social platforms and then use this shorten links in your share buttons.

user_137608310
Related