IBM / pwa-lit-template

A template for building Progressive Web Applications using Lit and Vaadin Router.

Home Page:https://pwa-lit-template.mybluemix.net

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Document the SEO related stuff

abdonrd opened this issue · comments

  • The page-not-found.ts add the render:status_code

  • The page-element.ts update the HTML meta tags based on the route metatada property. Also the user can override the metadata() method to use dynamic data.

  • The renderPageNotFound helper. The user can use this helper in the render() method in a page. For example, in a user route when the user doesn't exists. We will know that the user does not exist after making the request to the API.

    Related Vaadin Router issue: vaadin/router#408

The renderPageNotFound helper. The user can use this helper in the render() method in a page. For example, in a user route when the user doesn't exists. We will know that the user does not exist after making the request to the API.

One thing to consider is that navigation should probably still point to the correct page, see the example:

notfound

As you can see, unlike the 404 page, user still has the visual context (the "dashboard" view is active).

This can be achieved differently, depending on the way the app is implemented:

  1. If the app shell with navigation is outside the router outlet, then you can use renderPageNotFound as you do.
  2. If every view is responsible of rendering navigation, then "page not found" should be rendered by the view itself.

In the above example (the app I used to work on), the second approach is used. IMO it is more flexible, because it allows to use different layouts, e.g. with or without drawer, depending on the view - for example, in case of unauthorised user.