Best practices

I am trying to develop an app using Next JS v16.0.3 App router TypeScript . Except facebook debugger id that called fb:app_id, all other meta tags are working good.

At inspect element it shows as required but Facebook debugger couldn't. I tried below method

1. As Next JS v16 documentation

export const metadata = {
  facebook: {
    appId: '12345678',
  },
}

2. As other property

other: {
    "yandex-verification": "",
    "facebook-domain-verification": "",
    "fb:app_id": "",
    "msvalidate.01": "",
  },

3. Another component app/head.tsx

export default function Head() {
  return (
    <>
      <meta property="fb:app_id" content="1334749931180917" />      
    </>
  );
}

4. As github disscussion

const RootLayout = async ({ children }: RootLayoutProps) => (
  <html>
    <head>
      <meta property="fb:app_id" content="" />
    </head>
    <body>{children}</body>
  </html>
)

export default RootLayout

At inspect element
<meta property="fb:app_id" content="1365455648632">

But Facebook Debugger shows that

facebook debugger error

Could you tell me please, how to solve this issue?

Improve this question

0

Your Reply

By clicking “Post Your Reply”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.