Defaults Meta Tags Doesn't Get Removed on Nextra.js

[bfzli]

So, I set up a project with Nextra, and everything went smoothly. However, I'm having a problem with setting up the meta tags in production. In the codebase, the meta tags are configured in the theme config as I did it:

import { DocsThemeConfig } from "nextra-theme-docs"
import { LogoIcon } from "ui/icons"

const config: DocsThemeConfig = {
  logo: <LogoIcon />,
  useNextSeoProps() {
    return {
      titleTemplate: "%s | Goat Slider",
      defaultTitle: "title_here",
      description: "description_here",
      keywords: [
        "some_tag"
      ],
      openGraph: {
        type: "website",
        locale: "en_US",
        url: "misite.com",
        site_name: "site_name_here",
        description: "description_here",
        images: [
            {
                url: 'url_here'
            }
        ]
      },
      twitter: {
        card: 'summary_large_image',
        site: '@usernamehere',
        title: 'title_here',
        description: 'description_here',
        images: [
            {
                url: 'url_here'
            }
        ]
      }
    }
  },
  project: {
    link: "link_here",
  },
  docsRepositoryBase: "repo_here",
  footer: {
    text: "text_here"
  }
}

export default config;

But still, after this, Nextra adds those at the end, which replaces my meta tags. I don't know if it's a bug or a misconfiguration on my side.

[bfzli]

I also added meta tags through the Head wrapper on Next to see what happens, but the issue appears:

[bfzli]

Here is the repo to inspect closely: https://github.com/Azwedo/goatslider-docs, the output can also be previewed at https://docs.goatslider.com.

[arno-fukuda]

Try this:

const config: DocsThemeConfig = {

head: function Head() {
    return (
      <>
        <meta name="twitter:site" content="@goatslider" />
        <meta name="twitter:creator" content="@goatslider" />
     </>
)
},

  logo: <LogoIcon />,
  useNextSeoProps() {
    return {
      titleTemplate: "%s | Goat Slider",
      defaultTitle: "title_here",
      description: "description_here",
      keywords: [
        "some_tag"
      ],
      openGraph: {
        type: "website",
        locale: "en_US",
        url: "misite.com",
        site_name: "site_name_here",
        description: "description_here",
        images: [
            {
                url: 'url_here'
            }
        ]
      },
      twitter: {
        card: 'summary_large_image',
        title: 'title_here',
        description: 'description_here',
        images: [
            {
                url: 'url_here'
            }
        ]
      }
    }
  },
  project: {
    link: "link_here",
  },
  docsRepositoryBase: "repo_here",
  footer: {
    text: "text_here"
  }
}

export default config;

[arno-fukuda]

also note that useNextSeoProps description creates og:description for you already, that's why some tags are duplicated in your head.

[bfzli]

The problem is that it uses the default Nextra config even after changing it. Even if I, for example, use 'Description,' the Nextra.js config is still shown for some reason.

[arno-fukuda]

try this: https://github.com/Azwedo/goatslider-docs/pull/34