SEO and SSR
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
My server is rendering on demand, i'm usinda data from my API Strapi to fill my variables like this
But social medias doesn't read my metatags. I'm Trying hard to learn the documentation but it's beinng complicated to get the issue.
I'm Running the Last Next14 version
<meta
property="og:description"
content={postData.small}
name="description"
/>But social medias doesn't read my metatags. I'm Trying hard to learn the documentation but it's beinng complicated to get the issue.
I'm Running the Last Next14 version
Answered by joulev
So the problem here is that you are client-side rendering your pages (at least, the [slug].jsx file). Not server side rendering.
The initial data is null, making the page simply
Fixing this is honestly not easy. Basically you need to use getStaticProps or getServerSideProps to fetch the data on the server, then based on that data render the metadata tag. First take a look at the relevant documentations of the above functions and then restructure your codebase accordingly. It will be a big refactor but that is what it takes to make your post SEO friendly.
The initial data is null, making the page simply
<p>Carregando...</p> without any metadata tags. Google can handle this and will wait for your page to fully load, but social media sites won’t => making the metadata tags not showing up in social media embeds.Fixing this is honestly not easy. Basically you need to use getStaticProps or getServerSideProps to fetch the data on the server, then based on that data render the metadata tag. First take a look at the relevant documentations of the above functions and then restructure your codebase accordingly. It will be a big refactor but that is what it takes to make your post SEO friendly.
31 Replies
Are you using the generate Metadata method?
https://nextjs.org/docs/app/api-reference/functions/generate-metadata
https://nextjs.org/docs/app/api-reference/functions/generate-metadata
Masai Lion
Im using Sanity to populate mine using the generate-metadata method linked above:
i have this at the top of my root layout file
@B33fb0n3 Are you using the generate Metadata method?
https://nextjs.org/docs/app/api-reference/functions/generate-metadata
Asian black bearOP
I placed the meta tags inside the file [slug].js.
since i'm usfing the same variables to post and metatags
since i'm usfing the same variables to post and metatags
it's like
<Head>
<title>{postData.title} </title>
<meta property="og:title" content={postData.title} />
<meta
property="og:image"
content={`https://rolandodados.com.br${postData.imageLargeURL}`}
/>
<meta property="og:description" content={postData.description} />
<meta name="language" content="pt-BR" />
<meta
name="description"
content="Uma breve descrição do conteúdo ou propósito do seu site. Deve ser concisa e informativa para os visitantes e os motores de busca."
/>
<link href="/favicon.png" rel="icon" />
</Head>Asian black bearOP
it's weird because a simple <title>title <title/> is not being read.
@Asian black bear it's like
js
<Head>
<title>{postData.title} </title>
<meta property="og:title" content={postData.title} />
<meta
property="og:image"
content={`https://rolandodados.com.br${postData.imageLargeURL}`}
/>
<meta property="og:description" content={postData.description} />
<meta name="language" content="pt-BR" />
<meta
name="description"
content="Uma breve descrição do conteúdo ou propósito do seu site. Deve ser concisa e informativa para os visitantes e os motores de busca."
/>
<link href="/favicon.png" rel="icon" />
</Head>
<Head> does not work in the app router. Simply removing it should work
Though the metadata object method is more composable so is the better practice
@joulev <Head> does not work in the app router. Simply removing it should work
Asian black bearOP
I don't know where to start, I'm almost giving up and generating static pages.
@Asian black bear I don't know where to start, I'm almost giving up and generating static pages.
Just remove the <Head> tags but keep its content
Asian black bearOP
It's an easy start 🙂
Like instead of
<Head><title>…</title></Head>
You just do
<title>…</title>
<Head><title>…</title></Head>
You just do
<title>…</title>
No that’s not a start, that’s pretty much the entire solution
You do that then the meta tags will render and search engines will pick ‘em up
If you use <Head>, nothing is rendered so search engines can’t pick ‘em up
Asian black bearOP
I will take all Head off my code for now
Asian black bearOP
The big issue here is i'm using NextUI, the structure give me a _document.tx with a Head inside... when i delete the Head here my layout ruins
Are you using the app router or the pages router?
Asian black bearOP
pages
Oh then ignore whatever I said, I thought you were using the app router, my bad. Yeah then you need the <Head>, add them back in
Could you give me a minimal reproduction repository?
Asian black bearOP
no problem, was nice to understand that idea, i didn´t know that
for sure let me make it public
take a look on pages
and thank you very much so far
@Asian black bear take a look on pages
So the problem here is that you are client-side rendering your pages (at least, the [slug].jsx file). Not server side rendering.
The initial data is null, making the page simply
Fixing this is honestly not easy. Basically you need to use getStaticProps or getServerSideProps to fetch the data on the server, then based on that data render the metadata tag. First take a look at the relevant documentations of the above functions and then restructure your codebase accordingly. It will be a big refactor but that is what it takes to make your post SEO friendly.
The initial data is null, making the page simply
<p>Carregando...</p> without any metadata tags. Google can handle this and will wait for your page to fully load, but social media sites won’t => making the metadata tags not showing up in social media embeds.Fixing this is honestly not easy. Basically you need to use getStaticProps or getServerSideProps to fetch the data on the server, then based on that data render the metadata tag. First take a look at the relevant documentations of the above functions and then restructure your codebase accordingly. It will be a big refactor but that is what it takes to make your post SEO friendly.
Answer
@joulev So the problem here is that you are client-side rendering your pages (at least, the [slug].jsx file). Not server side rendering.
The initial data is null, making the page simply `<p>Carregando...</p>` without any metadata tags. Google can handle this and will wait for your page to fully load, but social media sites won’t => making the metadata tags not showing up in social media embeds.
Fixing this is honestly not easy. Basically you need to use getStaticProps or getServerSideProps to fetch the data on the server, then based on that data render the metadata tag. First take a look at the relevant documentations of the above functions and then restructure your codebase accordingly. It will be a big refactor but that is what it takes to make your post SEO friendly.
Asian black bearOP
I understand, i know how to use these functions, and yeah i will have a lot of work. Thanks you very much, i'm pretty help with your help!
Good luck
Asian black bearOP
Fixed,
only leaving feedback if someone else has the same problem. Social media platforms cannot render the website and execute the JS if your data is in an API. My solution was
to statically generate it on the server side
only leaving feedback if someone else has the same problem. Social media platforms cannot render the website and execute the JS if your data is in an API. My solution was
to statically generate it on the server side