Menu
I don't know where to start with this, my default link preview for my site looks like this:
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:
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.
705
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:
Note the Canonical URL and Redirect Path fields, which indicate my above diagnosis.
192
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.
20
answered Oct 31 '25 06:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
