Next.js Discord

Discord Forum
","dateCreated":"2024-05-30T03:58:17.097Z","answerCount":2,"author":{"@type":"Person","name":"Asiatic Lion"},"suggestedAnswer":{"@type":"Answer","text":"the code here looks fine to me, did you check the when you view the source of the page?","url":"https://nextjs-forum.com/post/1245587060438335538#message-1245624680539230331","dateCreated":"2024-05-30T06:27:46.428Z","author":{"@type":"Person","name":"joulev"}}}}

V12 SSR meta tags only showing on client side

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Hello, I'm trying to get meta tags to show up for external embeddings.

Heres my code

export async function getServerSideProps(context) {
  let response = await fetch(
    `${publicRuntimeConfig.NEXT_PUBLIC_API_URL}/sudoku/details/${context.query.gameCode}`
  );
  let responseJson = await response.json();

  if (responseJson == undefined) {
    return;
  }

  return {
    props: {
      gameDetails: responseJson,
    },
  };
}

function Sudoku(props) {
  const gameDetails = props.gameDetails.details;

  return (
    <>
     <Head>
        <meta charSet="utf-8" />
        <meta name="description" content={"Example Description"} />

        <meta
          name="og:title"
          content={`Example Title`}
        />
        <meta name="og:site_name" content={"Example"} />
        <meta name="og:description" content={"Example Description"} />
      </Head>
    <SudokuComponent {...props} />
    </>
  );
}

export default Sudoku;


If I go to the page in the browser, I can see all the meta tags correctly populated in the inspector. My issue is that they don't show up when javascript isn't executed. If I try to request the page with curl, I don't see the meta tags but it shows the props.

...
<body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"gameDetails":{"success":true,"details":{"time":"5","difficulty":"easy","host":"Guest"}}},"__N_SSP":true},"page":"/sudoku/[gameCode]","query":{"gameCode":"HwCooE"},"buildId":"Qpz8vkc9wPOVMsZBDT9Zn","runtimeConfig":{"NEXT_PUBLIC_API_URL":"example"},"isFallback":false,"gssp":true,"scriptLoader":[]}</script></body>

2 Replies

@Asiatic Lion Hello, I'm trying to get meta tags to show up for external embeddings. Heres my code javascript export async function getServerSideProps(context) { let response = await fetch( `${publicRuntimeConfig.NEXT_PUBLIC_API_URL}/sudoku/details/${context.query.gameCode}` ); let responseJson = await response.json(); if (responseJson == undefined) { return; } return { props: { gameDetails: responseJson, }, }; } function Sudoku(props) { const gameDetails = props.gameDetails.details; return ( <> <Head> <meta charSet="utf-8" /> <meta name="description" content={"Example Description"} /> <meta name="og:title" content={`Example Title`} /> <meta name="og:site_name" content={"Example"} /> <meta name="og:description" content={"Example Description"} /> </Head> <SudokuComponent {...props} /> </> ); } export default Sudoku; If I go to the page in the browser, I can see all the meta tags correctly populated in the inspector. My issue is that they don't show up when javascript isn't executed. If I try to request the page with curl, I don't see the meta tags but it shows the props. ... <body><div id="__next"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"gameDetails":{"success":true,"details":{"time":"5","difficulty":"easy","host":"Guest"}}},"__N_SSP":true},"page":"/sudoku/[gameCode]","query":{"gameCode":"HwCooE"},"buildId":"Qpz8vkc9wPOVMsZBDT9Zn","runtimeConfig":{"NEXT_PUBLIC_API_URL":"example"},"isFallback":false,"gssp":true,"scriptLoader":[]}</script></body>
joulev
the code here looks fine to me, did you check the <head> when you view the source of the page?