next/head <meta> tags for pages overriding default _app.js <meta> tags are rendered in the browser but not visible to facebook debugger.

laurencefass commented 2 years ago

Verify canary release

[X] I verified that the issue exists in Next.js canary release

Provide environment information

sorry this is not working.

i am running

nextjs 12 node 16.12.1 yarn 1.22.5

What browser are you using? (if relevant)

chrome

How are you deploying your application? (if relevant)

VPS

Describe the Bug

Summary: I am trying to create fb and twitter metadata for my whole site by defining a with metadata in _app.js with overrides for specific components using the identical set of tags with some local overrides.

Implementation: I have a two page site with _app.js, one.js and two.js files. I have added a section into _app.js file and a section in one.js with some overrides. I have used the keys to ensure that duplicates are not made and when i load the pages in the browser I can see that this works correctly and component specific overrides are presented.

The relevant metadata is as follows and is contained in both _app.js and one.js (but not two.js which I expect to use _app.js metadata). Use of variables enables me to use an identical metadata and set component specific overrides.

<Head> 
      ...   other stuff here
     <meta property="og:title" content={title} key="og-title"/>
      <meta property="og:description" content={description} key="og-desc"/>
      <meta property="og:url" content={router.pathname} key="og-url"/>
      <meta property="og:image" content={image} key="og-image" />
      <meta property="og:site_name" content="mysitename" key="og-site" />
      <meta name="twitter:title" content={title} key="tw-title"/>
      <meta name="twitter:description" content={description} key="tw-desc"/>
      <meta name="twitter:image" content={image} key="tw-image"/>
      <meta name="twitter:card" content="summary_large_image" key="tw-card"/>
</Head>

Result:

Summary: things work as expected in the browser but facebook debugger is not picking up the component specific changes.

In the browser I can see that the correct metadata is loaded for one.js (presenting the component specific overrides) and two.js (presenting the metadata from _app.js). However the facebook debugger is only picking up metadata from _app.js not from one.js - so all pages have the same metadata.

Expected Behavior

Both the facebook debugger and the client browser to load the same metadata. Facebook debugger is somehow not collecting the page specific metadata overrides.

To Reproduce

I have a live site running here:

https://next18.syntapse.co.uk/two doesnt define its own metadata so loads default tags from _app.js using keys to avoid duplication

https//next18.syntapse.co.uk/one loads overrided tags using keys to avoid duplication

This works as expected in the browser. Load this into a browser and note the differences in metadata. Note the metadata changes from the default to the override.

Load this into the facebook debugger and note that /one loads the same metadata as /two and also / url.

SumitMayani123 commented 1 year ago

here its work

Jacob-Daniel commented 1 year ago

New Meta API conveniently generates Open Graph Meta Tags.

export const metadata = { openGraph: { title: 'Next.js', description: 'The React Framework for the Web', url: 'https://nextjs.org', siteName: 'Next.js', images: [ { url: 'https://nextjs.org/og.png', width: 800, height: 600, }, { url: 'https://nextjs.org/og-alt.png', width: 1800, height: 1600, alt: 'My custom alt', }, ], locale: 'en-US', type: 'website', }, };

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#opengraph

AlbinoGeek commented 1 year ago

The only version of this that functions for me so far is getStaticProps, which is not compatible with our use of the framework (standalone PWAs.)

GabenGar commented 1 year ago

@AlbinoGeek How exactly generating standalone static files prevents you from making PWAs?

Fastbac65 commented 1 year ago

Possible Solution.

I have spent days looking at this now and I am not convinced that the mechanism for pages overriding _app.tsx metadata by inclusion of a in individual pages works for facebook sharing . While the overrides show in the browser debugger they are not picked up by facebook debugger.

To workaround this limitation and solve this particular issue I have been able to expose metadata to facebook debugger by having a single block in _app.tyx and pass page specific metata as props in getServerSideProps. Guessing would also work for getStaticProps.

page.tsx
export async function getServerSideProps(context) {
    return {
      props: {
        title: "Page one! ",
        description: "Page One metadata",
        image: `${hostURL}/images/page_one_image.jpg`
      }
    }
}

export default function Page() {
    return <div>
        <h1>Page One</h1>
    </div>
}
_app.tsx
function MyApp({ Component, pageProps }: AppProps) {
  let title = pageProps.title ? pageProps.title : "Default metatags ";
  let description = pageProps.description ? pageProps.description : "Default description";
  let image = pageProps.image ? pageProps.image : `${hostURL}/image/default_image.jpg`;

  return <>
    <Head>
      <meta/>
      <other tags/>
    </Head>
  </>

thank you for this soln... this is actually quite elegant as I no longer need to have 'Head' elements on each page - I just use staticProps to pass whatever I need to pre-render. Works amazing with all sorts of social sharing and optimises SEO. GOLD

dkrefta commented 1 year ago

@Fastbac65 thanks it worked for me :D

laurencefass commented 1 year ago

Solved here: https://github.com/vercel/next.js/issues/35172#issuecomment-1077758552

landsman commented 1 year ago

time to close this

dkrefta commented 1 year ago

@landsman it's a bug lol we did some kind of workaround :)

samcx commented 10 months ago

Hi everyone!

While the overrides show in the browser debugger they are not picked up by facebook debugger.

Was anybody able to verify if the <meta> output in the HTML is any different from the solution above versus how there were using next/head in individual pages? Tough to say if this was ever an actual bug versus if Facebook Debugger was interpreting <meta> tags differently.

amrikmalhans commented 9 months ago

I am having the same exact issue

samcx commented 9 months ago

Hi everyone,

I will move this to the Discussions for the time being! If you come across a similar issue, please submit a new bug report.

vercel / next.js