Search code examples
next.jslinefacebook-opengraphwhatsapp

URL preview not working in LINE messenger for Next.js app with OGP settings

I have a Next.js app that uses OGP settings to generate URL previews for social media platforms. It works fine for Facebook debugger and other platforms, but it doesn't work for LINE messenger and WhatsApp. They don't show any preview at all.

I have followed the instructions from this article to check the OGP settings in my LINE messenger. Here is an example of my code:

import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title>My Next.js App</title>
        <meta property="og:title" content="My Next.js App" />
        <meta
          property="og:description"
          content="This is a sample app for OGP settings"
        />
        <meta property="og:image" content="https://example.com/my-image.jpg" />
        <meta property="og:url" content="https://example.com/" />
      </Head>
      <h1>My Next.js App</h1>
      <p>This is a sample app for OGP settings</p>
    </div>
  );
}

I have also inspected the page source view and found that the meta tags were available in the page source view.

I have deployed my app to AWS Amplify and tested it with Facebook debugger. It shows the correct preview as expected.

However, when I try to share the same URL in LINE messenger or WhatsApp, they don't show any preview at all.

I have tried clearing the cache of both apps and re-sharing the URL, but it didn't help.

What could be the reason for this issue? How can I fix it?

Solution

  • It turned out as an issue with AWS Amplify. One of the AWS experts is working on fixing the issue.