How to Add FAQ Schema for Better SEO in Your SassyPack App

Adding a FAQ section to your landing page helps answer customer questions early and improves your website’s SEO.
SassyPack makes this easy with a simple setup for rendering FAQ content and adding JSON-LD schema markup so Google can show FAQs directly in search results.

---

1. Why FAQs Matter for SEO

• Boost visibility on Google by appearing in the “People also ask” section
• Increase trust by answering customer concerns directly
• Reduce bounce rate by keeping users engaged
• Help Google understand your content better

A structured FAQ with schema markup can make your site stand out with expandable answers in search results.

---

2. Create an FAQ Section

In your SassyPack project, create a new component file:

client/src/components/FaqSection.jsx

Paste this code:

import React from "react";

const faqs = [
  {
    question: "What is SassyPack?",
    answer:
      "SassyPack is a Nextjs [SaaS Starter Kit](/blog/sassypack-vs-building-from-scratch) that helps you launch SaaS projects faster by including authentication, payments, and routing out of the box.",
  },
  {
    question: "Is SassyPack beginner friendly?",
    answer:
      "Yes, the codebase is clean, modular, and perfect for beginners who want to understand how a full SaaS app works.",
  },
  {
    question: "Can I customize the design?",
    answer:
      "Absolutely. SassyPack uses Tailwind CSS and DaisyUI, so you can easily customize colors, fonts, and layouts.",
  },
];

export default function FaqSection() {
  return (
    <section className="max-w-4xl mx-auto p-6 space-y-6">
      <h2 className="text-2xl font-bold text-center">Frequently Asked Questions</h2>
      <div className="space-y-4">
        {faqs.map((faq, index) => (
          <div
            key={index}
            className="collapse collapse-arrow bg-base-200 border border-base-300 rounded-box"
          >
            <input type="checkbox" />
            <div className="collapse-title text-lg font-semibold">
              {faq.question}
            </div>
            <div className="collapse-content">
              <p>{faq.answer}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

This uses DaisyUI’s collapse component for simple toggle effects.

---

3. Add It to Your Landing Page

Open your landing page file:

client/src/pages/LandingPage.jsx

At the bottom of the page, import and add the component:

import FaqSection from "../components/FaqSection";

export default function LandingPage() {
  return (
    <div className="bg-base-100 min-h-screen">
      {/* ... other sections */}
      <FaqSection />
    </div>
  );
}

Your FAQ section will now appear neatly styled below your main content.

---

4. Add JSON-LD Schema for Google

To help Google display your FAQs in search, you can embed structured data.

Add this snippet inside your LandingPage.jsx right before the closing </div>:

import { Helmet } from "react-helmet";

const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is SassyPack?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "SassyPack is a Nextjs SaaS Starter Kit that helps you launch projects faster.",
      },
    },
    {
      "@type": "Question",
      "name": "Is SassyPack beginner friendly?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, it’s designed for beginners and includes ready-to-use code for auth, payments, and routes.",
      },
    },
  ],
};

export default function LandingPage() {
  return (
    <div className="bg-base-100 min-h-screen">
      <Helmet>
        <script type="application/ld+json">{JSON.stringify(faqSchema)}</script>
      </Helmet>
      {/* ... other sections */}
      <FaqSection />
    </div>
  );
}

---

5. Verify on Google

After deployment, test your FAQ schema using the Rich Results Test tool:
👉 https://search.google.com/test/rich-results

If everything is valid, your FAQ answers can appear directly under your search result.

---

6. Best Practices

• Keep each answer under 300 words
• Use clear and specific language
• Only include real FAQs users ask
• Don’t repeat keywords excessively

---

7. Example of How It Looks on Google

When your schema is indexed, Google may display something like this:

SassyPack – Build SaaS Faster (FAQs)
What is SassyPack?
Is SassyPack beginner friendly?

---

Final Notes

Adding FAQs to your landing page is one of the simplest and most effective SEO wins for your SaaS.
SassyPack supports this setup perfectly, letting you create informative, well-structured pages that both users and search engines love.

Get SassyPack →