How to Optimize Your Next JS App for SEO and Boost Your Rankings
Tags: nextjs, seo, optimizing, performance
Published: 2023-03-03 14:56:50

## 1) Adding Meta & <head> 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.**

```jsx
import Head from 'next/Head';
// H Must be Capital
```

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

```jsx
return (
	<>
		<Head>
			<title>NEXT JS Events</title>
			<meta title="description" content="List of all Events"/>	
		<Head/>
		<h1>HOMEPAGE</h1>
	</>
)
```

### 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.**

```jsx
let head = (
		<Head>
			<title> Filtered Event</title>
			<meta title="description" content="List of Filtered Data" />
		</Head>
	);

return (
		<>
			{head}
			<h1>HI</h1>
		</>
)
```

- **If we want to apply generic meta data inside the Head for every page, we can include that in the `_app.js` file.**

```jsx
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;
```

**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

```jsx
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;
```

### _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

```jsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

- Adding a Custom ClassName to the Body Tag

```jsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head />
      <body className="bg-black">
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
```

- **Adding an HTML Tag, separate from the DOM Tree**

```jsx
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>
	);
}
```

### Optimising Images

**Next JS** has its own Image Component for images Optimization

```jsx
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" />
    </>
  );
}
```