AngularJS Metadata with dynamic async content

Question

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?

geekonaut · Accepted Answer · 2018-08-25 08:30:07Z

0

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

You can use a service such as prerender.io
You can setup rendertron or puppeteer to prerender your pages
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.

answered Aug 25, 2018 at 8:30

geekonaut

5,9542 gold badges32 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS Metadata with dynamic async content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related