実現したい内容

各ページの内容に応じた適切なogやタイトルの設定

手段

NextSEOを導入して実装.
getServerSidePropsでデータベースから値を取得してSEOを動的に書き換え

症状

_app.jsに記載のdefaultSEOは効くが、各ページに記載したMetaタグが全くfacebookのdebuggerやog検証サイトで表示されない.
具体的にはog:imageやtitleが設定してあっても見えない.

諸検証

ブラウザのデバッグコンソールでHeaderを確認するとmetaタグはあるように一見視認できるが、
curlで対象ページを取得して見てみると、実際にはmetaタグは書かれていない.恐らくプリレンダされずに終わっている.
getServerSidePropsで値が取得できていることは確認.

sarutabiko

同じ問題にはまっているスレッド. (versionの問題か?なども上がっているが、一年経っていてバージョンが違っても発生. 原因不明)

最終的には解決に至っていない様子.

sarutabiko

結局これが貼られて締められているが、これって結局NextSEOを使わずに実装しているだけでは...

sarutabiko

上記のようにやはりブラウザ側でレンダリングされており、他Og取得時に見えていない?

sarutabiko

仕方ないので、NextSEOを使わない根本解決を避けたダサイ実装へ

action/[id].tsx


export const getServerSideProps: GetServerSideProps = async (context) => {
  const { id }: any = context.query;

  let action = await prisma.action.findUnique({
    where: {
      id: id,
    },
  });

  return {
    props: {
      action,
      url: { host: context.req.headers.host, protocol: "http" },
    },
  };
};

_app.tsx


function MyApp({
  Component,
  pageProps: { session, ...pageProps },
  router,
}: AppProps) {
  let metaTags = [];

  return (
    <>
        <Head>
          {metaTags.map((og) => (
            <meta {...og}></meta>
          ))}
        </Head>
        <Component {...pageProps} key={router.asPath} />
    </>
  );
}