I’m using NextJS app router to build my web app. I’m working on SEO and social previews right now, for which metadata is important.

In my layout.tsx file, I have code like:

export const metadata: Metadata = {
  metadataBase: new URL('https://www.oasis-of-ideas.com'),
  title: pageTitle,
  description: pageDescription,
  keywords: [],
  authors: [{ name: 'Author' }],

  openGraph: {
    type: 'website',
    url: '/',
    title: pageTitle,
    description: pageDescription,
    images: [
      {
        url: '/logo-high-res.png',
        width: 500,
        height: 500,
        alt: 'Open Graph Image',
      },
    ],
  }
}

and then in each individual page, I change tags as needed:

export const metadata: Metadata = {
  title: 'Changed title',
  openGraph: {
    title: 'Changed title'
  }
}

Now from what I understand, the opengraph url tag is supposed to refer to the canonical url, which in my simple case is just the url of the current page. I want the crawlers to look at the opengraph image of that page itself. Ideally then, the og:url should be optional, but i read online that it is required. It seems kinda unintuitive why one would want to require it.

Some questions:

1. Is including openGraph url explicitly required?
2. If so, how do i do it for each nextjs page? any simple way to do it?
3. Can i locally preview my website’s social previews somehow? if not, after i deploy it, what tools can i use to review it?

I looked online, but couldn’t find a lot of clear docs on this. Thanks!