Some best practices within App Router are contributing to letting search engines crawl, index, and rank your site effectively. The following are a number of key strategies for improving SEO in your Next.js application:
1. Server Side Rendering and Static Site Generation
SSR: Dynamically generated pages—so it considers the request—it provides, therefore, in no time, content crawlable for search engines. SSG: Targeting those pages that are not dynamic—Static Site Generation—not frequently updated, fast load times, content already available to the crawlers in advance.
Title Tags: Another title tag and its description is supposed to be on every page.
Meta Descriptions: A short and relevant meta description of the pages.
Open Graph Tags: The Open Graph tags are used to add richer structure to your pages when shared on social media.
import Head from 'next/head';
const MyComponent = () => (
<Head>
<title>My Page Title</title>
<meta name="description" content="My page description" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My page description" />
<meta property="og:type" content="website" />
</Head>
);
Adding canonical tags avoids duplicate content and pins that version of the page as preferred for search engines.
import Head from 'next/head';
const MyComponent = () => (
<Head>
<link rel="canonical" href="https://www.example.com/my-page" />
</Head>
);
4. Structured Data
Use schema.org structured data to describe what kind of content is coming from your pages. Information regarding structured data should be added in JSON-LD format.
import Head from 'next/head';
const MyComponent = () => (
<Head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "WebPage",
"name": "My Page Title",
"description": "My page description",
}),
}}
/>
</Head>
);
Image Optimization: Use next/image to solve all the image loading issues it can.
Code Splitting: Apply dynamic imports to help trim down the initial load time to a minimum.
Caching: Proper caching using HTTP headers.
6. URL Structure and Routing
This will contain clean and readable URLs targeting the keywords for better SERP position. Proper settings for dynamic routes and dynamic paths for SEO-friendly URLs in Next.js.
import { useRouter } from 'next/router';
const Post = () => {
const router = useRouter();
const { id } = router.query;
return <p>Post: {id}</p>;
};
7. Internal Linking
Logically and clearly structuring inner linking makes some layers of hierarchy or other relations smoothly explained to the search engines.
8. XML Sitemaps
Generate an XML sitemap and send it over to the search engines for them to more easily discover the pages and index those that are necessary.
import { SitemapStream, streamToPromise } from 'sitemap';
import { Readable } from 'stream';
const sitemap = async (req, res) => {
const links = [{ url: '/', changefreq: 'daily', priority: 0.3 }];
const stream = new SitemapStream({ hostname: `https://example.com` });
res.writeHead(200, { 'Content-Type': 'application/xml' });
const xmlString = await streamToPromise(Readable.from(links).pipe(stream)).then((data) =>
data.toString()
);
res.end(xmlString);
};
export default sitemap;
9. Mobile-Friendliness
Make it responsive by following responsive design best practices. This is because Google gives mobile-friendly websites a priority in its search results.
10. Monitoring and Analytics
Track how your site is performing, and where there is room for improvement from Google Analytics and Google Search Console.
These best practices, when used within your project, will greatly enhance SEO in a Next.js application and make your application discoverable to search engines.
I have personally used these strategies in building my AI Interviewing app project, Recroo AI, and they have been providing great results so far.
