feat(router): Add `Route.metatags` and `Route.pageDescription` to Route definitions

Which @angular/* package(s) are relevant/releated to the feature request?

@angular/router

Description

As a follow up to #7630 it would be nice to also add both metatags and pageDescription to the router’s definition API in order to streamline how developers define routes.

We can also explore what other data is commonly defined and managed with custom strategies in the Route.data property to see how else we could simplify Route definitions especially for new developers.

Proposed solution

const routes : Routes = {
  path: '', 
  title: 'Angular Home Page', 
  metatags: ['home', 'angular'],
  pageDescription: 'Home page for Angular documentation',
  children: [
    {path: 'about', title: 'About Angular', metatags: ['info', 'about'], pageDescription: 'About page for Angular documentation',},
    {path: 'docs/:param', title: TitleResolver, metatags: MetatagResolver, pageDescription: PageDescriptionResolver}
  ]
};

Alternatives considered

Currently this is individually managed and already possible with the Route.data additional attributes, which works but is more work for the developer and does not enforce best practices.

[lacolaco]

I agree this feature would reduce COMMON efforts of developers, but my concern is the responsibility of routes. A route is not corresponding to the specific “page”. There are more variable usecases of Router, for example multiple router-outlets. I think adding meta or pageDescription fields to Route would mean Route is a model to represent a page. That may become a limitation for some of usecases. I think we need to discuss more about the essential mental model of Route.

Or, we just want to a customizable generic (no rxjs) callback place to update page information where we can manage title, meta and etc on the successful route change.

[fabioemoutinho]

I love this idea. I was taking a look at best SEO practices and saw the new title feature for routes, which I guess was also added for improved SEO and/or a11y. I think meta tags make a lot of sense, thanks @twerske, I hope the proposal makes it into Angular in the future! I wonder if structured data as JSON/LD could also be considered: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data