How to get metadata (mainly title & og:image) added dynamically but still SSR or SSG?

Question

I've been having a massive issue with NextJS in that I just CANNOT figure out, for the life of me, how to pre-render header metadata per page.

I am trying to optimize my blog (and maybe eventually other pages!) for social media sharing, so that when I share, an image shows as well as a title, but all I ever get is the default generic title (if I set it in _app.js), and no image.

For example I've tried both getStaticProps as well as getServerSideProps, piped the data in and then did something like this:

const WrappedBlogDetail = (props) => {
  return (
    <>
      <Head>
        <title>{props.blog.title}</title>
        <meta name="description" content={props.blog.description} />
        <meta property="og:title" content={props.blog.title} />
        <meta property="og:description" content={props.blog.description} />
        <meta property="og:image" content={props.blog.image} />
        <meta property="og:url" content={props.blog.url} />
        <meta property="og:type" content="article" />
        <meta property="og:locale" content={props.blog.lang_code} />
      </Head>
      <BlogDetail {...props} />
    </>
  );
};

export default WrappedBlogDetail;

What am I doing wrong? Why isn't social media and everything picking up my metadata? I really think sharing an actual title of an article and an image looks waaaaaaaaaay better on social media, but I cannot, despite trying like 4 different ways, get it to work

Marchy · Answer

Are you using app or pages dir?

How to get metadata (mainly title & og:image) added dynamically but still SSR or SSG?

1 Reply