title: How do you handle HTML Metadata in Progressive Web Apps (PWA)
body: <p>I'm trying to get my head around handling metadata in the <code>head</code> section of my <code>html</code> when writing a Progressive Web App (PWA). By metadata, I mean:</p>
  
  <ul>
  <li><code>title</code> &amp; <code>description</code> meta tags</li>
  <li>Atom feed <a href="https://stackoverflow.com/questions/440391/how-to-tell-web-browsers-about-atom-feeds">link URL</a> meta tag</li>
  <li><a href="http://www.opensearch.org" rel="noreferrer">OpenSearch</a> meta tag</li>
  <li><a href="https://developers.google.com/search/docs/guides/intro-structured-data" rel="noreferrer">Google Structured Data</a></li>
  <li><a href="http://ogp.me/" rel="noreferrer">Facebook OpenGraph</a></li>
  <li><a href="https://dev.twitter.com/cards/overview" rel="noreferrer">Twitter Cards</a></li>
  </ul>
  
  <h2>Single Page App Shell</h2>
  
  <p>All of the metadata above is different for every page in the app. Using a single <code>html</code> app shell would lose all of the above. There may be some indication that I am wrong <a href="https://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications">here</a> 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?</p>
  
  <h2>Server Side Rendering</h2>
  
  <p>With this option, every page is rendered on the server with it's own custom <code>head</code> 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.</p>
  
  <h2>Question?</h2>
  
  <p>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?</p>
  
  <h2>Update</h2>
  
  <p>I found <a href="https://github.com/GoogleChrome/lighthouse/issues/2091" rel="noreferrer">this</a> related GitHub issue from the Google lighthouse project.</p>