Ad

AngularJS Metadata With Dynamic Async Content

- 1 answer

I have an angular application running within a .net application and I am trying to implement meta tags for SEO and other purposes. The problem I'm having is that I don't know the page title etc until after a call to an external site.

For example, a URL I might navigate to is www.mywebsite.com/people/1234. This would make a call to www.apiwebsite.com/api/person/get?id=1234 which will then return information such as name to be used in the title of the page and other important metadata.

The problem here is while this works from a users perspective, crawlers and open grid won't wait for that information and so only the websites default metadata is visible.

I have looked at server side rendering for angularjs (angular 1) as an option but was unable to find anything usable, is anyone familiar with something I can use to ensure the correct data for the page is provided to search engines etc?

Ad

Answer

Depending on your application and requirements there are a few ways of doing this.

  1. You can use a service such as prerender.io
  2. You can setup rendertron or puppeteer to prerender your pages
  3. In case you upgrade to Angular 6+, you can use Angular Universal

I have used puppeteer as a build step, when most of the important information wasn't too dynamic and that worked really well. A bunch of people seem to be pretty happy with Rendertron and prerender.io, too.

Ad
source: stackoverflow.com
Ad