NextJS动态标题

6jjcrrmo 于 2023-02-12 发布在其他

关注(0)|答案(4)|浏览(197)

一直在谷歌上搜索，找到了改变<title>的方法。那个方法是这样的：https://github.com/zeit/next.js/tree/master/examples/layout-component
主要的问题是，每次有人刷新网站/更改页面的标题从http://localhost:3000到实际的标题（如关于我们），我有点担心这是如何影响搜索引擎优化。
动态更改页面标题的正确方法是什么？
我的布局文件：

import Link from 'next/link'
import Head from './../node_modules/next/head'

export default function Layout({ children, title = 'Welcome to my website' }) {
  return (
    <div>
        <Head>
          <title>{title}</title>
        </Head>

        {children}
    </div>
  )
}

next.js

来源：https://stackoverflow.com/questions/57126760/nextjs-dynamic-title

4条答案

按热度按时间

z9ju0rcb1#

checkout next-seo并将其安装到您的next.js应用程序中。

yarn add next-seo 
# or 
npm install --save next-seo

它会神奇地为你处理页面标题和 meta描述。

import React from 'react';
import { NextSeo } from 'next-seo'; // then add the `NextSeo` at any `pages/` that you wish

export default () => (
  <>
    <NextSeo
      title="About Us, or just any title that you wish"
      description="Then with a short description here."
    />
    <p>Simple Usage</p>
  </>
);

我已经在我自己的web app上实现了同样的策略。

赞(0）回复(0）举报 2023-02-12

nfeuvbwi2#

对我来说这很有效，
从下一个导入<Head>，

import Head from 'next/head'

在返回语句中，

<>
      <Head>
        <title>Page Title</title>
      </Head>
      <section>
          <Your_JSX_CODE>
      </section>
    </>

赞(0）回复(0）举报 2023-02-12

tzcvj98z3#

如果您需要一个动态的标题/描述，例如对于路由参数的情况，您可以这样做。（考虑页面名称是[id].js）

import React from 'react'
import { NextSeo } from 'next-seo' //as proposed by @xun
// import Head from "next/head" //alternative solution

const Detail = ({id}) => {
  
  const title = `My ${id} title.`
  const description = `My ${id} description.`
  
  return (
     <>
     <NextSeo
      title={title}
      description={description}
    />
    <p>It works!</p>
    </>
    )}

export default Detail

在你档案的最后：

export async function getServerSideProps({query}) {
  const { id } = query

  return {
    props: {
      id
    },
  };
}

祝你好运！

赞(0）回复(0）举报 2023-02-12

j2datikz4#

我在我的依赖项中重新安装了“next”和“next-routes”，现在可以正常工作了。

赞(0）回复(0）举报 2023-02-12

我来回答

NextJS动态标题

4条答案

相关问题

热门标签

最新问答