Tag miss if set in NextSeo and not set in DefaultSeo #1492

KyryloSWAN · 2025-01-21T15:56:41Z

Nextjs 14.0.4 application uses Pages Router.

DefaultSeo is used in _app.tsx together with NextSeo and JsonLdScript on pages within pages.

// next-seo.config.ts
import { BASE_URL, DEFAULT_EXTERNAL_IMG_URL } from "@/utils";
import { type DefaultSeoProps } from "next-seo";

export const configSEO: DefaultSeoProps = {
  themeColor: "#FFFFFF",
  titleTemplate:  "%s | SomeSite",
  defaultTitle:  "default title",
  description:  "Some Site Description",
  canonical: BASE_URL,
  openGraph: {
    type: "website",
    locale: "en_US",
    url: BASE_URL,
    siteName: "SomeSite",
    images: [
      {
        url: DEFAULT_EXTERNAL_IMG_URL,
        width: 800,
        height: 600,
        alt: "SomeSite image",
        type: "image/jpg",
      },
    ],
  },
  twitter: {
    handle: "@somesite",
    site: "@somesite",
    cardType: "summary_large_image",
  },
};

//  src/pages/_app.tsx
export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: TAppPropsWithLayout) {
  const getLayout =
    Component.getLayout ?? ((page: ReactElement) => <Layout>{page}</Layout>);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <DefaultSeo {...configSEO} />
      <Provider>{getLayout(<Component {...pageProps} />)}</Provider>
    </LocalizationProvider>
  );
}

src/pages/_document.tsx
export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
  return (
    <Html lang="en">
      <Head>
        <DocumentHeadTags {...props} />
        <meta name="robots" content="follow, index" />
        <link rel="icon" href="/favicon.svg" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Document.getInitialProps = async (ctx: DocumentContext) => {
  const finalProps = await documentGetInitialProps(ctx);
  return finalProps;
};

// src/pages/index.tsx
export const getStaticProps = (async () => {
  const dataSEO: IExperiencesSEO[] = await getAllExperiences();
  return {
    props: {
      dataSEO,
      seo: {
        description: seoMessages.exploreDescription,
        title: seoMessages.exploreTitle,
        url: BASE_URL!,
      },
    },
    revalidate: secondsInWeek,
  };
}) satisfies GetStaticProps<{ dataSEO: IExperiencesSEO[]; seo: IExploreSEO }>;

const Explore = ({
  dataSEO,
  seo,
}: InferGetStaticPropsType<typeof getStaticProps>) => (
  <>
    <ExploreSEO {...seo} />
    <ExploreJsonLds dataSEO={dataSEO} />
    <ExplorePage />
  </>
);

Explore.getLayout = function getLayout(page: ReactElement) {
  return <PageWithTabs>{page}</PageWithTabs>;
};

export default Explore;

Tags that are set in DefaultSeo are present in the HTML code of the page given by the server.
Tags that are not set in DefaultSeo are not present in the HTML code of the page given by the server (when viewed with Ctrl+U in the browser, they are not present), but are rendered by the browser (you can see them in the browser's DevTools).

For example, if I comment out the line in next-seo.config.ts

canonical: BASE_URL,

then the canonical tag will be missing from the HTML code of the page sent by the server.

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tag miss if set in NextSeo and not set in DefaultSeo #1492

Tag miss if set in NextSeo and not set in DefaultSeo #1492

KyryloSWAN commented Jan 21, 2025

Tag miss if set in NextSeo and not set in DefaultSeo #1492

Tag miss if set in NextSeo and not set in DefaultSeo #1492

Comments

KyryloSWAN commented Jan 21, 2025