Next.js is like a superhero for developers who want their websites to shine on Google. The new Next 13.2 made it even more incredible with the Metadata API. In this article, let's talk about how Next.js helps your website be super visible on search engines, what's new in version 13.2, and how it makes your site climb higher in the search results!
The latest version of Next.js brings exciting new features and enhancements, significantly impacting how developers can optimize their sites for search engines. Whether you're a seasoned developer or just starting, understanding these updates is crucial for maximizing your site's visibility and performance.
In this comprehensive guide, we delve into the intricacies of the latest Next.js version. We'll explore how its new features can be leveraged to enhance your website's SEO, making sure it not only looks good but also ranks well. From improved server-side rendering capabilities to enhanced routing techniques, we cover everything you need to know to stay on top of the SEO game.
Old Way of writing Seo in next js:
Before, to make our website look good on Google, we used the next/head tool. It lets us tweak things like meta and link tags in the head of our website pages. Adequate but straightforward for SEO management.
But guess what? With the fantastic new Next.js 13.2, there's an even better way called the Metadata API. It's like an upgraded tool to make our site more Google-friendly and super easy to manage!
New Way of Writing Seo in next js:
Now, with the latest Next.js 13.2, there's something fresh in town - the Metadata API [ https://nextjs.org/docs/app/building-your-application/optimizing/metadata ]. It's like the shiny, upgraded version that takes the simplicity of tweaking our website's meta and link tags to a new level. Let's dive in and see how this excellent tool can make our site even more awesome on search engines!
Essential Step:
First things first, let's start by importing the Metadata object from Next.js. It's like getting our hands on a special tool that helps us supercharge our website's SEO. Here's how you do it!import { Metadata } from 'next/head';
After importing, Here’s How you can use it :export const metadata: Metadata = { title: 'Home', description: 'Welcome to Next.js', }
After declaring the metadata object, let's discuss metadata params:
Title:
export const metadata: Metadata =
{ title: 'Home'; }
Usage: to set current page title
Description:
export const metadata: Metadata = { description: 'this page is about.......'; }
Usage: to set current page description
0penGraph:
export const metadata: Metadata = {
openGraph: { type: "website",
Url: "https://example.com",
title: "My Website",
description: "My Website Description",
siteName: "My Website",
images: [
{
url: "/android-192x192.png",
alt: "Website image",
width: 800,
height: 600,
},
],
},
}
Usage: to set opengraph metadata for current page
robots:
export const metadata: Metadata = {
robots: { index: true,
follow: true,
noarchive: true,
nosnippet: true,
noimageindex: true,
nocache: true }}
Usage: to control how search engines crawl and index your website.
Referrer:
export const metadata: Metadata = {
referrer: 'origin';
}
Usage: to set the referrer to one of the available values depending on the desired level of referrer information sent with requests.
Authors
export const metadata: Metadata = {
authors: [{
name: "Next.js Team",
url: "https://nextjs.org"
}]
}
Usage: Use the authors to set the document authors.
Generator
export const metadata: Metadata = {
generator:”Next.js”}
Usage: Use the generator to set the document generator.
category
export const metadata: Metadata = {
category:”your catagory”}
Usage: Use the category to set the category meta name property for the document.
manifest
export const metadata: Metadata = {
manifest:”https://site.com/manifest.json”}
Usage: Use the manifest to set the web application manifest for the document.
icons
export const metadata: Metadata = {
icons: [
{ rel: "icon", url: "/favicon.ico" },
{
rel: "icon",
type: "image/png",
sizes: "32x32",
url: "/favicon-32x32.png",
},
{
rel: "icon",
type: "image/png",
sizes: "16x16",
url: "/favicon-16x16.png",
},
{ rel: "apple-touch-icon", url: "/apple- touch-icon.png" },
{
rel: "icon",
type: "image/png",
sizes: "192x192",
url: "/android-chrome-192x192.png",
},
{
rel: "icon",
type: "image/png",
sizes: "512x512",
url: "/android-chrome-512x512.png",
},
],
}
Usage: Icons can improve the appearance of your content in search results and on social media, enhancing user experience and engagement.
alternates
export const metadata: Metadata = {
alternates:{
Canonical:”https://site.com”,
Hreflang:{
“en-US”:”https://site.com/en-Us”
}
}
}
Usage: Use the alternates to set the canonical and alternate URLs for the document.
publisher
export const metadata: Metadata = {
publisher:”versel”
Usage: to set the document publisher.
creator
export const metadata: Metadata = {
creator:”next.js team”
Usage: to set the document creator.
viewport
export const metadata: Metadata = {
viewport:”width=device-width,
Initial-scale=1”}
Usage: to set the viewport setting for the document.
colorScheme
export const metadata: Metadata = {
colorScheme:”dark”}
Usage: to set the color scheme for the document.
themeColor
export const metadata: Metadata = {
themeColor:”#000000”}
Usage: to set the theme color for the document.
keywords
export const metadata: Metadata = {
keywords:”nextjs,react,blog,seo”}
Usage: Keywords help search engines understand the content and can improve the ranking of your content in search results.
metadataBase
export const metadata: Metadata = {
metadataBase:”https://site.com”}
Usage: it helps search engines understand the correct path for your metadata assets, improving the presentation of your content in search results.
export const metadata: Metadata = {
twitter: twitter: {
card: "summary_large_image",
// we can add Hashtag content in it too
title: "title od page",
description: "#page: visit our site #Site",
// Website We Building, that Twitter Handle
site: "@IIDC8",
//Creator Twitter Handle
creator: "@creator",
// Twitter image
images: "/android-chrome-192x192.png",
},
}
Usage: openGraph for twitter.
Summary of metadata object:
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "title of page",
description: “page description",
keywords:"keyword 1,keyword 2 …....",
alternates: { canonical: "https://example.com" },
//------- Twitter -------
twitter: {
card: "summary_large_image",
// we can add Hashtag content in it too
title: "title of twitter opengraph",
description: "description of twitter opengraph”,
// Website We Building, that Twitter Handle
site: "@website",
//Creator Twitter Handle
creator: "@creator",
// Twitter image
images: "/android-chrome-192x192.png",
},
// ?--------- OpenGraph -----------
openGraph: {
type: "website",
// main name in bold black text when we share content
siteName: "website name",
title: "title of opengraph",
description: "description of opengraph",
// Url Of Current Page
url: "https://site.in",
countryName: "country",
images: [
{
url: "/android-chrome-192x192.png",
alt: "websiet Logo",
width: 800,
height: 600,
},
],
},
// !-------------- SAME Content for all SITE ---------------
metadataBase: new URL("http://website.com"),
referrer: "origin",
generator: "generator",
publisher: "Versel",
category: "My Website",
creator: "next js Team ",
manifest: "http://website.com/manifest.json",
// ? ------------ robots ---------------
robots: {
index: true,
follow: true,
noarchive: true,
nosnippet: true,
noimageindex: true,
nocache: true,
},
// ? ------------------- Authors ------------------
authors: [
{
name: "Next js Team ",
url: "https://website.com",
},
],
// ? --------------- Icons -------------------
icons: [
{ rel: "icon", url: "/favicon.ico" },
{
rel: "icon",
type: "image/png",
sizes: "32x32",
url: "/favicon-32x32.png",
},
{
rel: "icon",
type: "image/png",
sizes: "16x16",
url: "/favicon-16x16.png",
},
{ rel: "apple-touch-icon", url: "/apple-touch-icon.png" },
{
rel: "icon",
type: "image/png",
sizes: "192x192",
url: "/android-chrome-192x192.png",
},
{
rel: "icon",
type: "image/png",
sizes: "512x512",
url: "/android-chrome-512x512.png",
},
],
};
As we've explored throughout this guide, the latest version of Next.js is not just a step forward in web development; it's a leap towards more SEO-friendly web applications. The enhancements and new features it introduces are game-changers, offering developers innovative tools to optimize their sites for search engines effectively.
Understanding and implementing these features is crucial in an ever-evolving digital landscape where SEO can make or break a website's success. By leveraging the improved server-side rendering, dynamic routing, and other SEO-friendly capabilities of Next.js, developers can ensure that their sites not only deliver an outstanding user experience but also achieve the visibility they deserve in search engine results.
Remember, SEO is a journey, not a destination. It requires continuous learning, experimenting, and adapting to the latest trends and technologies. With Next.js at your side, you're well-equipped to face the challenges of modern web SEO and emerge victorious. And do not look think twice before approaching Obii Kriationz Web LLP for your SEO requirements - We are the best SEO Company in Bangalore
