shuding / nextra

Simple, powerful and flexible site generation framework with everything you love from Next.js.
https://nextra.site
MIT License
11.32k stars 1.24k forks source link

when building or running on dev server the head meta tag with property og:title doesn't change #2842

Open Marco5dev opened 5 months ago

Marco5dev commented 5 months ago

when i add this meta tag even if i changed it it doesn't change at all on the dev server or the build this is the theme.config.tsx file

import React from "react";
import { DocsThemeConfig, useConfig } from "nextra-theme-docs";
import Logo from "./components/logo";
import { useRouter } from "next/router";

const config: DocsThemeConfig = {
  logo: () => {
    return (
      <>
        <Logo height={24} />
        <span
          className="mx-2 font-extrabold hidden md:inline select-none"
          title={`verse.db Logo`}
        >
          VERSE.DB
        </span>
      </>
    );
  },
  primaryHue: { dark: 0, light: 230 },
  primarySaturation: { dark: 0, light: 100 },
  head: () => {
    const { route, locale } = useRouter();
    const { frontMatter, title } = useConfig();

    const imageUrl = new URL(
      "https://og.jedi-studio.com/api/og/versedb?type=DOCUMENTATION&title=VERSE%2EDB&description=description%2Etest"
    );
    if (!/\/index\.+/.test(route)) {
      imageUrl.searchParams.set("title", title);
      imageUrl.searchParams.set("description", frontMatter.description);
    }

    const ogTitle = title ? `VERSE.DB | ${title}` : `VERSE.DB`;
    const ogDescription = frontMatter.description ? frontMatter.description : `verse.db isn't just a database, it's your universal data bridge. Designed for unmatched flexibility, security, and performance, verse.db empowers you to manage your data with ease.`;
    const ogImage = frontMatter.image || imageUrl.toString();

    return (
     {/*  SOME META TAGS I REMOVED ONLY HERE TO MAKE THE CODE SHORT */}

        {/*  OG META TAGS WITH NAME*/}
        <meta property="og:title" content={ogTitle} />   {/*  THE PROBLEM IS HERE THAT THERE IS NO EFFECTS ON THIS CODE */}
        <meta property="og:type" content="database" />
          {/*  SOME META TAGS I REMOVED ONLY HERE TO MAKE THE CODE SHORT */}

        {/* TITLE */}
        <title>{ogTitle}</title>
      </>
    );
  },
  footer: {
    text: "VERSE.DB. Powered by JEDI Studio.",
  },
};

export default config;

the problem is with

<meta property="og:title" content={ogTitle} />

and the problem is that even if i put this code when i build the app i get the result like this

<meta property="og:title" content="title - Nextra" />
Marco5dev commented 5 months ago

Images for the problem:

image image

Marco5dev commented 5 months ago

this is my ogTitle:

  const ogTitle = title ? `VERSE.DB | ${title}` : `VERSE.DB`;
berataras commented 4 months ago

any solution?

Marco5dev commented 4 months ago

any solution?

I need a solution

gfazioli commented 3 months ago

The problem is not actually that og:title is not being edited, but that there are two of them. The first one seems to have ' - Nextra' the second one is the one set in the config.

image