Link Perview for different routes in angular

Question

Can some one please guide me with an angular issue. I have one scenario which I need to develop in angular 8, for every different URL (routing) we need link preview differently for example I am sharing some examples.

Please provide more details. It is not clear from your photo what you want to achieve. — SternK, May 18 '20 at 08:00
@SternK Angular 7/8 Social Share Link Preview. I am working on an Angular 7 & 8 application, which has a feature that generates different feedback form links based on different criteria's. So it can have hundreds link genrates What i want to do is make all these links rich in terms of social sharing i.e each link if pasted on a social media such as facebook , it should be able to have metadata specific to that form i.e all links will have different form names and descriptions. Each link specific data should be fetched when the link is pasted on facebook, twitter, etc. — Harendra Nishad, May 18 '20 at 08:08

score 0 · Answer 1 · answered May 18 '20 at 06:54

You can add og metatags in order to performer this task. In order to add a preview to your site link, you can add og meta tags to the index.htlm file like bellow. So that it will show a preview according to your data.

<head>
    <meta property="og:title" content="this is the title" />
    <meta property="og:description" content="this is the description" />
    <meta
      property="og:image"
      content="publicly avalibalbe url to your image"
    />
    <meta property="og:url" content="https://abc.lk/" />
    <meta property="fb:app_id" content="000001773503789" />
    <meta property="og:site_name" content="abc.com" />
<head>

You can use Facebook debugger tool in order to see the preview after adding these tags to the index.html page.

In order to set dynamic previews to the different pages of the app you can follow this article regarding angular meta tags.

if i will put meta tag in index.html then it will display same preview in my all different route pages ..but i want dynamicaly chnages on meta tag ,title description,umages also — Harendra Nishad, May 18 '20 at 07:34
Did you tried out the article https://www.digitalocean.com/community/tutorials/angular-meta-tags. — Kasunaz, May 18 '20 at 08:06
no i did not check this article.i will chck and let you know — Harendra Nishad, May 18 '20 at 08:18

score 0 · Answer 2 · answered Jul 01 '20 at 22:34

0

You need to either build a custom module or use a library to generate dynamic metadata per route. Consider using the library ngMeta.

Also check out a previous question about dynamically generating metadata using $routeProvider.

answered Jul 01 '20 at 22:34

TuanGeek

751
5
7

Link Perview for different routes in angular

2 Answers2