How I Got a Next.js Project to 100% SEO on Lighthouse

I recently went through the SEO setup of MockData and wanted to see how far I could push the technical side of it.

The goal wasn't to rank #1 on Google.

I just wanted to make sure search engines could properly understand and discover the pages I actually want indexed.

After going through Lighthouse and fixing the issues one by one, MockData reached 100 SEO on Lighthouse.

Here are the main things I changed.

1. Centralized metadata

One thing that was getting annoying was managing metadata separately across different pages.

So I created a small helper to keep things consistent:

export function createPageMetadata({
  title,
  description,
  path,
  noIndex = false,
}: PageMetadata) {
  return {
    title,
    description,
    alternates: {
      canonical: path,
    },
    robots: noIndex ? "noindex, nofollow" : "index, follow",
    openGraph: {
      title,
      description,
      url: path,
      type: "website",
    },
  };
}

Now a page can simply define what is different instead of rebuilding all the metadata every time.

2. Fixed the root layout

I also moved the global defaults into layout.tsx.

Things like:

• metadataBase
• title template
• default description
• Open Graph
• Twitter cards
• robots
• lang

For example:

export const metadata: Metadata = {
  metadataBase: new URL("https://mockdata.ir"),
  title: {
    default: "MockData",
    template: "%s | MockData",
  },
  description: "...",
};

This also makes relative URLs such as canonical and Open Graph URLs resolve correctly.

3. Added robots.txt

I added a real robots.ts instead of leaving crawler rules undefined.

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://mockdata.ir/sitemap.xml",
  };
}

Nothing fancy.

Just clear rules and a sitemap location.

4. Added a dynamic sitemap

MockData has more than just a few static pages.

There are resource pages for things like users, posts, products, and other data.

So instead of maintaining a huge static XML file manually, I generate the sitemap through Next.js:

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const resources = await getPublicResources();

  return [
    {
      url: "https://mockdata.ir",
      lastModified: new Date(),
    },
    ...resources.map((resource) => ({
      url: `https://mockdata.ir/${resource.slug}`,
      lastModified: resource.updatedAt,
    })),
  ];
}

That means new public resources can automatically become part of the sitemap.

5. Added structured data

For pages where it actually makes sense, I added JSON-LD using Schema.org.

For example, the application itself can be described as a SoftwareApplication.

I also used:

• WebSite
• Organization
• SoftwareApplication
• BreadcrumbList

The important part here is not adding as much schema as possible.

Only add structured data that actually represents the content on the page.

No fake reviews.

No fake ratings.

No made-up information just to make Google happy.

6. Added breadcrumbs

For nested pages, users can now see a clear hierarchy such as:

Home → Docs → Users API

I also represent the same hierarchy in BreadcrumbList structured data.

The UI and structured data should describe the same page structure.

7. Checked every indexable page

Finally, I went through the public pages individually.

For each one I checked:

• Is there one clear H1?
• Does the title describe the page?
• Does the description match the actual content?
• Are there useful internal links?
• Should this page really be indexed?
• Is there any empty or useless page exposed to crawlers?

Not every page needs to be indexed.

Sometimes noindex is the correct SEO decision.

The result

After fixing these things, I ran Lighthouse again.

SEO: 100

But there's an important distinction here.

A 100 Lighthouse SEO score does not mean your website will rank first on Google.

Lighthouse is mostly checking technical SEO basics.

Actual search rankings depend on much more:

Content quality, search intent, authority, backlinks, competition, performance, and many other factors.

For me, the useful part of this process wasn't really the number 100.

It was making sure MockData has a clean technical foundation before worrying about rankings.

You can check the project here:

https://mockdata.ir

If you're building a Next.js app, I'd definitely recommend going through the Lighthouse SEO audit before shipping it.

It catches a surprising number of small things.