Next.js Discord

Discord Forum

Nothing is embedded on dynamic posts.

Answered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
-# I am using "Pages" not "App"

This is the only page that does not embed anything, however on other pages it works fine. I won't show the entire code, but <Head /> only. I am making posts and the Head perfectly works under Inspect Element and shows everything correctly, but on Open Graph it doesn't find it, even though I do have og:title, og:description as well as Twitter. Does it just take a few hours for it to process? I won't be providing the URL as it's not entirely complete yet.

From Inspect Element:
<head><meta charset="utf-8"><title>Lillianne Blogs - An Introduction To Assembly</title><meta name="viewport" content="width=device-width"><meta name="description" content="I'll be teaching you the very basic fundamentals of Assembly"><meta name="og:title" content="Lillianne Blogs - An Introduction To Assembly"><meta name="og:description" content="I'll be teaching you the very basic fundamentals of Assembly"><meta name="twitter:title" content="Lillianne Blogs - An Introduction To Assembly"><meta name="twitter:description" content="I'll be teaching you the very basic fundamentals of Assembly"><meta property="og:type" content="article"></head>


Code [using next/head]:
      <Head>
        <title>Lillianne Blogs - {postData.Title}</title>
        <meta
          name='description'
          content={`${postData.minidescription}`}
        />
        <meta
          name='og:title'
          content={`Lillianne Blogs - ${postData.Title}`}
        />
        <meta
          name='og:description'
          content={`${postData.minidescription}`}
        />
        <meta
          name='twitter:title'
          content={`Lillianne Blogs - ${postData.Title}`}
        />
        <meta
          name='twitter:description'
          content={`${postData.minidescription}`}
        />
        <meta property='og:type' content='article' />
      </Head>


Nothing is embedded on Twitter, Discord, and Facebook.

And as I've mentioned before all other pages work, except this one that is supposed to be Dynamic. (/app/blog/[post].tsx) I am fetching all the data through an API.
Answered by joulev
If the head tags depend on that API, you need SSR yes
View full answer

14 Replies

Sun bearOP
Please ping me.
@Sun bear -# I am using "Pages" not "App" This is the only page that does not embed anything, however on other pages it works fine. I won't show the entire code, but <Head /> only. I am making posts and the Head perfectly works under Inspect Element and shows everything correctly, but on Open Graph it doesn't find it, even though I do have `og:title`, `og:description` as well as Twitter. Does it just take a few hours for it to process? I won't be providing the URL as it's not entirely complete yet. From __Inspect Element__: html <head><meta charset="utf-8"><title>Lillianne Blogs - An Introduction To Assembly</title><meta name="viewport" content="width=device-width"><meta name="description" content="I'll be teaching you the very basic fundamentals of Assembly"><meta name="og:title" content="Lillianne Blogs - An Introduction To Assembly"><meta name="og:description" content="I'll be teaching you the very basic fundamentals of Assembly"><meta name="twitter:title" content="Lillianne Blogs - An Introduction To Assembly"><meta name="twitter:description" content="I'll be teaching you the very basic fundamentals of Assembly"><meta property="og:type" content="article"></head> Code [using next/head]: tsx <Head> <title>Lillianne Blogs - {postData.Title}</title> <meta name='description' content={`${postData.minidescription}`} /> <meta name='og:title' content={`Lillianne Blogs - ${postData.Title}`} /> <meta name='og:description' content={`${postData.minidescription}`} /> <meta name='twitter:title' content={`Lillianne Blogs - ${postData.Title}`} /> <meta name='twitter:description' content={`${postData.minidescription}`} /> <meta property='og:type' content='article' /> </Head> Nothing is embedded on Twitter, Discord, and Facebook. And as I've mentioned before all other pages work, except this one that is supposed to be Dynamic. *(/app/blog/[post].tsx)* I am fetching all the data through an API.
joulev
You are doing something like this right?

const data = useData() // react-query or swr or similar
if (!data) return <Loading />
return (
  <div>
    <Head>
      …
    </Head>
    …
  </div>
);
joulev
If so:
* If the meta tags depend on the data, you must fetch the data in getStaticProps or getServerSideProps
* If the meta tags do not depend on the data, you need to ensure all branches of the page function return the <Head />. in other words <Loading /> should also have the <Head />
The reason here is that search engines are only seeing the <Loading />, they don’t see the <Head /> tag at all. They don’t run JS and don’t fetch the data for you.
Sun bearOP
Ahhh, I see, but I am using a <Loading /> when I am fetching the data from the API, so I suppose I do need SSR?
joulev
If the head tags depend on that API, you need SSR yes
Answer
joulev
Embedders simply ignore client side rendering
(You can check what embedders see by viewing the source of the page – not inspecting elements)
Sun bearOP
All right, I'll go ahead and imploment SSR and I'll let you know if that solves my issue.
joulev
You can integrate SSR with client side fetching by populate the CSR hook with initial data, check the fetching library you have for more information, the option should be named initialData or fallbackData or something like that
For swr: https://swr.vercel.app/docs/with-nextjs#pre-rendering-with-default-data, react query or any libraries doing this should have a similar feature
Sun bearOP
Thank you.
@joulev If the head tags depend on that API, you need SSR yes
Sun bearOP
Thank you, this worked now and even better than what I originally had, the loading is instant.