reactjs 元数据未显示在选项卡Next.js 13.4.1

f2uvfpb9 于 2023-05-28 发布在 React

关注(0)|答案(1)|浏览(108)

我已经定义了元数据对象，你将在下面看到，但它不显示在我的chrome标签，它只显示“localhost：3000/#home”。我所有的.jsx文件都标有“使用客户端”，因为这是一个我要上传到Github页面的投资组合，所以我不能使用服务器组件。我不知道是不是和这个有关。
下面是我的布局。jsx：

"use client"

import './globals.css'
import { Exo_2, Bruno_Ace } from 'next/font/google'
import Navbar from '@/components/Navbar'
import { AnimatePresence } from 'framer-motion';

 const exo_2 = Exo_2({
  subsets: ['latin'],
  variable: '--font-body',
  display: 'swap'
 })

 const bruno_ace = Bruno_Ace({
  subsets: ['latin'],
  variable: '--font-nav',
  weight: '400',
  display: 'swap'
 })

export const metadata = {
  title: 'Inti Silva',
  description: 'Portfolio Front-end Inti Tomas Silva',
}

export default function RootLayout({children}) {

  return (

    <html lang="en" className={`${exo_2.variable} ${bruno_ace.variable}`}>
      <body>
        <Navbar />
        <AnimatePresence>
        {children}
        </AnimatePresence>
      </body>
    </html>
  )
}

我试着把元数据对象放到我的page.jsx中，但它也不显示。我正在使用新的应用程序目录，它应该是稳定的，在这个版本。
My root page.jsx：

"use client"

import About from '../components/About';
import Contact from '../components/Contact';
import Main from '../components/Main';
import Projects from '../components/Projects';
import Skills from '../components/Skills';
import Transitions from '@/components/Transitions';


export default function Home() {
  return (
        <>
        <Transitions/>
        <Main />
        <About />
        <Skills />
        <Projects />
        <Contact />
        </>
  );
};

reactjs

来源：https://stackoverflow.com/questions/76327674/metadata-not-showing-in-tab-next-js-13-4-1

1条答案

按热度按时间

fhg3lkii1#

nextjs中的 metaTags

你好，在你的代码中，我没有看到任何标题和描述。你可以自己创建类似的组件，并将标题和描述传递给该组件。
下面是一个示例meta tags

import Head from 'next/head';
interface IProps{
  title?: string;
  description?: string;
  image?: string
}
export const MetaTags = ({title, description, image}: IProps) => {
  return(
      <Head>
      {title && (
        <>
          <title>{title}</title>
          <meta property="og:title" content={title} />
          <meta name="twitter:title" content={title} />
        </>
      )}
      {description && (
        <>
          <meta name="description" content={description} />
          <meta property="og:description" content={description} />
          <meta name="twitter:description" content={description} />
        </>
      )}
    </Head>
  )
}

并从页面组件中调用该组件，并传递与页面相关的标题和描述。

import React from "react";
import Link from "next/link";
import { MetaTags } from "../Components/MetaTags";
export default () => (
  <div>
    <MetaTags
      title="Home Page"
      description="home page description"
      image="image_url"
    />
    <Link href="/about">
      <a>About</a>
    </Link>
  </div>
);

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 元数据未显示在选项卡Next.js 13.4.1

1条答案

nextjs中的 metaTags

相关问题

热门标签

最新问答