How to improve your SaaS SEO & LLM's searches with NextJS (FAQs)

I'd share in this article how I've improved my SEO performance to increase my Google searches for my latest SaaS project (PostFast) and some LLM improvements too. I'll show you code snippets and libraries I've used too! I'd add some bonus ways outside NextJS at the end.

Let's dive in!

(I'm in no case an SEO expert, I'm just speaking from my own experience!)

Why SEO is important for SaaS?

To be brief in here, most of you reading are most probably not with some 100k audience on X, TikTok, or whatever, neither am I. The SEO effect doesn't come from one article or one "optimisation". It takes months, most of the time more than 6 months, to even see some good results. Even this blog you're reading took more than a year to start getting consistent Google traffic. You can see the photo below (it's the last 28 days for June/July)

It might not mean much, but I write one article per month nowadays, and the traffic keeps getting bigger. SEO compounds, and this is why it's important to start early and move at least a little.

If you manage to get your SEO strategy on point, you will start getting consistent traffic to your projects with the least amount of effort and 0$ for paid ads.

NextJS SEO optimisations

To start from the very basic stuff. You need to have everything that you care about rendered on the server, and in best case scenario, the pages should be as static as possible. (using getStaticProps)

If the above is not done, don't expect too much.

Try to achieve 100/100 on all for Desktop in PageSpeed and at least 70/100 for performance and 100/100 on all others on mobile too! This would include caching (pretty easy to do so with Cloudflare).

Add metadata fields for each page, and change based on the content, or dynamically generate the metadata based on blog articles. Here is an example of "Metadata" in one of my layouts that is not dynamic.

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://postfa.st"),
  title: "PostFast - Schedule Social Media Posts Across All Platforms",
  description:
    "Save 10+ hours weekly with PostFast. Schedule and automate your social media posts across Facebook, Instagram, X, LinkedIn, TikTok, YouTube & more from one dashboard.",
  alternates: {
    canonical: "/",
  },
  openGraph: {
    title: "PostFast - Schedule Social Media Posts Across All Platforms",
    description:
      "Save 10+ hours weekly with PostFast. Schedule and automate your social media posts across Facebook, Instagram, X, LinkedIn, TikTok, YouTube & more from one dashboard.",
    images: [
      {
        url: "/images/og-image.jpg",
        alt: "PostFast Logo",
      },
    ],
  },
  twitter: {
    title: "PostFast - Schedule Social Media Posts Across All Platforms",
    description:
      "Save 10+ hours weekly with PostFast. Schedule and automate your social media posts across Facebook, Instagram, X, LinkedIn, TikTok, YouTube & more from one dashboard.",
    images: [
      {
        url: "/images/og-image.jpg",
        alt: "PostFast Logo",
      },
    ],
  },
};

This snippet could be in your root layout, and each page that you need could have its own metadata that would override it. For more info on the metadata in the Next.js app router, check their documentation.

In the next chapter, we'll show how to add FAQ's, and that would be good for both your potential clients, SEO, and LLMs.

Add FAQ's and JSON-LD (schema-dts)

This is something I've been postponing for a while. Each page (especially the landing) should have FAQ's and each page which has them should add them as JSON-LD with schema-dts.

This is fairly simple, yet most SaaS projects I've seen have not implemented it. Adding those in NextJS is easy, and I'll give you an example below on how to add the JSON-LD with schema-dts.

Install 2 libraries we'll need, run (I use npm):

npm i serialize-javascript schema-dts
npm i @types/serialize-javascript -D

Start with creating one reusable constant, so you could render your question/answers on the page itself, and for the schema. I'll give you examples from one of mine. Do note that this is a real-life example from my social media scheduler tool, PostFast.

const faqItems = [
  {
    question: "Can I connect multiple accounts from the same platform?",
    answer:
      "Yes! You can connect multiple accounts from any platform. For example, you can connect 3 Instagram accounts, 2 Facebook pages, and 1 X account - each counts toward your plan's social account limit.",
  },
  {
    question: "Do I need to keep my computer on for scheduled posts?",
    answer:
      "No, PostFast runs in the cloud. Once you schedule your posts, they'll be published automatically at the specified times, even if your computer is off.",
  },
  {
    question: "Which platforms support auto-publishing?",
    answer:
      "All our integrated platforms support full auto-publishing: Facebook, Instagram, X, LinkedIn, TikTok, YouTube, and BlueSky. Your content is posted automatically without any manual intervention.",
  },
  {
    question: "Can I post different content to each platform?",
    answer:
      "Absolutely! You can customize your content for each platform or use our cross-posting feature to share the same content across multiple platforms with one click.",
  },
  {
    question: "How do I connect my social media accounts?",
    answer:
      "Simply sign up for PostFast, go to your dashboard, and click 'Add Account'. You'll be redirected to each platform's secure OAuth login - no passwords are shared with us.",
  },
];

Create a similar constant somewhere, and inside the page where you'll want the FAQs, import those two lines, which I'll explain below:

import { WithContext, FAQPage } from "schema-dts";
import serialize from "serialize-javascript";

This would be used in the initialisation of the page, and with one script.

export default function MyPage() {

  const faqSchema: WithContext<FAQPage> = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: faqItems.map((item) => ({
      "@type": "Question",
      name: item.question,
      acceptedAnswer: {
        "@type": "Answer",
        text: item.answer,
      },
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: serialize(faqSchema, { isJSON: true }),
        }}
      />
      <main>
       your content
      </main>
    </>
  );
}

You can avoid the serialize library, but it would be good practice to use it, as even NextJS Documentation recommends it. It's as simple as above, you can just copy/paste it and change it with your questions and answers.

An additional way to improve SEO (Reddit)

One thing I'm currently exploring and seeing good results in terms of traffic is Reddit posting and commenting. This could be pretty annoying for you, but it's one of the websites with the best SEO for Google. This would mean that if you write a post that goes viral, you will get hundreds of eyes on your project.

There is not even a need to add a link; it would be even better if you don't. The communities there are quite hard on links and direct promotion, so don't do it.

Try to share a personal story, and include your project subtly. If you manage to get a lot of eyes, this would trigger a lot of searches with your brand word, like with every post I write for PostFast, I get a lot of Google searches. It's not ideal, but it really helps!

If you have any questions, reach out on Twitter/X or LinkedIn! If you liked the article, or it helped you, there is a "buy me a coffee" button on the bottom right of the page. I'd love the support!