Single Page Application SEO: Challenges and Best Practices

An eCommerce store that starts with a small user base might not see the detrimental effects of having one centralized database for all the website’s content. However, performance issues may arise as the traffic grows with the website’s popularity and users worldwide visit your website. This is another scenario where edge computing and edge caching shine regarding optimization and speed. Macrometa’s GDN and PhotonIQ provide low-latency APIs, and computing is performed geographically closer to each user, providing a faster and more reliable connection to your website than a centralized database or content management system.

Implement server-side rendering

Server-side rendering (SSR) or dynamic rendering can positively impact your website’s SEO. In the server-side rendering strategy, the page's first load is generated on the server and sent back to the client as an indexable HTML page. Generating the HTML from the server means that the web crawler can index the rendered view like any standard page without the complications of executing JavaScript. Subsequent interactions with the page will be handled on the client side as usual in SPAs. Another benefit of server-side rendering is that the end user will get a viewable page more quickly.

Some frameworks have built-in SSR. For React, you can use the NextJS framework, which uses server components by default.

Make views crawlable

As mentioned earlier, SPAs render the dynamic parts of the website based on a concept called views. It might be tempting to append #hash fragments to the URL and then use JavaScript to load content based on hash changes. For example, a SPA might have a homepage at https://site.com/#home and a product page at https://site.com/#product. When a user clicks on the product page, the fragment identifier changes from home to product, and the content can be updated. Unfortunately, crawlers see hashed URLs as the same page.

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

Example of bad practice using hash fragments in href tags (source)

To help crawlers see the different views of your SPA as separate pages, you need to use the History API to modify the URL without needing a full page reload. The History API lets you treat views as different URLs and use accessible URLs.

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

Example of good practice using accessible URLs in href tags(source)

With JavaScript, user-click events on the different links can be intercepted, and the History API can be updated with the new view.

<script>
function goToPage(event) {
  event.preventDefault(); // Stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // Remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl); // Update URL as well as browser history
}
// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));
</script>

Example of JavaScript being used to intercept view changes and update the History API (source)

Update meta tags

Including the appropriate meta tags in each view is important so the crawler knows how to index correctly. Meta tags are included in the head element of a page and look like this:

<meta name="..." content="..., ...">

Every time a view in a SPA changes, the meta tags should also change. The meta tags are located in the head tag, which SPAs would put in the container or skeleton of the page, and are inaccessible from the rendered view.

You can dynamically update the container's meta tags and other elements with JavaScript. For example, this JavaScript code changes the description meta tag and page title:

document.getElementsByTagName('meta')["description"].content = "Description for this view";

document.title = "New View Title";

The trick is to run this code on view changes. There are two ways to handle this: server-side (with SSR) or client-side.

In React, for example, you can use a third-party library like React Helmet and update the meta tags client-side as follows:

import React from "react";
import { Helmet } from "react-helmet";

class Application extends React.Component {
  render() {
    return (
      <div className="application">
        <Helmet>
          <meta charSet="utf-8" />
          <title>My Title</title>
          <link rel="canonical" href="http://mysite.com/example" />
        </Helmet>
        ...
      </div>
    );
  }
}

To use React Helmet, add the Helmet component to the view and include the meta tags you wish to change as children elements. React Helmet will automatically replace the meta tags in your website's head tag.

To update the meta tags from the server, the create-react-app team suggests adding placeholders to your code, such as the OG_TITLE and OG_DESCRIPTION properties in the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__" />
    <meta property="og:description" content="__OG_DESCRIPTION__" />
  </head>
</html>

Replace the placeholders with the correct information for the server.

If you prefer injecting data from the server, you can set a client-side global variable from the server like this:

<!doctype html>
<html lang="en">
  <head>
    <script>
      window.SERVER_DATA = __SERVER_DATA__;
    </script>

In the code above, the server replaces SERVER_DATA with JSON-encoded actual data that the client code can use.

Reminder: Always sanitize data sent from the server to protect yourself from XSS attacks.

Google provides a guide for common meta tags here: https://developers.google.com/search/docs/crawling-indexing/special-tags

Some of the most common ones are shown below.

<title>Page Title</title>
<meta charset="utf-8"><!-- HTML5 version of http-equiv="Content-Type"... -->
<meta name="description" content="Description of website">
<meta name="keywords" content="keywords">
<link rel="author" href="<<Link to author's website>>" />
<link rel="canonical" href="<<Page URL>>" />

Social media platforms use Open Graph to share links. Open Graph is a protocol created by Facebook to control how content is presented and shared on social media. When you share a social media post, the link expands into a thumbnail, a short description of the post, and a title—that is the Open Graph protocol in action.

Facebook uses these tags:

<meta property="og:url" content="<<Page URL>>">
<meta property="og:image" content="<<Open Graph Image URL>>">
<meta property="og:description" content="<<Description>>">
<meta property="og:title" content="<<Title>>">
<meta property="og:site_name" content="<<Site Title>>">
<meta property="og:see_also" content="<<Home page URL>>">

Twitter/X uses:

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="<<Page URL>>">
<meta name="twitter:title" content="<<Title>>">
<meta name="twitter:description" content="<<Description>>">
<meta name="twitter:image" content="<<Image URL>>">

Provide context about your content

Sitemaps

A sitemap is an XML document with all of your website's URLs that helps web crawlers understand your site’s structure and content. It also allows bots to detect new content that needs to be indexed. The larger your website, the more necessary a sitemap is to guide the crawlers throughout it accurately.

There are three ways to create a sitemap file with NextJS: manually, programmatically, and dynamically.

To make a sitemap manually, create a sitemap.xml in the public directory of your website and add the following text:

<!-- public/sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>http://www.example.com/foo</loc>
    <lastmod>2021-06-01</lastmod>
  </url>
</urlset>

Add a <url> element for each of your site’s views.

To create a sitemap programmatically we need to use an array of type MetadataRoute.Sitemap and return it from a function like so:

import type { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://acme.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://acme.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ];
}

Each item in the array is an object that describes each route.

You can also build a sitemap dynamically based on a server or database response. For example, say you have a table with article posts and a URL per each post. You may generate a sitemap like this:

import { BASE_URL } from '@/app/lib/constants';

export async function generateSitemaps() {
  // Fetch the total number of posts and calculate the number of sitemaps needed
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
}

export default async function sitemap({
  id,
}: {
  id: number;
}): Promise<MetadataRoute.Sitemap> {
  // Google's limit is 50,000 URLs per sitemap
  const start = id * 50000;
  const end = start + 50000;
  const posts = await getPosts(
    `SELECT id, date FROM posts WHERE id BETWEEN ${start} AND ${end}`
  );
  return posts.map((post) => ({
    url: `${BASE_URL}/posts/${post.id}`,
    lastModified: post.date,
  }));
}

Example of generating a sitemap dynamically (source)

Structured data

You can help Google and other crawlers understand and display your website's content using structured data, which is data in a standardized format that provides important information about your page. For a single-page application in React, for example, Google provides a package to facilitate the inclusion of structured data in your views. First, install the package and the schema:

npm install schema-dts
npm install react-schemaorg

Then insert a snippet like this:

import { Person } from "schema-dts";
import { JsonLd } from "react-schemaorg";

export function GraceHopper() {
  return (
    <JsonLd<Person>
      item={{
        "@context": "https://schema.org",
        "@type": "Person",
        name: "Grace Hopper",
        alternateName: "Grace Brewster Murray Hopper",
        alumniOf: {
          "@type": "CollegeOrUniversity",
          name: ["Yale University", "Vassar College"],
        },
        knowsAbout: ["Compilers", "Computer Science"],
      }}
    />
  );
}

If using NextJS, you can even use next/head to include the structured data at the head element of the page:

import { Person } from "schema-dts";
import { jsonLdScriptProps } from "react-schemaorg";
import Head from "next/head";

export default function MyPage() {
  return (
    <Head>
      <script
        {...jsonLdScriptProps<Person>({
          "@context": "https://schema.org",
          "@type": "Person",
          name: "Grace Hopper",
          alternateName: "Grace Brewster Murray Hopper",
          alumniOf: {
            "@type": "CollegeOrUniversity",
            name: ["Yale University", "Vassar College"],
          },
          knowsAbout: ["Compilers", "Computer Science"],
        })}
      />
    </Head>
  );
}

For more information, visit the official GitHub package page.

Clean scripts and handle errors gracefully

The JavaScript parser that some web crawlers use does not accept any JavaScript errors. An error in the JavaScript code can mean that the entire page is not visible to the bot, which is detrimental to your SEO. Making sure that there are no errors in syntax or at runtime and surrounding code that you suspect might throw errors beyond your control with a try and catch are great ways to protect your website from not being indexed.

try {
  nonExistentFunction();
} catch (error) {
  console.error(error);
  // Expected output: ReferenceError: nonExistentFunction is not defined
  // (Note: the exact output may be browser-dependent)
}

Handling errors gracefully is also essential so that any server response matches the content displayed on the view. In such cases, JavaScript can redirect the user to a different view. It’s critical that the user never feel lost or be left waiting on a blank view with no indication that an error has occurred.

The two most popular ways to redirect in plain JavaScript are:

// Simulate a mouse click:
window.location.href = "http://www.mywebsite.com";

// Simulate an HTTP redirect:
window.location.replace("http://www.mywebsite.com");

Remember that the back button will not work as intended when using replace because it removes the current URL from the history.