Skip to content
Open SaaS OpenSaaS.sh
Docs
Blog
Have an Open SaaS app in production? We'll send you some swag! 👕

SEO & Performance

This guides explains how to improve the SEO and performance for of your app.

Landing Page Meta Tags

Wasp gives you the ability to add meta tags to your landing page HTML via the main.wasp file’s head property:

app SaaSTemplate {
  wasp: {
    version: "^0.13.0"
  },
  title: "Open SaaS",
  head: [
        "<meta property='og:type' content='website' />",
        "<meta property='og:url' content='https://opensaas.sh' />",
        "<meta property='og:title' content='Open SaaS' />",
        "<meta property='og:description' content='Free, open-source SaaS boilerplate starter for React & NodeJS.' />",
        "<meta property='og:image' content='https://opensaas.sh/public-banner.webp' />",
        //...
  ],
  //...

Change the above highlighted meta tags to match your app. Wasp will inject these tags into the HTML of your index.html file, which is the Landing Page (app/src/client/landing-page/LandingPage.tsx), in this case.

Prerendering Routes

By default, a Wasp app is a Single Page Application (SPA). When someone visits your site, their browser first downloads a mostly empty page and then runs JavaScript to fill it in with the actual content. This works well for pages behind a login, but it has two downsides for pages like your landing page:

  • Visitors wait longer before they see anything.
  • Search engines and AI crawlers sometimes struggle to see your real content, which hurts your ranking.

Prerendering fixes both. You can turn it on for any route by adding prerender: true in your config file:

app.route('LandingPageRoute', { path: '/', to: landingPage, prerender: true });

Now, when you run wasp build, Wasp builds a complete HTML version of that page ahead of time. Visitors (and Google) see your real content right away, and React still takes over in the background so buttons, links, and other interactions keep working as normal.

For a content-heavy landing page, this typically makes the page feel several times faster to load.

See the Wasp docs for the full reference and caveats: Prerendering.

Docs & Blog Meta Tags

Astro, being a static-site generator, will automatically inject relevant information provided in the blog/astro.config.mjs file, as well as in the frontmatter of .md files into the pages HTML:

---
title: 'My First Blog Post'
pubDate: 2022-07-01
description: 'This is the first post of my new Astro blog.'
author: 'Astro Learner'
image:
    url: 'https://docs.astro.build/assets/full-logo-light.png'
    alt: 'The full Astro logo.'
tags: ["astro", "blogging", "learning in public"]
---

Improving your SEO is as simple as adding these properties to your docs and blog content!