Search code examples
reactjsnext.jsseofacebook-opengraph

Wrong og:image is appearing on page metadata

In my [id].tsx page I have the following meta tag structure

<Head>
  <meta property="og:title" content={'품고 - ' + archive.title} key="title" />
  <meta property="og:type" content="article" key="type" />
  {imageUrl && <meta property="og:image" content={imageUrl} key="image" />}
</Head>

However in my production server, when I scrape an article using the Facebook debugger I get the following error

enter image description here

But when I check for an article in my development server, the proper image shows even though the code is the same as production

enter image description here

I also do have the following line in my _app.tsx file that I think may be causing the error but am not sure

<link rel="canonical" href="https://poomgo.com/" />

And the truly strange thing is that if I share my production article links on kakao, the thumbnail image shows up fine, but on Facebook and LinkedIn, the thumbnail image does not show up properly.

Does anyone know why my meta tags are scraped differently on my production and development servers when the code applied is exactly the same?

How my imageUrl is generated

I get archive data from a third party API (strapi) using useSWR

const { data: archive, error } = useSWR('/archives/' + router.query.id, (url) => {
    return axios.get(url).then(res => res.data)
  }, {
    initialData: props.data
  })

I then get my images from the archives and if images exist, I get my imageUrl

const images = archive.images
  let imageUrl = ''

  if (images && images.length > 0) {
    imageUrl = getCloundFrontUrl(images[0].url)
  }

I then use the getCloundFrontUrl function to replace the url with my cdn

export const getCloundFrontUrl = (url) => {
  return url ? url.replace('poomgo-homepage.s3.ap-northeast-2.amazonaws.com', 'cdn-hp.poomgo.com') : ''
}

Below is the shape of my data

enter image description here

Solution

  • I removed the

    <link rel="canonical" href="https://poomgo.com/" />

    from my _app.tsx and the issue was resolved. Pretty sure that the code above signalled redirects to my home page from every page on production which caused the wrong og:image