Nextjs
Published in

Nextjs

Nextjs + SEO

How to Add SEO in the Nextjs app?

Add full support of SEO with copy-paste of code.

SEO help to grow your website audience widely. Without SEO, you never grow up your website.

We add SEO within 10 mint on your next.js website. So you do not need to write an extra line of code on your next.js website. Instead, you copy and paste code to achieve SEO power.

How to Add SEO in the Nextjs app?

All the codes are available on GitHub Repo. You can also check the final website demo with vercel.

Requirments

  1. The latest version of next.js
  2. Basics knowledge of SEO schema
  3. NPM

The latest version of next.js

Make sure you have the latest version of nextjs if possible otherwise, you use an old version of nextjs, but the method is not changed.

What is schema.org

Schema.org is an open-source project built by Google, Microsoft, Yahoo, and Yandex. Schema.org help to define a universal schema for all search engine.

NPM

NPm is a javascript package manager. With the npm, you can add the other library into your nextjs app.

There are serval libraries in nextjs to provide SEO functionality.

Steps

  1. Install library
  2. Folder structure
  3. Universal SEO
  4. Page By page SEO

Install library

In the first step, you install a library. the npm library name is next-seo . the next-seo provide lots of functionality to developers, and secondly, it is easy to use.

npm install -D next-seo

Folder structure

Add SEO in the Nextjs app folder structure
the nextjs app folder structure.

Universal SEO

Universal SEO means you define some common SEO information that defines one place or time, and it is available on all pages in nextjs.

In Nextjs, you can handle universal seo very easily. nextjs provide custom _app.jshelp to handle Universal SEO.

Firstly we create a file at the root level with next-seo.config name. The file name is fixed and never be changed.

Add SEO in the Nextjs app folder structure.
Add the next-seo.config file in the Nextjs app.
export default {     openGraph: {        type: 'website',        locale: 'en_IE',        url: 'https://officialrajdeepsingh.dev',        site_name: 'Rajdeep Singh',      },    twitter: {       handle: '@Official_R_deep',       site: '@Official_R_deep',       cardType: 'summary_large_image',     }};

After we pass ./next-seo.config file as props into the DefaultSeo component. The DefaultSeo component provides by next-seo itself.

import '../styles/globals.css'import Header from "../components/Header";import Footer from "../components/Footer";import { DefaultSeo } from 'next-seo';import SEO from '../next-seo.config';function MyApp({ Component, pageProps }) {return ( <><DefaultSeo {...SEO} /><Header/><Component {...pageProps} /><Footer /></>)}export default MyApp

Page By page SEO

We pass only those relevant SEO data to the page component.

import { NextSeo } from 'next-seo';import Post from '../components/Post'import Banner from "../components/Banner";import Sidebar from "../components/Sidebar"import { ImageUrl} from '../utils'export default function Home({ posts }) {return (<div>  <NextSeo    title="Welcome to my blog home page"    description="Build nextjs blog website with Markdown, sitemap, serachbar, category, tag and SEO support"    openGraph={{      url: 'http://officialrajdeepsingh.dev',      title: 'Welcome to my blog home page',      description: 'Build nextjs blog website with Markdown, sitemap, serachbar, category, tag and SEO support',     images: [                   url: `${ImageUrl('banner.png')}`,                   width: 1224,                   height: 724,                   alt: 'banner',                   type: 'image/jpeg',                 },             ],}}/><Banner /><div className="container">    <div className="row">      <div className="col-lg-8">         { posts.map((post, index) => (            <Post key={index} post={post} />           ))
}
</div> <Sidebar /> </div> </div></div>)}

All the codes are available on GitHub Repo. You can also check the final website demo with vercel.

Conclusion

In this way, you easily add SEO in your nextjs. All the nextjs base SEO library is good. You can use any of them and build an SEO schema for your website.

You can follow me on Twitter and tweet with me.

https://twitter.com/@Official_R_deep

Suppose you like more articles about Linux, Ubuntu, and Raspberry pi 4. Then you visit my website.

https://officialrajdeepsingh.dev/

Read More content at Nextjs

--

--

--

Nextjs Publication is an unofficial publication of Nextjs. Our goal is to bring beginners and pro developer in one place, and everybody understands the basic concept of next.js.

Recommended from Medium

Demystifying ‘this’ in JavaScript

Create your own npm package with svelte

Writing REST API Client in Go

Why did we move Gatsby into nextjs?

RxJs, Streams & the Ford Assembly Line

Basics of Express, Routing & Middleware

Automating Starting and Stopping Appium Server in your Appium Framework.

JAVASCRIPT BLOG

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/

More from Medium

Build the SEO And Sitemap functionality in a static blog with Next.js and Markdown

Build the SEO And Sitemap functionality in a static blog with Next.js and Markdown

Migrating To NextJS From React

GET and POST with Next.js SWR and Supabase Auth

Build PWA (Progressive Web App) with Next JS under 1 minute