How do you handle HTML Metadata in Progressive Web Apps (PWA)

Question

I'm trying to get my head around handling metadata in the head section of my html when writing a Progressive Web App (PWA). By metadata, I mean:

• title & description meta tags
• Atom feed link URL meta tag
• OpenSearch meta tag
• Google Structured Data
• Facebook OpenGraph
• Twitter Cards

Single Page App Shell

All of the metadata above is different for every page in the app. Using a single html app shell would lose all of the above. There may be some indication that I am wrong here and that search engines now execute JavaScript. If so, how does this work? Would I use AJAX to retrieve the HTML head upon every client side navigation? Would this work for all search engines? What are the disadvantages?

Server Side Rendering

With this option, every page is rendered on the server with it's own custom head metadata. You could use the 'Network First' or 'Fastest First' caching strategy. The downside with this approach is that you lose some performance because your app shell is not cached on the client side and does not load instantly, giving the user something to look at straight away.

Question?

Both options seem opposed to each other. You can either have performance or good metadata with boosts to your SEO and page sharing experiences. What is the happy middle ground? Is there a best of both worlds approach?

Update

I found this related GitHub issue from the Google lighthouse project.

Answer 1

Yup Google does execute javascript according to this search engine land blog post. Also according to this practical experiment Google does render AJAX content but unlike server rendered pages it takes a longer time to index dynamic content.

Coming to your question, If you do server side rendering on each and every page then SEO will be good but app shell will not be cached. But if you are building a Single Page Application, You can render your first page on Server Side and let Javascript do the work on rest of the navigation. You can add meta data dynamically to the pages on each navigation. Look how walmart deals with it.

Otherwise you can do an AJAX call in every page to load meta data but it will take some time for the page to get indexed or you might have to trigger a re-crawl from Google Webmaster tools but that doesn't mean your content is not going to be indexed.