CODEWITHSUNDEEP
facebookfacebook-opengraphnext.js
HoCo_
HoCo_

Reputation: 1372

Open Graph Facebook _ NextJS app : all my metadata appears on the page view source but Facebook complain that it found nothing

I have all my metadata in my NextJS app, they are put on the root page, so the metatada appear well on my view source's page. But my Facebook open graph seems to don't reach them for an unknown reason to me.

Here my ReactJS: 

<Head>
 <title> Test 02 </title> 
      <meta property="og:title" content="An awesome endless memories's title" /> 
      <meta property="og:url" content="somepath/digital-marketing/website-digital-gq" />
      <meta property="og:description" 
        content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
      <meta property="og:site_name" content="IMDb" />
       <meta property="og:locale" content="en_US" />

      <meta property="og:locale:alternate" content="en_GB" />
      <meta property="og:locale:alternate" content="cn_CN" />
      <meta property="og:image" content={localImage} />
      <meta property="og:image:width" content="1600" />
      <meta property="og:image:height" content="800" />
 </Head>

Facebook's Sharing Debugger returns me

Inferred Property The 'og:image' property should be explicitly

provided, even if a value can be inferred from other tags. Missing Properties The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id

Could Not Connect To Server Check that the webserver is running, and that there are no firewalls blocking Facebook's crawlers.

Curl Error Curl error: 56 (RECV_ERROR)

Honestly, I don't have even the beginning of a clue on this story, really, if someone has any hint, would be great, thanks

Upvotes: 1

Views: 3381

Answers (1)

HoCo_
HoCo_

Reputation: 1372

Answer - thanks to the hints in the comments.

when you use some URI for your Facebook Open Graph, be sure to target a vali URL, seems to be exclusively the root page of your component in case of NextJS, other languages/libraries/framework could probably follow a similar pattern.

You can set it directly in the facebook sharing link in your code as following: 

https://www.facebook.com/sharer/sharer.php?u=[your_operational_url]

you are not obliged to encode the URL if I trust the result of my tests. So just the text of your URL should be enought.

Good builds.

Upvotes: 1

Related Questions