feat(examples-*): add keys to <Head> elements to prevent duplicate me…

…ta tags Fixes #416
chapter-three · Feb 22, 2024 · 81b3830 · 81b3830
1 parent e245aba
commit 81b3830
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 8 deletions.
diff --git a/examples/example-blog/components/meta.tsx b/examples/example-blog/components/meta.tsx
@@ -14,6 +14,7 @@ export function Meta({ title, tags }: MetaProps) {
  return (
  <Head>
  <link
+ key="canonical_link"
  rel="canonical"
  href={`${process.env.NEXT_PUBLIC_BASE_URL}${
  router.asPath !== "/" ? router.asPath : ""
@@ -37,15 +38,17 @@ export function Meta({ title, tags }: MetaProps) {
  <>
  <title>{`${title} | Next.js for Drupal`}</title>
  <meta
+ key="description"
  name="description"
  content="A Next.js blog powered by a Drupal backend."
  />
  <meta
+ key="og_image"
  property="og:image"
  content={`${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`}
  />
- <meta property="og:image:width" content="800" />
- <meta property="og:image:height" content="600" />
+ <meta key="og_image_width" property="og:image:width" content="800" />
+ <meta key="og_image_height" property="og:image:height" content="600" />
  </>
  )}
  </Head>

diff --git a/examples/example-graphql/pages/[...slug].tsx b/examples/example-graphql/pages/[...slug].tsx
@@ -12,7 +12,7 @@ export default function NodePage({ resource }) {
  <Layout>
  <Head>
  <title>{resource.title}</title>
- <meta name="description" content="A Next.js site powered by Drupal." />
+ <meta key="description" name="description" content="A Next.js site powered by Drupal." />
  </Head>
  {resource && <NodeArticle node={resource} />}
  </Layout>

diff --git a/examples/example-graphql/pages/index.tsx b/examples/example-graphql/pages/index.tsx
@@ -10,6 +10,7 @@ export default function IndexPage({ articles }) {
  <Head>
  <title>Next.js for Drupal</title>
  <meta
+ key="description"
  name="description"
  content="A Next.js site powered by a Drupal backend."
  />

diff --git a/examples/example-marketing/components/meta.tsx b/examples/example-marketing/components/meta.tsx
@@ -14,6 +14,7 @@ export function Meta({ title, tags }: MetaProps) {
  return (
  <Head>
  <link
+ key="canonical_link"
  rel="canonical"
  href={`${process.env.NEXT_PUBLIC_BASE_URL}${
  router.asPath !== "/" ? router.asPath : ""
@@ -37,15 +38,17 @@ export function Meta({ title, tags }: MetaProps) {
  <>
  <title>{`${title} | Next.js for Drupal`}</title>
  <meta
+ key="description"
  name="description"
  content="A Next.js blog powered by a Drupal backend."
  />
  <meta
+ key="og_image"
  property="og:image"
  content={`${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`}
  />
- <meta property="og:image:width" content="800" />
- <meta property="og:image:height" content="600" />
+ <meta key="og_image_width" property="og:image:width" content="800" />
+ <meta key="og_image_height" property="og:image:height" content="600" />
  </>
  )}
  </Head>

diff --git a/examples/example-query/pages/index.tsx b/examples/example-query/pages/index.tsx
@@ -17,6 +17,7 @@ export default function IndexPage({
  <Head>
  <title>Example Query</title>
  <meta
+ key="description"
  name="description"
  content="A Next.js site powered by a Drupal backend."
  />

diff --git a/examples/example-umami/components/meta.tsx b/examples/example-umami/components/meta.tsx
@@ -16,17 +16,19 @@ export function Meta({ title, description }: MetaProps) {
  return (
  <Head>
  <link
+ key="canonical_link"
  rel="canonical"
  href={absoluteURL(router.asPath !== "/" ? router.asPath : "")}
  />
  <title>{`${title} | ${siteConfig.name}`}</title>
- <meta name="description" content={description || siteConfig.slogan} />
+ <meta key="description" name="description" content={description || siteConfig.slogan} />
  <meta
+ key="og_image"
  property="og:image"
  content={`${process.env.NEXT_PUBLIC_BASE_URL}/images/meta.jpg`}
  />
- <meta property="og:image:width" content="800" />
- <meta property="og:image:height" content="600" />
+ <meta key="og_image_width" property="og:image:width" content="800" />
+ <meta key="og_image_height" property="og:image:height" content="600" />
  </Head>
  )
 }