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.

Flemish

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.

Hydrated

Actually the SEL article is out of date. Google deprecated the AJAX policy a few years ago. love2dev.com/blog/… That was pretty much the end of SPAs as a consumer option. – Yezd

Answer 2

I think your answer relates to how do social media sites and search engine spiders consume your content. While Google can parse many SPA sites, they have sort of back tracked on those guidelines in recent months. You can build a very complex service worker to perform your 'spa' activities, but you are better served by focusing on having your content pre-rendered on the server as much as possible for the SEO and social media sites. Think about it this way, service worker caching can replace or make native most of what we have been doing with SPAs the past 7 years or so.

Yezd

Answer 3

Please use below meta tag for Progressive Web App (PWA), it's working for me.

Please add below metas to your index file.

<meta name="full-screen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Your App Name">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Also please add app icon for Iphone:

<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicon/57x57.png" />

<link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicon/72x72.png" />

<link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicon/114x114.png" />

<link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicon/144x144.png" />

<link rel="apple-touch-icon" href="assets/img/favicon/92x92.png" />

After adding this metas please open your site url in safari and select Add to home screen.

It will showing your website in to app with title and app icon.

Vladikavkaz