Next.js Discord

Discord Forum

Meta tags not showing up in page source

Unanswered
Forest yellowjacket posted this in #help-forum
Open in Discord
Forest yellowjacketOP
Hello everyone, I'm using nextjs version 13.1.6 page router
for my project. The main problem I'm facing is that the head tags are not appearing in the page source but they are appearing in the inspect element head.
I'm fetching the head tags dynamically as there are many pages and each of them have a different title and description. I tried staticProps and serversideProps but it didn't work. Even putting a static title and description is now showing up in the page source. I was using next/head but im mot sure if nextjs 13.1.6 supports it.
Any kind of help will be appreciated.
Thank you🙂

6 Replies

Forest yellowjacketOP
@B33fb0n3 thanks for your reply...
My code folder structure looks like this
page/_app.js
function MyApp({ Component, pageProps }) {
  const user = useSelector((state) => state.user.user);
  const router = useRouter();

  useEffect(() => {
    // Facebook Pixel
    import('react-facebook-pixel')
      .then((x) => x.default)
      .then((ReactPixel) => {
        ReactPixel.init(process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID);
        ReactPixel.pageView();

        const handleRouteChange = () => ReactPixel.pageView();
        router.events.on('routeChangeComplete', handleRouteChange);
        return () => {
          router.events.off('routeChangeComplete', handleRouteChange);
        };
      });
  }, [router.events]);

  return (
    <div className='h-screen'>
      <Head>
        <title>{pageProps.title || "Default Title"}</title>
        <meta name="description" content={pageProps.description || "Default description"} />
        {pageProps.metaKeywords && <meta name="keywords" content={pageProps.metaKeywords} />}
        {pageProps.canonicalUrl && <link rel="canonical" href={pageProps.canonicalUrl} />}
      </Head>
      <Component {...pageProps} />
    </div>
  );
}

const ReduxApp = (props) => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <MyApp {...props} />
      <ToastContainer position='top-center' limit={1} />
    </PersistGate>
  </Provider>
);
and I have a product page src/pages/product/[..slug].js
form where I have tried sending the dynamic tags fetched using serverside props and staticprops both

even if i put static meta tags i does not appear in the page source
Forest yellowjacketOP
oh okay can you refer someone who solves issues related to pages router. that would be of great help thank you @B33fb0n3
@Forest yellowjacket oh okay can you refer someone who solves issues related to pages router. that would be of great help thank you <@301376057326567425>
B33fb0n3
you are on the right place. Keep your thread here open and if somebody can help you, somebody will help you. But keep this in mind: