head (app/head) doesnt work properly when sharing the page #15112

handrei · 2020-07-13T09:29:19Z

handrei
Jul 13, 2020

I've migrated from create-react-app to create-next-app to my website for the SEO, but the Head(app/head) component isn't working properly

Assuming I have a blog, and in pages, I have the following structure: pages/blog/index.js, pages/blog/[slug].js. In [slug].js, I'm using the Head component so it takes the title of the blog post: <title>{post.title}</title> The problem is that when using react-share on the blog post it doesn't put the right title, even when I do an inspect element on the page, I can see the right Head values, but the Facebook debug (https://developers.facebook.com/tools/debug/) tool doesn't recognize the right title.
i have to mention that when I'm in the pages/blog/index.js the sharing is working corectly

am i doing something wrong ?

Answered by illuminist

Jul 13, 2020

You need to make sure that SSR is going right: check for rendered HTML source(not via element inspector), check if you have fetched data initial props via getIntialProps, getServerSideProps, or getStaticProps correctly and the component is actually using those props.

View full answer

illuminist · 2020-07-13T13:58:11Z

illuminist
Jul 13, 2020

You need to make sure that SSR is going right: check for rendered HTML source(not via element inspector), check if you have fetched data initial props via getIntialProps, getServerSideProps, or getStaticProps correctly and the component is actually using those props.

4 replies

handrei Jul 13, 2020
Author

you mean that i have to fetch the data via getInitialProps ? i also tried that but with same results.
right now i have a function getData() which I'm calling it in useEffect hook, but i tried to fetch the data in getInitialProps and pass the data through props in component, but no success.

handrei Jul 13, 2020
Author

Post.getInitialProps = async ({ req, query }) => {
  const { origin } = absoluteUrl(req);
  const namespacesRequired = ['common'];

  const { article } = await api.getOne(
    `/article/${query.slug}`
  );

  return { origin, namespacesRequired, article };
};

const Post = ({ t, origin, article }) => {....
const [post, setPost] = useState(null);
useEffect(() => {
    if (!post) {
      setPost(article);
    }
  }, [post]);
<Head>
          <title>{'News | ' + post.title}</title>
          <meta name='description' content={post.title} key='description' />
          <meta property='og:title' content={post.title} key='title' />
          <meta property='og:image' content={post.cover} key='image' />
          <meta property='og:image:width' content='400' />
          <meta property='og:image:height' content='300' />
          <meta property='og:image:type' content='image/jpeg' />
        </Head>

and what i got on the view source(not element inspector) is another title, not from the serverside prop

handrei Jul 13, 2020
Author

acutally i resolved it, not using useEffect at all, just the article return in the getInitialProps. thanls a lot

illuminist Jul 14, 2020

That's right.

Many problem can be solve without using useEffect, and that's the ideal solution.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

head (app/head) doesnt work properly when sharing the page #15112

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

head (app/head) doesnt work properly when sharing the page #15112

Uh oh!

Uh oh!

handrei Jul 13, 2020

Replies: 1 comment · 4 replies

Uh oh!

illuminist Jul 13, 2020

Uh oh!

handrei Jul 13, 2020 Author

Uh oh!

Uh oh!

handrei Jul 13, 2020 Author

Uh oh!

handrei Jul 13, 2020 Author

Uh oh!

illuminist Jul 14, 2020

handrei
Jul 13, 2020

Replies: 1 comment 4 replies

illuminist
Jul 13, 2020

handrei Jul 13, 2020
Author

handrei Jul 13, 2020
Author

handrei Jul 13, 2020
Author