Skip to content

Latest commit

 

History

History
126 lines (97 loc) · 3.23 KB

Metadata.md

File metadata and controls

126 lines (97 loc) · 3.23 KB
Raw

Metadata in Next.js

Table of Contents

Introduction Importance of Metadata Managing Metadata in Next.js Dynamically Generated Metadata

Introduction

Next.js offers a powerful way to manage metadata for your application, which is crucial for SEO, accessibility, and enhancing the user experience. Metadata typically includes title tags, meta descriptions, and Open Graph tags, among others.

Importance of Metadata

  • SEO (Search Engine Optimization): Properly configured metadata improves the chances of your pages ranking higher in search engine results.
  • Social Sharing: Open Graph tags help create rich social media snippets, making shared links more attractive.
  • Accessibility: Metadata contributes to better accessibility, allowing screen readers to interpret and convey information more efficiently.

Managing Metadata in Next.js

In Next.js, metadata can be managed through the Head component from next/head. Here's how to use it:

Example

import Head from 'next/head';

const MyPage = () => {
  return (
    <>
      <Head>
        <title>Your Page Title</title>
        <meta name="description" content="Your page description goes here." />
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="Your page description goes here." />
        <meta property="og:image" content="URL to your image" />
        <meta property="og:url" content="URL to your page" />
      </Head>
      <main>
        <h1>Welcome to My Page</h1>
        <p>This is an example page demonstrating metadata usage in Next.js.</p>
      </main>
    </>
  );
};

export default MyPage;

Dynamically Generated Metadata

For dynamic metadata, you can utilize Next.js's getServerSideProps or getStaticProps for server-side rendering, allowing you to modify metadata based on incoming data.

Example with getStaticProps

import Head from 'next/head';

export async function getStaticProps() {
  const data = await fetchSomeData();

  return {
    props: {
      title: data.title,
      description: data.description,
    },
  };
}

const DynamicPage = ({ title, description }) => {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Head>
      <main>
        <h1>{title}</h1>
        <p>{description}</p>
      </main>
    </>
  );
};

export default DynamicPage;

Example with getServerSideProps

import Head from 'next/head';

export async function getServerSideProps(context) {
  const data = await fetchSomeData(context.params.id);

  return {
    props: {
      title: data.title,
      description: data.description,
    },
  };
}

const DynamicPage = ({ title, description }) => {
  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Head>
      <main>
        <h1>{title}</h1>
        <p>{description}</p>
      </main>
    </>
  );
};


export default DynamicPage;

In both cases, the title and description props are passed to the DynamicPage component, which uses them to render the metadata.

[EOF]