How to structure a NextJS website for grouped search results in Google

Introduction: Why Your NextJS Site Structure Matters for SEO

In today’s modern web development landscape, NextJS has established itself as one of the most popular React frameworks for building high-performance, dynamic, and SEO-friendly websites. However, even with such a powerful tool, many developers and site owners face a common challenge: their pages appear as isolated results in Google searches, without benefiting from the grouped display under the site’s name (as shown below).

Site Name
 - Page 1
 - Page 2
 - Page 3

This display format, known as "sitelinks," is a major asset for:

• Boosting your site’s visibility in search engine results pages (SERPs).
• Increasing click-through rates (CTR) by guiding users to the most relevant pages.
• Enhancing your brand’s credibility with a clear and organized structure.

In this article, we’ll explore how to structure a NextJS website to maximize your chances of achieving this grouped display. We’ll cover SEO best practices, NextJS-specific technical configurations, and content strategies to implement.

1. Understanding Google’s Criteria for Sitelinks

Before diving into the code, it’s essential to understand how Google generates sitelinks. While the exact algorithm remains a secret, SEO experts have identified several key factors:

a) A Clear and Logical Site Hierarchy

Google favors sites with a well-defined hierarchical structure, where pages are organized intuitively. For example:

• A homepage (/).
• Main categories (/services, /products).
• Logically linked sub-pages (/services/seo, /products/nextjs).

b) High-Quality and Relevant Content

The pages suggested as sitelinks are typically those that:

• Address specific search intents.
• Have a high click-through rate (CTR) in search results.
• Are frequently visited by users.

c) Intuitive Navigation

A well-designed navigation menu, with relevant internal links, helps Google understand the relationship between your pages. Breadcrumbs and contextual links within content also play a crucial role.

d) Optimized Schema.org Markup

Structured data (such as WebSite, BreadcrumbList, or SiteNavigationElement) provides Google with explicit clues about your site’s structure. We’ll delve deeper into this later.

2. Structuring a NextJS Site for Sitelinks

NextJS offers native features that make it easier to create an SEO-friendly structure. Here are the key steps to follow:

a) Organize Routes Hierarchically

NextJS uses a file-and-folder system to generate routes. For an optimal structure:

/pages
  ├── index.js          // Homepage (/)
  ├── services
  │   ├── index.js      // Category page (/services)
  │   ├── seo.js       // Sub-page (/services/seo)
  │   └── nextjs.js    // Sub-page (/services/nextjs)
  └── products
      ├── index.js      // Category page (/products)
      └── nextjs.js    // Sub-page (/products/nextjs)

Why is this important?

• Google interprets this structure as a logical hierarchy.
• Sub-pages are naturally linked to their parent category, reinforcing their relevance.

b) Use Descriptive and Optimized URLs

Avoid generic URLs like /page1 or /article?id=123. Instead, opt for clear, keyword-rich URLs :

✅ Good example: /services/seo-optimization-nextjs ❌ Bad example: /services?id=456

NextJS Tip: Use the next.config.js file to configure rewrites or redirects if needed:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/seo-optimization',
        destination: '/services/seo',
      },
    ];
  },
};

c) Implement an SEO-Friendly Navigation Menu

Your main menu should reflect the hierarchical structure of your site. Here’s an example using NextJS and the Link component:

import Link from 'next/link';

export default function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link href="/">Home</Link></li>
        <li>
          <Link href="/services">Services</Link>
          <ul>
            <li><Link href="/services/seo">SEO</Link></li>
            <li><Link href="/services/nextjs">NextJS</Link></li>
          </ul>
        </li>
        <li><Link href="/products">Products</Link></li>
      </ul>
    </nav>
  );
}

Key Points:

• Use semantic tags (<nav>, <ul>, <li>).
• Avoid pure JavaScript menus (not crawlable by Google).
• Add aria-label attributes for accessibility.

3. Optimizing Structured Data for Sitelinks

Schema.org markup is a powerful lever to help Google understand your site’s structure. Here are the most useful types of markup for sitelinks:

a) WebSite Markup

This tag tells Google that your site is a single entity and provides information about its overall structure.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "My NextJS Site",
  "url": "https://mysite.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://mysite.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

b) BreadcrumbList Markup

Breadcrumbs help Google understand the page hierarchy and improve display in search results.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://mysite.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Services",
      "item": "https://mysite.com/services"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "SEO",
      "item": "https://mysite.com/services/seo"
    }
  ]
}
</script>

How to Implement in NextJS? Use NextJS’s Head component to inject the markup into the <head> of your pages:

import Head from 'next/head';

export default function SEO() {
  return (
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          // ... (markup here)
        }) }}
      />
    </Head>
  );
}

c) SiteNavigationElement Markup

This tag explicitly describes your site’s navigation structure, which can influence sitelinks.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SiteNavigationElement",
  "name": "Main Menu",
  "url": "https://mysite.com",
  "hasPart": [
    {
      "@type": "WebPage",
      "name": "Services",
      "url": "https://mysite.com/services"
    },
    {
      "@type": "WebPage",
      "name": "Products",
      "url": "https://mysite.com/products"
    }
  ]
}
</script>

4. Content Strategies to Maximize Sitelinks

A technically optimized structure isn’t enough: your page content plays a key role in obtaining sitelinks. Here’s how to optimize it:

a) Create Relevant Category Pages

Category pages (e.g., /services, /products) should:

• Clearly summarize the content of sub-pages.
• Include internal links to sub-pages with descriptive anchors.
• Have optimized titles and meta descriptions for SEO.

Example Structure for a Category Page:

## Our SEO Services for NextJS

At [My Site], we offer a full range of services to optimize your NextJS website:

- [Technical SEO Optimization](/services/seo/technical): Improve your site’s speed and crawlability.
- [Content Strategy](/services/seo/content): Create articles that rank on Google.
- [Netlinking and Authority](/services/seo/netlinking): Get high-quality backlinks.

**Why Choose Our Services?**
- Combined NextJS and SEO expertise.
- Measurable results in 3 months.
- Customized approach for each client.

b) Optimize Internal Link Anchors

Anchors (the clickable text in links) should be descriptive and keyword-rich. Avoid generic anchors like "click here" or "learn more."

✅ Good example:

<a href="/services/seo">Discover our SEO services for NextJS</a>

❌ Bad example:

<a href="/services/seo">Click here</a>

c) Use Hierarchical Headings

<h2>, <h3>, and other heading tags help Google understand the semantic structure of your pages. For example:

## Why Choose NextJS for Your Website?

### Performance and SEO
NextJS offers server-side rendering (SSR) and static generation (SSG), which improve loading speed.

### Flexibility and Ecosystem
With NextJS, you benefit from the React ecosystem while accessing advanced features like API routes.

5. Advanced NextJS Techniques

To go further, here are some NextJS-specific techniques that can boost your chances of getting sitelinks:

a) Static Generation (SSG) vs Server-Side Rendering (SSR)

• SSG (Static Site Generation): Ideal for static pages (e.g., blog, product pages). Use getStaticProps to pre-generate pages.
• SSR (Server-Side Rendering): Useful for dynamic pages (e.g., user dashboard). Use getServerSideProps.

Example with getStaticProps:

export async function getStaticProps() {
  const res = await fetch('https://api.mysite.com/services');
  const services = await res.json();

  return {
    props: { services },
  };
}

b) Using API Routes for Dynamic SEO

NextJS API routes allow you to dynamically generate meta tags or structured data based on content.

Example:

// pages/api/seo.js
export default function handler(req, res) {
  const { page } = req.query;
  const meta = {
    title: `${page} Services | My Site`,
    description: `Discover our ${page} services to optimize your NextJS website.`,
  };
  res.status(200).json(meta);
}

c) Optimizing Images with next/image

Optimized images improve loading speed, a key factor for SEO. Use the next/image component:

import Image from 'next/image';

<Image
  src="/seo-image.jpg"
  alt="SEO Optimization for NextJS"
  width={800}
  height={400}
  priority
/>

6. Monitoring and Improving Your Results

Once your site is structured and optimized, it’s crucial to monitor its performance in search results. Here are some tools and methods:

a) Google Search Console

• Check search appearance ("Enhancements" tab).
• Identify top-performing pages ("Performance" tab).
• Fix crawl errors ("Coverage" tab).

b) SEO Analysis Tools

• Ahrefs or SEMrush: Analyze backlinks and ranked keywords.
• Screaming Frog: Audit your site’s structure and detect technical issues.

c) A/B Testing for Sitelinks

If you’re not yet getting sitelinks, try different approaches:

• Modify titles and meta descriptions of main pages.
• Add or remove internal links to reinforce hierarchy.
• Experiment with different Schema.org markups.

Conclusion: A Well-Structured Site for Tangible Results

Achieving a grouped display in Google’s search results isn’t a matter of luck—it’s the result of a well-thought-out SEO strategy and an optimized technical structure. With NextJS, you have a powerful framework to implement these best practices.

To summarize, here are the key steps to remember:

1. Organize your routes hierarchically (folders and files in /pages).
2. Optimize URLs, titles, and meta descriptions for each page.
3. Implement Schema.org markup (WebSite, BreadcrumbList, SiteNavigationElement).
4. Create high-quality content with intuitive navigation and relevant internal links.
5. Monitor your performance with Google Search Console and adjust your strategy.

By following these tips, you’ll maximize your chances of seeing your NextJS site appear in a grouped format in Google’s results, boosting your visibility and organic traffic.

Next Steps:

• Audit your current NextJS site structure.
• Identify priority pages for sitelinks.
• Start implementing technical optimizations (markup, URLs, navigation).

Need help structuring your NextJS site? Contact our SEO experts for a personalized audit!