MERN

⌘K
  1. Home
  2. Docs
  3. MERN
  4. Seo

Seo

open layout.js in pages folder in app component

import { Inter } from "next/font/google";
import "./globals.css";
// Step 1  Add Head 
import Head from "next/head"; 

const inter = Inter({ subsets: ["latin"] });


// Step 2 add meta data like title,description etc
export default function RootLayout({ children,pageTitle, pageDescription }) {
// step 3 set meta data
  const title = pageTitle || "Create Next App";
  const description = pageDescription || "Generated by create next app";


  return (
    <html lang="en">
     {/* step 4 configure head */}
        <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}
JavaScript

for a loop page use static meta data

import RootLayout from '../components/RootLayout';

export default function Home() {
  return (
    <RootLayout pageTitle="Home Page" pageDescription="Welcome to our homepage!">
      <main>
        <h1>Welcome to Our Website</h1>
        <p>This is the homepage of our awesome Next.js application.</p>
      </main>
    </RootLayout>
  );
}
JavaScript

For a dynamic page like a blog post, you can fetch the post’s title and description to use as the metadata.

// Step 1
import RootLayout from '../../components/RootLayout';

export default function BlogPost({ post }) {
  return (
  {/* step 2 */}
    <RootLayout pageTitle={post.title} pageDescription={post.excerpt}>
      <article>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
      </article>
    </RootLayout>
  );
}

export async function getServerSideProps(context) {
  const { slug } = context.params;
  const res = await fetch(`https://your-api.com/posts/${slug}`);
  const post = await res.json();

  return {
    props: { post },
  };
}
JavaScript

Articles

How can we help?