Link Perview for different routes in angular

1.3k Views Asked by Harendra Nishad At 19 April 2025 at 10:18

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.

Original Q&A

There are 2 best solutions below

Kasunaz On 18 May 2020 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.

TuanGeek On 01 July 2020 at 22:34

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.

Link Perview for different routes in angular

There are 2 best solutions below

Related Questions in ANGULAR

Related Questions in LINK-PREFETCH

Related Questions in API-LINKPREVIEW

Trending Questions

Popular # Hahtags

Popular Questions