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

[twerske]

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.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[DaSchTour]

I think there is a lot missing in this proposal. There is already the Meta Service https://angular.io/api/platform-browser/Meta to allow setting metatags. And I doubt the static tags and descriptions will be useful for most use cases.
It's also totally unclear how the metatags as a list of strings should work, as that's to little data to get proper metatags.

I also have the feeling that routes get cluttered with a lot of stuff. When seeing this I'm not sure if it's a good idea to have title so prominent in the routes and seperated from all other SEO meta stuff. Probably it would be better to have a titleMetaDescription resolver that handles everything together, because it can be expected that they will have some stuff in common.

[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.

[realtomaszkula]

I think having a declarative way of setting the meta tags would go a long way of making the SEO story in Angular more compelling. Now that we can already set the title this way, having an option to do the same for tags seems like the logical next step.

There is already the Meta Service https://angular.io/api/platform-browser/Meta to allow setting metatags. And I doubt the static tags and descriptions will be useful for most use cases.

For simple pages like home page or about page you could set it statically:

{ path: 'about', title: 'About Page', metaDescription: 'My awesome About Page' }

For more dynamic pages like product pages, you would provide a custom resolver:

{ path: 'product/:id', title: TitleResolver, metaDescription: MetaResolver }

While I understand that there is a risk of routes config getting cluttered with too many properties, from my point of view, setting both title and meta tags, seems very much related to routing. Most of the time you set both title and meta tags when you navigate to a page, and you update them when you navigate to the a different one.

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.

That is a very valid concern, but I believe that solving a common pain point for many developers is something that we should strive for.

Also, there seems to be a rather large group of people on social media saying that "Angular is only for admin panels and internal apps". I don't agree with that, and I think that shipping some new features that improve the DX for public/search discovered apps, could help shift that perception.

[DaSchTour]

Still I think that instead of adding this as separate properties you think something like {meta: MetaResolver} would be a lot more convenient. If you have to write a resolver for every property that probably all have a lot in common is very ugly.

[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

[robertIsaac]

I can do this one if there is agreement on the approach
I think it should be similar to title but instead of taking string to take MetaDefinition[]
so the route will look like

  {
    path: 'home',
    component: HomeComponent,
    title: 'Home',
    tags: [{ name: 'description', content: 'Home page'}, { name: 'keywords', content: 'home, page'}],
  },

and internally to call updateTag when the route changes

question: should we add TagsStrategy just like TitleStrategy?

[DaSchTour]

That looks a lot better as it will also allow to set any meta tags instead of a small defined set. This will make it a lot easier to provide the meta data used for share previous in facebook, twitter and similar services.