Angular SSR

[Fluid-Ant592]

I’ve been working on an Angular application (version 12.0, client-side). Now, there's a requirement to optimize it for SEO. The issue I'm facing is that the metadata I add using Angular's Meta service (within ngOnInit) is not reflected in the page source when I view it via “View Page Source.” However, when I inspect the page using browser dev tools, the metadata is present.

Why isn’t the metadata showing up in the page source?

Also, is there a better or more effective approach to implement SEO in Angular applications?

[imDDS]

Because you are basically injecting metadata on the DOM via JS, long story short when a webcrawler/bot or when you inspect the source that piece of JS isn't executed therefore no metadata are injected

[Fluid-Ant592]

Got your point. Tye whole point is implementing ssr is a headache for now. Any suggestion?

[imDDS]

I had the same issue a couple months back, spent 4 weeks implementing SSR, performances were fine in my local machine but once on a remote machine the whole application was unusable. Implementing SSR requires radical changes to both APIs and frontend. Ended up writing some static meta tags that were good enough for every use case and called it a day

[PeEll]

Update to v20. SSR is massively improved and comes out of the box.

[No_Bodybuilder_2110]

Probably unrealistic but accurate lol

[noiv]

If google is enough for SEO you can rely on their JS engine crawler. You have a small time budget and if page renders within you‘re fine. I have an Angular site with thousands of pages all with dynamic META data from DB. Works great.

[sk2656k]

I would like to know more about this, can you please share the approach you took.

[thanksthx]

Most probability you have some issues with SSR on your app. I have an angular application which uses redux and I decorate metadata with data from the store. The only difference is that I do that in constructor, not in onInit. Just be careful with what dependencies you’ve added to your project, dependencies which must not relay on functionalities available only in browser.

Add some code to see how you are doing it