seo Question posted in
Some basic information to get you started with this can be found here.

Seo – Is there a way to dynamically update og meta tags in angular

I have an ecom angular website and I want to allow users to share products using WhatsApp. The content is generated dynamically from REST API. Therefore I used the angular Meta class in my component.ts file to update the default meta tag property in index.html with the dynamic content.

when I navigate the URL to the specific page which I want to update the og meta tag. the meta tag was added in DOM. but when I share the same page URL to WhatsApp. the dynamic content like the product image and description does not appear. Example product URL: https://www.kekouda.com/#/products/dtl/2075/3509

I have read a lot of suggestions ((1)server side – I don’t want to move to server side, (2) using proxy/cache servers – I am not sure I like this one- it does not seem to be free). I just can’t seem to find any straightforward solution out there. Please help.

Tags:

2

Answers


  1. 0

    You need to understand how such things work: If you share a link so WhatsApp (in your case) will be look to the link and see the "index.html" which has its one content and meta data. WhatsApp (and all other apps/sites they show such a preview) do not run the javascript part and waiting for your app to render some content (single page). They only see the first rendered html.
    Thats the problem. You changing the meta and the content but the first rendered index.html is the important part.

    With server side rendering (Angular Universal) will the index.html are rendered any time you call it (or any app/site call it) and the meta data will be set before the app/site can read it. So your meta data and content will be present.

    If you wanna do such things you need to use Angular Univeral.

    Super easy to use

    By the way: backup your project is always a good idea

    Add universal

    ng add @nguniversal/express-engine

    Enable client hydration

    import {provideClientHydration} from '@angular/platform-browser';
// ...

@NgModule({
  // ...
  providers: [ provideClientHydration() ],  // add this line
  bootstrap: [ AppComponent ]
})
export class AppModule {
  // ...
}

    Run your app and feel the power of ssr!

    npm run dev:ssr

    Read all about that here.

    Login or Signup to reply.
  2. 0

    Mr. Flo is right. I spent a lot of time (3 days) trying to trick Angular but to no avail. It doesn’t matter when you change the meta tags. WhatsApp still takes data from here: View page Source
    [1]: https://i.sstatic.net/02KMWqCY.png
    And this data we take from the first rendered.
    So, in my case, I need to communicate with the client if he wants to update project from angular v12 to v17 and will use Angular Univeral

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search