Next.js offers several features <\/a>that benefit SEO, including font and image optimization, custom head, script, and link components.<\/p>\n\n\n\n However, its primary benefit is its ability to render web pages on the server (SSR) instead of in the browser (Client-side).<\/strong><\/p>\n\n\n\n This allows search engine crawlers to better understand and index web pages.<\/strong> It also provides a faster load time, improving important Core Web Vitals<\/a> that are key to SEO success. <\/p>\n\n\n\n In this article, we’ll explore how to leverage Next.js (one of the most popular React frameworks) to create server-side rendered pages optimized for search engines. <\/strong><\/p>\n\n\n\n To illustrate how to use Next.js for SEO, we’ll create a project called “Country of the Day” that displays information about a given country based on what day it is using the publicly-available API REST Countries<\/a>.<\/p>\n\n\n\n The repository for this project is available on GitHub.<\/a><\/p>\n\n\n\n With the API integrations set up and the business logic in place, we can access today\u2019s country information with the following line of code:<\/p>\n\n\n The ‘ To define the title and meta description of the page, export a constant called ‘metadata’ within the page file, as shown in the example below:<\/p>\n\n\n You can also create a standardized template<\/em> that automatically adds the website name to each page title, increasing brand awareness.<\/p>\n\n\n\n You can do this in the layout.tsx file at the root of the app<\/strong> directory:<\/p>\n\n\n Thanks to this code, all website pages will follow the same \u201cpage title + website name\u201d structure. <\/p>\n\n\n\n Alternatively, you can create dynamic metadata within the application by exporting an asynchronous function called ‘ This code retrieves the name and flag of the country to create the title, meta description, and Open Graph images of the page.<\/p>\n\n\n\n Dynamic Metadata also allows you to retrieve parameters from the page\u2019s URL, such as the id<\/em> or the slug<\/em>. To do this, use the following code:<\/p>\n\n\n If you want to create the app icons for your Country of the Day application, you can use the file-based metadata with Vercel’s Edge Functions.<\/p>\n\n\n\n To do this, create a favicon based on the country of the day. Using the Next.js documentation<\/a>, add a file called And there you have it \u2014 a dynamic favicon based on the country of the day \ud83e\udd29<\/p>\n\n\n\n You can also create other files such as robots.txt<\/strong>, sitemap.xml<\/strong>, and Open Graph images<\/strong>, as shown in the example below.<\/p>\n\n\n\n The Open Graph, an internet protocol developed by Facebook, standardizes metadata to improve how a page\u2019s content is represented.<\/p>\n\n\n\n With it, you can enhance the link-sharing experience on the web, attracting more visitors to your content.<\/p>\n\n\n\n However, creating and sharing images for each new page on a website can be costly. Instead, let\u2019s automate this process.<\/strong><\/p>\n\n\n\n Similar to creating a favicon, create a file called This code will return an ImageResponse \u2014 an image generated with JavaScript. The coolest part is that you can create images based on the route segment of the application, as the Next.js documentation shows here.<\/a><\/p>\n\n\n\n In this example, let\u2019s create an image similar to the layout below:<\/p>\n\n\n\nHow to leverage Next.js for SEO<\/strong><\/h2>\n\n\n\n
Project setup<\/strong><\/h3>\n\n\n\n
const<\/span> country = await<\/span> getCountry();<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\ncountry<\/code>‘ object provides the country\u2019s name, capital city, flag, population, and currency, among others, as shown in this example.<\/a><\/p>\n\n\n\nStatic metadata<\/strong><\/h3>\n\n\n\n
import<\/span> type<\/span> { Metadata } from<\/span> 'next'<\/span>\n \nexport<\/span> const<\/span> metadata: Metadata = {\n title: 'Country of the day'<\/span>,\n description: 'Discover the country of the day in our amazing page!'<\/span>,\n}\n \nexport<\/span> default<\/span> function<\/span> Page<\/span>(<\/span>) <\/span>{}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\nimport<\/span> { Metadata } from<\/span> 'next'<\/span>;\n\nexport<\/span> const<\/span> metadata: Metadata = {\n title: {\n default<\/span>: 'Country of the day'<\/span>,\n template: '%s - Country of the day'<\/span>,\n }\n};\n\nexport<\/span> default<\/span> function<\/span> RootLayout<\/span>({\n children,\n}: {\n children: React.ReactNode;\n}<\/span>) <\/span>{\n return<\/span> children;\n}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\nDynamic metadata<\/strong><\/h3>\n\n\n\n
generateMetadata<\/code><\/strong>‘, as shown in the example below:<\/p>\n\n\nimport<\/span> { Metadata } from<\/span> 'next'<\/span>\n \nexport<\/span> async<\/span> function<\/span> generateMetadata<\/span>(<\/span>): Promise<\/span><Metadata<\/span>> <\/span>{\n const<\/span> country = await<\/span> getCountry()\n\n const<\/span> {\n name,\n flags,\n } = country;\n \n return<\/span> {\n title: name.common,\n description: name.official,\n openGraph: {\n images: ['\/some-specific-page-image.jpg'<\/span>, ...flags.png],\n },\n }\n}\n \nexport<\/span> default<\/span> function<\/span> Page<\/span>(<\/span>) <\/span>{}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\nimport<\/span> { Metadata } from<\/span> 'next'<\/span>\n \ntype<\/span> Props = {\n params: { id: string<\/span> }\n}\n \nexport<\/span> async<\/span> function<\/span> generateMetadata<\/span>(\n { params }: Props,\n<\/span>): Promise<\/span><Metadata<\/span>> <\/span>{\n \/\/ read route params<\/span>\n const<\/span> id = params.id\n \n \/\/ fetch data<\/span>\n const<\/span> product = await<\/span> fetch(`https:\/\/...\/${id}<\/span>`<\/span>).then((res<\/span><\/span>) =><\/span> res.json())\n \n return<\/span> {\n title: product.title,\n description: product.description,\n openGraph: {\n images: ['\/some-specific-page-image.jpg'<\/span>, ...product.image.url],\n },\n }\n}\n \nexport<\/span> default<\/span> function<\/span> Page<\/span>({ params }: Props<\/span>) <\/span>{}<\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\nFile-based metadata<\/strong><\/h3>\n\n\n\n
icon.tsx <\/code>in the root of the app directory:<\/p>\n\n\nimport<\/span> getCountry from<\/span> \"@\/services\/country\"<\/span>;\nimport<\/span> { ImageResponse } from<\/span> \"next\/og\"<\/span>;\n\nexport<\/span> const<\/span> runtime = \"edge\"<\/span>;\n\nexport<\/span> const<\/span> size = {\n width: 32<\/span>,\n height: 32<\/span>,\n};\nexport<\/span> const<\/span> contentType = \"image\/png\"<\/span>;\n\nexport<\/span> default<\/span> async<\/span> function<\/span> Icon<\/span>(<\/span>) <\/span>{\n const<\/span> country = await<\/span> getCountry();\n\n return<\/span> new<\/span> ImageResponse(\n (\n <div\n style={{\n background: \"#333\"<\/span>,\n width: \"100%\"<\/span>,\n height: \"100%\"<\/span>,\n display: \"flex\"<\/span>,\n alignItems: \"center\"<\/span>,\n justifyContent: \"center\"<\/span>,\n paddingLeft: 4<\/span>,\n paddingRight: 4<\/span>,\n }}\n >\n <img src={country.flags.png} alt={country.name.official} \/>\n <\/div>\n ),\n {\n ...size,\n },\n );\n}<\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\nOpenGraph<\/strong><\/h3>\n\n\n\n
opengraph-image.tsx<\/code> in the directory of your page within the app folder of your application. <\/p>\n\n\n\n![\"og](\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2024\/05\/open-graph-next.js-for-seo.png\")
<\/figure>\n\n\n\n