By Scott Gary

Why Metadata Matters

Metadata is an integral part of any modern web app, because it's inherently tethered to search engine optimization (SEO).

Search engines and their respective results page (SERPS) rely on metadata to properly index and display relative information for each site.

Also, meta tags are relied upon to properly display content from your site on a given social media platform, such as articles or items for sale.

For this reason, it's crucial to understand how metadata is configured in a modern web app.

The single page application (SPA) is a modern web app implementation that is incredibly popular. Most frameworks today utilize it in some way. Configuring metadata in today’s most popular SPA frameworks will be the focus of this tutorial.

The Single Page Application and Metadata

The nature of SPAs make configuring metadata a less straightforward process than classic multiple page applications. I'm going to try to clarify this topic by describing the following key concepts:

  1. The structure of an SPA.
  2. The problem with modifying metadata in an SPA.
  3. Available metadata solutions using what are probably the three most popular SPA frameworks: React, Svelte, and Vue.

You should have a basic understanding of HTML, metadata, and one of the three SPA frameworks to understand the concepts we’ll be going over. But, I’ll be keeping things beginner friendly, so don’t worry!

How Single Page Applications Work

Before diving in, you need a firm grasp of what constitutes an SPA.

As the name implies, a single page application literally consists of a single HTML page sent down from the server. This page is just an empty HTML shell, and will look something like this:

<!DOCTYPE html>
    <html>
        <head>
        <title>Home | Demystifying SPA Metadata</title>
        <meta name="description" content="How to configure popular SPA             frameworks to maintain quality site metadata."/>
        <link rel="stylesheet" href="./stylesheet.css" type="text/css"             />
        </head>
        <body>
            <script src="/bundle.min.js" type="text/javascript">                    </script>
        </body>
    </html>

You might be wondering how an entire website is derived from this empty HTML shell.

This is possible because along with the HTML page will be extensive client-side JavaScript code that generates the content for each page. This code is included in the page via the