DEV Community

Cover image for How to Optimize Your Next JS App for SEO and Boost Your Rankings
Jayant
Jayant

Posted on

How to Optimize Your Next JS App for SEO and Boost Your Rankings

1) Adding Meta & tag

Meta data helps the Search engine crawler to get the Info. about the Site, like its Title and Description

To add the Title & the Meta Data we have to use the <Head> Component.

import Head from 'next/Head';
// H Must be Capital
Enter fullscreen mode Exit fullscreen mode

Inside the Head Component we can add the Title & Meta Data

return (
    <>
        <Head>
            <title>NEXT JS Events</title>
            <meta title="description" content="List of all Events"/>    
        <Head/>
        <h1>HOMEPAGE</h1>
    </>
)
Enter fullscreen mode Exit fullscreen mode

Some Imp. Tips while Using Head Comp.

  • If we have multiple return statements for single Page then we can assign the value of the Head component to a variable and then use that everywhere.
let head = (
        <Head>
            <title> Filtered Event</title>
            <meta title="description" content="List of Filtered Data" />
        </Head>
    );

return (
        <>
            {head}
            <h1>HI</h1>
        </>
)
Enter fullscreen mode Exit fullscreen mode
  • If we want to apply generic meta data inside the Head for every page, we can include that in the _app.js file.
import "../styles/globals.css";
import Head from "next/head";
//! This App Component is gonna rendered on every page
//! with this we can add any generic components like Navbar or Head

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                {/*
          //! Generic Head 
          //* If we don't apply the head then these gonna apply.
          //* Next JS merges the Head
                    //* If we have the page Title & meta data then these will not apply 
                    //* Also Next JS Merges the Head [if there are more than one, means we can 
have more than one head in single page], & the Content of the head will be selected on 
priority bases, if we have 2 title then 2nd title will be taken.
        */}
                <title>Next JS Event</title>
                <meta title="description" content="List of all Events" />
            </Head>
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

Merging Heads → Next JS merges the head and combines them into one if we have multiple heads. If the head has the same tags inside it but with different content, then the latest head component will be taken. We can separate the meta tag using the key attribute.

2) Reusing Components

_App.js File

It is the Root Component of our Application. The _app file is called during each page initialisation.

This can be used for 2 things

  • Reusing a Common Layout / Component
  • Adding Global CSS to our Entire App
import Layout from "../components/layout/layout";
import "../styles/globals.css";
import Head from "next/head";
//! This App Component is gonna rendered on every page
//! with this we can add any generic components like Navbar or Head

function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Head>
                {/*
          //! Generic Head 
          //* If we don't apply the head then these gonna apply.
          //* Next JS merges the Head
        */}
                <title>Next JS Event</title>
                <meta title="description" content="List of all Events" />
            </Head>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;
Enter fullscreen mode Exit fullscreen mode

_document.js

The _document file is called during page initialization and it is used to override the default Document page. Within the _document file you can update the HTML and Body tags to override the default implementation.

This can be used for 2 things

  • Adding a Custom Language to the HTML Tag
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • Adding a Custom ClassName to the Body Tag
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head />
      <body className="bg-black">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode
  • Adding an HTML Tag, separate from the DOM Tree
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
    // We can make changes into this file & that directly affect the HTML Document
    return (
        <Html lang="en">
            <Head />
            {/* Not same as Head tag used Earlier */}
            {/* CSS Applied to Body tag */}
            <body style={{ backgroundColor: "black" }}>
                {/* This Div will be placed before all the Components and separate from the DOM Tree*/}
                <div>HI There Inside Everything</div>
                <Main />
                {/* All the components are rendered inside the Main */}
                <NextScript />
            </body>
        </Html>
    );
}
Enter fullscreen mode Exit fullscreen mode

Optimising Images

Next JS has its own Image Component for images Optimization

import Image from "next/image";
export default function optimized() {
  return (
    <>
        {/* 
                //! The Next Js Image also need 2 component width & height, these are the width and width which are used when our page is loaded, and CSS will also apply. 
                //* Next JS doesn't prerender the Image, It will render when it needs it, Next Js creates multiple version of the Image & optimise them for the different screen sizes & then save them for later use.

            */}
            <Image src={"/" + image} alt={title} width="250" height="300" />
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
musabdev profile image
Musab

Great. But there are some other ways to optimize it.

  1. Adding robots.txt
  2. Adding sitemap.xml
  3. Using meta tags
  4. Perfecting lighthouse report

There are lots of more. But I think these are important for SEO