Angular- How display the content of dynamic meta tags on a link shared on facebook?
Asked Answered
E

1

3

Does anyone know how to display link previews on facebook with image and description? I have followed this guide to have dynamic meta tags depending on the URL (https://www.tektutorialshub.com/.../dynamic-meta-tags-in.../). I checked the browser console and indeed, the meta tags change depending on the URL, but when I share a link on facebook (a URL other than the landing page), it only shows (in the link preview) the info of the tags that I have set by default on index.html as if I had shared the landing page rather another URL (when it should show me the corresponding URL information). My code is pretty much exactly like the one in the link and here are some pictures to illustrate this:

This is the landing page. Notice the meta tags. enter image description here

Now, this is another URL, /first, notice how the meta tags have changed because it's another URL. enter image description here

But when I share the "/first" URL on facebook, using the facebook sharing debugger, I get a link preview that shows the data from the default meta tags (title, image, description) that I have on index.html (the root URL) rather than showing what's on /first.

Any idea what could be the issue or do you have an alternative workaround?

Eth answered 30/11, 2021 at 19:14 Comment(1)
Facebook don't execute Javascript. You need to include the tags in the HTML you send Facebook so you need to do server side renderingStringer
S
1

As WizKid mentioned, crawlers won't execute JavaScript. If you right click on your page and do 'View Page Source', you will see what's being rendered by the server.

Similar to the index page for your app, you need to create an index page for all of your paths and put them in their respective folders on your web server. Luckily, Angular has created Angular Universal which has the command 'npm run prerender' that will build the index pages for you.

However, if you have dynamic routes, you will have to get all of the routes Angular should prerender separately.

Another option is to go with something like prerender.io that will create the cached pages for you when someone visits your site.

Suck answered 1/12, 2021 at 1:30 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.