Introduction to SEO in Next.js

Discover how Next.js helps optimize your website for search engines.

Introduction to SEO in Next.js

In the rapidly evolving digital landscape, achieving high visibility on search engines is crucial for any online presence. Search Engine Optimization (SEO) plays a pivotal role in enhancing your website’s visibility and driving organic traffic. Next.js, a popular React framework, offers robust features that make it an excellent choice for building SEO-friendly websites. In this blog, we will explore how Next.js empowers developers to optimize their applications for search engines!

Seeing your website online without deploying (link)

ssh srv.us -R 1:localhost:3000

Past the link you get back into this website

Layout.tsx

Title

Title template

export const metadata: Metadata = {
	title: {
		default: "QuickTales",
		template: "%s | QuickTales",
	},
	// escape the template on another page
	title: {
		absolute: "About",
	},
};

Icons

export const metadata: Metadata = {
	icons: {
		icon: [
			{
				media: "(prefers-color-scheme: light)",
				url: "/logo-light.png",
				href: "/logo-light.png",
			},
			{
				media: "(prefers-color-scheme: dark)",
				url: "/logo-dark.png",
				href: "/logo-dark.png",
			},
		],
	},
};

Dynamic metadata

export async function generateMetadata(params: Params): Promise<Metadata> {
	return {
		// return a metadata object here
		openGraph: {
			images: [
				{
					url: "put image url here",
				},
			],
		},
	};
}

Deduplicate double requests if not using fetch

import { cache } from "react";

// make a function
const getPosts = cache(async () => {
  /// get all posts
});

export async function generateMetadata(params: Params): Promise<Metadata> {
  const posts = await getPosts();
}

export default page() {
  const posts = await getPosts();
}