Server-side Metadata for SEO

[levarcooper]

The Angular2 Demo Application does not update the title page. It displays "Home" for each view. I used the SetTitle property as explained in the Angular2 documentation but I believe the function references the document. Running it with an isBrowser conditional inside of ngOnInit works for aesthetics but search engines wouldn't detect the changes. What's the best way to update the metadata server-side?

[MarkPieszak]

Unfortunately, at the moment you'll need to just create your own interface to handle this like you can see below (angular/universal#309 (comment))

Eventually I believe the regular Title service will work for both once universal is moved into ng Core itself.

This method below currently isn't working, we're looking into adding some Lifecycle hooks to potential add in the upcoming 2.4 release of Universal (a bug fix release before the eventual move to Angular Core)

import { Injectable, Inject, ElementRef, Renderer } from '@angular/core'
import { DOCUMENT } from '@angular/platform-browser'

For now you can something like this:

@Injectable()
~~export class TitleService { ~~
constructor (@Inject(DOCUMENT) private document) {}

setTitle (title: string) {
this.document.title = title
}

getTitle () {
return this.document.title;
}
}

[SteveSandersonMS]

Thanks @MarkPieszak!

[levarcooper]

Thanks for the reply, Mark. This seems to be similar to the Title service in angular 2 (client-side). Perhaps there's a problem with my implementation? Here's an example of what I'm doing app.component.ts after importing the service to app.module.ts and adding it to the providers array:
`export class AppComponent implements OnInit {
meta;
constructor(private _router: Router, private _activatedRoute: ActivatedRoute, private _metaService: MetaService) { }

ngOnInit() {
    //this._metaService.setTitle('Title Test');  /* doesn't work */
    if (isBrowser) {
        this._metaService.setTitle('Title Test');  /* works */
    }
}

}`
The code above gets the job done... sort of. It works, but non-javascript browsers and more importantly, search crawlers don't see the change to the title page.

[MarkPieszak]

Hmm this might be an issue with the .NET integration (since we're not getting the whole document, but rather just <app></app>, let me take a look tomorrow and see if I can get back to you with more info! @levarcooper

[levarcooper]

Thanks @MarkPieszak

[MarkPieszak]

@levarcooper So this is currently broken, and I'm hoping we can get in a Universal 2.4 version in sometime before the attempted merge into Angular Core. Maybe we'll be able to get a lifecycle hook or something in there temporarily in that release.
I'll keep you posted!

[MarkPieszak]

@SteveSandersonMS Should we keep this one open for now?
(The way above won't work anymore)
It's not possible to be achieved at the moment without some workarounds most devs wouldn't be aware of.

We're looking into adding some Lifecycle hooks to be potentially added in the upcoming 2.4 release of Universal (a bug fix release before the eventual move to Angular Core)

[levarcooper]

@MarkPieszak, do you have more info about the workarounds you eluded to above. I was considering trying to pass javascript variables into the viewdata. Are there any known approaches that allow angular to communicate with dotnet at runtime?

[MarkPieszak]

Are you talking about passing it from .NET over to the front-end? @levarcooper

https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#3-supplying-javascript-code-to-perform-prerendering