When using `<meta>` tags in my Next.js (v 13.4.16) application, they are not being rendered correctly during server-side rendering (SSR). This is causing issues with SEO and social sharing previews #54939

nizamseu · 2023-09-03T08:50:59Z

nizamseu
Sep 3, 2023

Summary

In Next.js version 13.4.16, the tags are not being rendered during SSR.

import axios from "axios";
import { getSession } from "next-auth/react";
import Head from "next/head";

export default function CourseDetails({ props }) {
  return (
    <div>
 <Head>
        <title>{props?.title} | IOU</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <meta property="og:image" content={props?.thumbnail} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />

        <meta property="og:title" content={props?.title} />
        <meta property="og:description" content={props?.description} />

        <meta
          property="og:url"
          content={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/${props?.slug}`}
        />
        <meta
          property="og:type"
          content={process.env.NEXT_PUBLIC_FRONTEND_URL}
        />
        <meta
          property="og:article:author"
          content={`${props?.owner_info?.username}`}
        />
        <meta property="og:article:section" content={props?.tags_name} />
        <meta property="og:article:tag" content={props?.tags_name} />
        <meta property="og:type" content="website" />
        <link
          rel="canonical"
          href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/${props?.slug}`}
        />

      
      </Head>
    </div>
  );
}

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  const { query, res } = context;
  const { slug } = query;
  const url = `api/v1/public_course/${slug}/`;
  const config = {
    method: "GET",
    url: `${process.env.NEXT_PUBLIC_ROOT_URL}/${url}`,
  };
  if (session !== null) {
    config.headers = {
      Authorization: `Token ${session?.token?.accessToken}`,
    };
  }
  try {
    const response = await axios(config);
    let props = response?.data;
    if (!props) {
      res.writeHead(302, { Location: "/course/category" });
      res.end();
      return;
    }
    return { props: { props } || {} };
  } catch (error) {
    res.writeHead(302, { Location: "/course/category" });
    res.end();
    return { props: {} };
  }
}


### Additional information

```js
this is my code 
import axios from "axios";
import { getSession } from "next-auth/react";
import Head from "next/head";

export default function CourseDetails({ props }) {
  return (
    <div>
 <Head>
        <title>{props?.title} | IOU</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <meta property="og:image" content={props?.thumbnail} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />

        <meta property="og:title" content={props?.title} />
        <meta property="og:description" content={props?.description} />

        <meta
          property="og:url"
          content={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/${props?.slug}`}
        />
        <meta
          property="og:type"
          content={process.env.NEXT_PUBLIC_FRONTEND_URL}
        />
        <meta
          property="og:article:author"
          content={`${props?.owner_info?.username}`}
        />
        <meta property="og:article:section" content={props?.tags_name} />
        <meta property="og:article:tag" content={props?.tags_name} />
        <meta property="og:type" content="website" />
        <link
          rel="canonical"
          href={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/${props?.slug}`}
        />

      
      </Head>
    </div>
  );
}

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  const { query, res } = context;
  const { slug } = query;
  const url = `api/v1/public_course/${slug}/`;
  const config = {
    method: "GET",
    url: `${process.env.NEXT_PUBLIC_ROOT_URL}/${url}`,
  };
  if (session !== null) {
    config.headers = {
      Authorization: `Token ${session?.token?.accessToken}`,
    };
  }
  try {
    const response = await axios(config);
    let props = response?.data;
    if (!props) {
      res.writeHead(302, { Location: "/course/category" });
      res.end();
      return;
    }
    return { props: { props } || {} };
  } catch (error) {
    res.writeHead(302, { Location: "/course/category" });
    res.end();
    return { props: {} };
  }
}

Example

No response

devjiwonchoi · 2023-09-03T09:23:29Z

devjiwonchoi
Sep 3, 2023
Maintainer

I'd recommend you check out generateMetadata before explicitly adding tags.

generateMetadata

3 replies

nizamseu Sep 4, 2023
Author

I am using nextjs page route

athishsreeram Feb 9, 2024

Move head out of div and try this way
<>

All meta tags

TarekWSw Dec 13, 2024

I've removed the tag that is surrounding the tags, and replaced them with <></>
<>
<title>{title}</title>

....
</>
This worked for me

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

When using `<meta>` tags in my Next.js (v 13.4.16) application, they are not being rendered correctly during server-side rendering (SSR). This is causing issues with SEO and social sharing previews #54939

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

When using <meta> tags in my Next.js (v 13.4.16) application, they are not being rendered correctly during server-side rendering (SSR). This is causing issues with SEO and social sharing previews #54939

nizamseu Sep 3, 2023

Summary

Example

Replies: 1 comment · 3 replies

devjiwonchoi Sep 3, 2023 Maintainer

nizamseu Sep 4, 2023 Author

athishsreeram Feb 9, 2024

TarekWSw Dec 13, 2024

When using `<meta>` tags in my Next.js (v 13.4.16) application, they are not being rendered correctly during server-side rendering (SSR). This is causing issues with SEO and social sharing previews #54939

nizamseu
Sep 3, 2023

Replies: 1 comment 3 replies

devjiwonchoi
Sep 3, 2023
Maintainer

nizamseu Sep 4, 2023
Author