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();
}