Using React Server Components for SEO Optimization

Show how to use server components to improve SEO by server-side rendering metadata such as title and meta tags within a Next.js 14 application.
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
          {/* Server-render your meta tags here */}
          <title>My Page Title for SEO</title>
          <meta name='description' content='My page description for SEO purposes.' />
          <meta property='og:title' content='My Page Title for SEO' />
          <meta property='og:description' content='My page description for SEO purposes.' />
          <meta property='og:type' content='website' />
          {/* ... additional meta tags ... */}
          <Main />
          <NextScript />

export default MyDocument;
This is a custom Document in a Next.js application that allows you to modify the server-rendered document markup. By placing meta tags within this file, you're ensuring they are server-rendered, which can improve SEO performance.
// components/SEO.js
import Head from 'next/head';

// Server-rendered SEO component
function SEO({ title, description }) {
  return (
      <meta name='description' content={description} />
      <meta property='og:title' content={title} />
      <meta property='og:description' content={description} />
      {/* Additional SEO related tags */}

export default SEO;
This is a React component that you can use within your pages to inject SEO-related elements like the title or meta tags dynamically, while still being server-rendered for better SEO.
// pages/index.js
import SEO from '../components/SEO';

export default function Home() {
  return (
      <SEO title='Homepage Title' description='Description of the homepage.' />
      {/* Page content */}
In your Next.js page, you can now import and use the SEO component to set dynamic SEO meta tags for each specific page. This component will be server-rendered, which is beneficial for SEO.