- page title: Each page has
<Head>
Components provided by Next.js. Include relevant keywords in your title to increase search engine visibility.
// app routerimport Head from 'next/head';
function MyPage() {
return (
<>
<Head>
<title>My Page Title</title>
<meta name="description" content="This is a description of my page." />
</Head>
<div>
{/* Page content */}
</div>
</>
);
}
export default MyPage;
2. Meta description: Include a concise Persuasive meta description per page as it may appear in search engine results. Meta descriptions don't directly affect rankings, but they can affect click-through rates.
3. Structured data: use JSON-LD or other structured data formats to mark up your content so search engines can understand the context of your page. This may improve the display of rich snippets in search results.
import Head from 'next/head';function MyPage() {
const structuredData = {
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://www.example.com",
"name": "Example Organization"
};
return (
<>
<Head>
<script type="application/ld+json">{JSON.stringify(structuredData)}</script>
</Head>
<div>
{/* Page content */}
</div>
</>
);
}
export default MyPage;
4. Canonical URL: Specify. Canonical URL For each page, it indicates to search engines the preferred version of the page, especially for pages with similar or duplicate content.
import Head from 'next/head';function MyPage() {
return (
<>
<Head>
<link rel="canonical" href="https://www.example.com/my-page" />
</Head>
<div>
{/* Page content */}
</div>
</>
);
}
export default MyPage;
5. Internal links: Use internal links to connect related pages within your site. This allows search engines to discover and index your content more efficiently.
import Link from 'next/link';function MyPage() {
return (
<div>
<Link href="/another-page">
<a>Link to Another Page</a>
</Link>
</div>
);
}
export default MyPage;
6. Image optimization: Optimize images Adjust size, improve accessibility, and include descriptive alt text to provide additional context to search engines.
import Image from 'next/image';function MyPage() {
return (
<div>
<Image src="/image.jpg" alt="Description of Image" width={500} height={300} />
</div>
);
}
export default MyPage;
7. Mobile responsiveness: Mobile usability is a ranking factor for search engines like Google, so make sure your site is mobile-friendly.
8. Page speed: Improve page speed This is achieved by optimizing your code, using efficient hosting, and leveraging Next.js features such as automatic code splitting and image optimization.
9. Robots.txt and Sitemap.xml: Use the robots.txt file to control which pages search engines can crawl and index, and submit the sitemap.xml file to help search engines discover and understand the structure of your site.
Similar to page routers, you can create static or dynamic sitemaps\robots.txt. Both are about creating a file in the root of your project.
- static (
sitemap.xml
||robots.txt
) - Dynamic (
sitemap.ts
||robots.ts
)
10. Performance monitoring: Regularly monitor your site's performance using tools like Google Search Console and Google Analytics to identify and address SEO issues.