Next.js SEO

Next.js SEO for Northern Ireland Specialist Next.js SEO

Next.js is one of the strongest frameworks available for SEO - but only when the implementation is correct. The App Router metadata API, server-side rendering strategy, dynamic sitemap generation, JSON-LD injection and Core Web Vitals configuration all require deliberate decisions that most development teams make once and rarely revisit.

Talk to us about your Next.js project
Explorer
app
layout.tsx
sitemap.ts
robots.ts
blog
[slug]/page.tsx
services
[slug]/page.tsx
components
JsonLd.tsx
next.config.ts
[slug]/page.tsx
sitemap.ts
JsonLd.tsx
1// app/blog/[slug]/page.tsx
2export async function generateMetadata({ params }) {
3  const post = await getPost(params.slug)
4  return {
5    title: post.seo.title,
6    description: post.seo.description,
7    alternates: { canonical: `/blog/${params.slug}` },
8    openGraph: {
9      title: post.seo.title,
10      images: [post.ogImage],
11    },
12    // âš  twitter card, robots missing
13  }
14}
15// TODO: generateStaticParams, JsonLd component
SEO Audit
No JSON-LD schema on any route
sitemap.ts missing dynamic routes
Twitter card not configured
generateStaticParams absent - no ISR
next/image not used - LCP risk
App Router SSR confirmed
Need help with Next.js SEO? Talk to the SplinterSEO team today.
Get in touch
Next.js SEO

Why Next.js SEO requires specialist knowledge to get right

Next.js is genuinely one of the best frameworks for SEO. Server-side rendering, static generation, the App Router metadata API, built-in image optimisation, and automatic code splitting all give you the tools to build a site that performs excellently in both organic search and Core Web Vitals assessments. But unlike a WordPress plugin that configures most of this for you, Next.js requires your team to make deliberate, informed decisions at every layer of the SEO stack.

The App Router introduced in Next.js 13 changed how metadata is managed, how layouts work and how server and client components interact - all with implications for SEO. Many Next.js projects we audit were built under the Pages Router and migrated partially or incompletely to the App Router, creating a mixed architecture where some routes handle metadata correctly and others do not. Even projects built natively on the App Router frequently have incomplete generateMetadata implementations, sitemaps that only include static routes, and no structured data at all.

The performance side is equally important. Next.js's next/image component, font optimisation and bundle analysis are powerful tools, but they require correct configuration. We regularly see Next.js sites failing Core Web Vitals assessments because images are served without the next/image component, fonts are loaded without the next/font package, or third-party scripts are imported in ways that block rendering.

App Router vs Pages Router complexity The two routers handle metadata, layouts and data fetching differently. Mixed or partial migrations create inconsistent SEO outputs across routes.
No metadata safety net Every title, description, canonical, Open Graph tag and robots directive must be explicitly implemented. There is no plugin to catch what you have missed.
Rendering strategy has SEO consequences SSR, SSG, ISR and PPR each suit different content types. The wrong choice for a given route can mean stale content in Google's index or unnecessary server load.
Performance requires deliberate configuration next/image, next/font, script loading strategy and bundle optimisation are opt-in. Skipping them produces poor Core Web Vitals scores that directly affect rankings.
What we do

What is included in our Next.js SEO service

We audit and improve every layer of your Next.js SEO implementation - from rendering strategy and the metadata pipeline through to structured data, sitemaps, Core Web Vitals and ongoing content performance.

Next.js SEO audit

We audit your full Next.js implementation covering App Router architecture, metadata completeness across all route types, sitemap generation, robots configuration, rendering strategy, JSON-LD implementation, Core Web Vitals and crawl behaviour in Google Search Console.

Metadata pipeline review and implementation

We audit your generateMetadata functions across every route type - pages, layouts, dynamic segments and catch-all routes - identifying missing fields and producing implementation specifications covering title, description, canonical, Open Graph, Twitter Card and robots directives.

Rendering strategy review

We assess your SSR, SSG, ISR and PPR configuration across route types, ensuring your rendering choices match the update frequency and crawl requirements of each content type, and that revalidation windows are appropriate for how frequently your content changes.

Structured data implementation

We design and implement JSON-LD schema server-side in your Next.js components, covering Organisation, WebSite, Article, BreadcrumbList, Product, Service and the schema types relevant to your content model. Every block is validated against Google's Rich Results Test and monitored via Search Console.

Core Web Vitals and performance

We audit your next/image configuration, next/font implementation, third-party script loading strategy, bundle composition and ISR revalidation, producing a prioritised list of changes that will improve your LCP, CLS and INP scores across desktop and mobile.

Content strategy and keyword targeting

Once the technical foundations are solid we move to content - keyword research and mapping, content gap analysis, topical authority planning and ongoing content recommendations that make the most of your Next.js site's performance advantages in organic search.

Common issues

Common Next.js SEO problems we fix

These are the issues we find most frequently when auditing Next.js sites, and what we do to resolve them.

The problem

Incomplete metadata across route types

The most common issue we find is a generateMetadata function that handles one or two route types correctly but leaves category pages, tag archives, paginated routes, search results or error pages returning missing or duplicate metadata. These gaps are invisible during development but result in large numbers of pages indexed without titles or descriptions - or with identical metadata across the whole site.

How we fix it

Full metadata audit across all route types

We crawl your site and compare rendered metadata against expected outputs for every route type, identifying gaps and duplicates. We then produce implementation specifications for each route covering title, description, canonical, Open Graph, Twitter Card and robots directives, with code examples your developer can implement directly.

The problem

sitemap.ts only including static routes

A sitemap.ts that returns only a hardcoded list of static URLs will omit every dynamically generated page from the sitemap submitted to Google. For content-heavy sites where the majority of pages are CMS-driven, this means most of the site's content is not being actively surfaced to Googlebot, slowing discovery and indexation significantly.

How we fix it

Dynamic sitemap generation from your data source

We write or correct your sitemap.ts to query your CMS, database or API for all published content types at build or request time, mapping them to their front-end URLs with accurate lastModified timestamps. For large sites we implement sitemap index files and ensure the sitemap is correctly referenced in robots.ts and submitted to Google Search Console.

The problem

No structured data implemented

The majority of Next.js sites we audit have no JSON-LD schema implemented at all, or have schema injected client-side via a third-party tag manager that fires after the initial page load. Client-side schema injection is unreliable for SEO because Googlebot processes the initial HTML response and may not wait for JavaScript execution before determining what structured data is present on the page.

How we fix it

Server-side JSON-LD in Next.js layouts and pages

We implement structured data using <script type="application/ld+json"> tags rendered server-side in your layout or page components, populated with data from your CMS or API at request or build time. This guarantees Googlebot sees the complete schema in the initial HTML without any JavaScript dependency, and the schema is validated against Google's Rich Results Test before deployment.

The problem

Images served without next/image causing poor LCP

Using standard <img> tags instead of the next/image component bypasses Next.js's built-in image optimisation - automatic WebP and AVIF conversion, responsive sizing, lazy loading and layout shift prevention. The result is large unoptimised images that cause poor Largest Contentful Paint scores on mobile, which is a confirmed ranking factor.

How we fix it

next/image migration and priority configuration

We audit every image across your site and identify where standard img tags should be replaced with the next/image component. We also review your image priority prop usage to ensure above-the-fold images are preloaded correctly, your sizes attribute matches your layout, and your remote image domains are properly configured in next.config.ts.

The problem

Pages Router and App Router mixed without clear strategy

Many Next.js projects migrated to the App Router incrementally, leaving a mixed architecture where some routes use the old Pages Router pattern with getServerSideProps or getStaticProps and others use the App Router with server components. The two systems handle metadata, caching and data fetching differently, and the resulting inconsistency produces unpredictable SEO behaviour across the site.

How we fix it

Router architecture audit and migration plan

We map your current routing architecture, identify which routes are still on the Pages Router and assess the SEO impact of the mixed state. We then produce a migration plan prioritised by SEO impact, starting with the highest-traffic and most commercially important routes, with implementation specifications that your developer can follow to migrate each route correctly.

Our process

How our Next.js SEO service works

1

Next.js SEO audit

We audit your full Next.js implementation - App Router architecture, metadata coverage across all routes, sitemap generation, rendering strategy, JSON-LD schema, Core Web Vitals and crawl data from Google Search Console - before recommending anything.

2

Specifications and strategy

We produce a prioritised action plan with developer-ready implementation specifications for every recommended change, including code examples your team can use directly. Technical fixes are prioritised first, followed by content and authority work.

3

Implementation support

We work alongside your development team throughout - answering technical questions, reviewing pull requests for SEO correctness and validating changes in staging before they go live so nothing ships that creates a new problem.

4

Monitoring and growth

Once the technical foundations are correct we shift to content strategy, keyword targeting and authority building, with monthly reporting on rankings, organic traffic and Core Web Vitals so you can track what the investment is delivering.

Why SplinterSEO

Why Next.js teams choose SplinterSEO

Next.js SEO sits at the intersection of SEO expertise and front-end architecture knowledge. We understand both sides, which means we can engage with your development team as peers rather than as a third party that needs everything translated.

We understand the Next.js architecture

We know how the App Router, server components, generateMetadata, sitemap.ts, rendering strategies and next/image work together from an SEO perspective. Your team does not need to explain the stack before we can help.

Developer-ready specifications

Every recommendation comes with a clear written specification including code examples, file paths and expected outputs. Your developer should be able to implement each change without needing further interpretation or back-and-forth.

Honest, no-contract approach

We do not lock clients into long-term contracts. We are upfront about what Next.js SEO requires in terms of development time and content investment so you can make an informed decision before committing to anything.

Focused on organic outcomes

We measure success by rankings, organic traffic and enquiries. Everything we prioritise is tied to something that will move those numbers, not by the volume of recommendations we produce.

Clear reporting for technical and non-technical stakeholders

Your monthly report covers rankings, organic traffic and technical health in plain English, written to be understood by both the development team and any non-technical business stakeholders involved in the project.

Who it is for

Who is Next.js SEO right for?

Our Next.js SEO service is built for teams who have invested in a modern front-end architecture and want to make sure the SEO implementation is as strong as the rest of the codebase.

Development teams with SEO gaps in their Next.js implementation

You have built a well-architected Next.js site but SEO was not a priority during development. You know the metadata pipeline is incomplete, schema is missing and the sitemap does not cover all your dynamic routes. You need someone who can audit the full implementation and tell you exactly what needs fixing without requiring your team to explain the stack first.

Agencies building client sites on Next.js

You are an agency that builds on Next.js and wants an SEO partner who can plug in at the project level - advising on metadata architecture during the build, reviewing implementations in code review and providing ongoing SEO support for clients after launch without requiring constant handholding on the technical context.

Sites migrating from other frameworks to Next.js

You are migrating an existing site to Next.js and need SEO input at every stage - URL mapping, redirect planning, metadata migration, structured data implementation and post-migration validation to confirm nothing has been lost in the transition. Migrations are one of the highest-risk moments for organic visibility.

Businesses where organic search is a significant growth lever

Your Next.js site generates some organic traffic but you believe there is significantly more available. You want a structured content and technical SEO strategy that takes full advantage of Next.js's performance capabilities to compete effectively for high-value keywords in your market.

Northern Ireland and UK teams on modern stacks

You are a business or agency in Northern Ireland or the wider UK building on Next.js and you want an SEO partner who understands both the technology and the market. We work with teams across the UK on Next.js projects regardless of the CMS or data layer in use.

It may not be the right fit if...

You need SEO improvements immediately but have no developer capacity to implement changes. Our recommendations require developer time to action.

Your site is in early development and the routing structure is not yet established. SEO input is most useful once the architecture is defined.

You are looking for a generic SEO checklist rather than a considered strategy. Next.js SEO has enough specific implementation detail that a generic approach tends to miss the issues that actually matter.

Not sure if your project is the right fit? Get in touch with a brief description of your stack and goals and we will give you an honest answer before you commit to anything.

Contact Us For Next.js SEO

FAQs

Next.js SEO questions answered

Is Next.js good for SEO?
Yes - Next.js is one of the best frameworks available for SEO when implemented correctly. It supports server-side rendering and static generation out of the box, which means Googlebot receives fully rendered HTML rather than a JavaScript shell. The App Router metadata API gives precise control over titles, descriptions, canonical tags and Open Graph data. Built-in image optimisation via next/image, font optimisation via next/font and automatic code splitting all contribute to strong Core Web Vitals scores. The challenge is that all of this requires deliberate implementation - Next.js does not configure SEO for you the way a WordPress plugin does.
What is the difference between the App Router and Pages Router for SEO?
The two routers handle metadata and data fetching differently, which has direct SEO implications. The Pages Router uses Head components and getServerSideProps or getStaticProps for data fetching. The App Router uses generateMetadata functions and React Server Components. The App Router approach is generally cleaner for SEO because metadata is co-located with the page component and resolved server-side before the response is sent. If your project uses both routers, it is important to ensure metadata is handled correctly in both contexts as the two systems do not share configuration.
How should I implement metadata in a Next.js App Router project?
Each page or layout in the App Router should export a generateMetadata function that returns a Metadata object. This should cover title, description, alternates.canonical, openGraph (including title, description, images and type), twitter (card type and images) and robots directives where relevant. For dynamic routes, generateMetadata receives the route params and should fetch the relevant content to populate the metadata. Default fallback metadata should be defined in the root layout, but page-level metadata should always override these defaults rather than inheriting them unchanged.
How do I generate a dynamic sitemap in Next.js?
Next.js 13.3 and above supports a sitemap.ts file in the app directory root that exports a default function returning an array of MetadataRoute.Sitemap objects. For dynamic content, this function should fetch all published URLs from your CMS, database or API and map them to their front-end paths with lastModified timestamps. The sitemap is automatically accessible at /sitemap.xml and should be referenced in your robots.ts file. For sites with more than 50,000 URLs, Next.js supports generating multiple sitemap files automatically through the generateSitemaps export.
Should structured data be rendered server-side or client-side in Next.js?
Server-side. JSON-LD schema should be rendered in the initial HTML response so Googlebot can read it during the first crawl without waiting for JavaScript execution. In the App Router, this means adding a script tag with type="application/ld+json" directly in a Server Component, either in the page component or the layout. Avoid injecting schema via useEffect, client-side tag managers or third-party SEO scripts that fire after page load, as Googlebot does not guarantee JavaScript execution and the schema may be absent from the version of the page that gets indexed.
We are based in Northern Ireland. Can you help with Next.js SEO locally?
Yes. SplinterSEO is based in Northern Ireland and we work with development teams and businesses across Northern Ireland and the wider UK. Next.js projects are inherently remote-friendly and we work asynchronously or via calls depending on what suits your team. Whether you are an agency in Belfast building client sites on Next.js, an in-house team managing a Next.js application, or a UK business with a distributed development team, we can provide the SEO expertise your project needs.