一直在谷歌上搜索并找到了一种方法来改变<title>. 就是这样：https : //github.com/zeit/next.js/tree/master/examples/layout-component
主要问题是每次有人刷新站点/更改页面时，标题都会从http://localhost:3000实际标题变为实际标题（例如关于我们），我有点担心这会如何影响 SEO。
动态更改页面标题的正确方法是什么？
我的布局文件：
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>
)
}
Sam*_*mir 11
对我来说这很有效，
<Head>从下一个导入，
import Head from 'next/head'
在回报声明中，
<>
<Head>
<title>Page Title</title>
</Head>
<section>
<Your_JSX_CODE>
</section>
</>
查看next-seo并将其安装在您的 next.js 应用程序中。
yarn add next-seo
# or
npm install --save next-seo
它将神奇地为您处理页面标题和元描述。
yarn add next-seo
# or
npm install --save next-seo
我已经在我自己的网络应用程序上实现了相同的策略。
如果您需要动态标题/描述，例如对于路线参数情况，您可以这样做。（假设页面名称是[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
},
};
}
祝你好运！
| 归档时间： |
|
| 查看次数： |
6106 次 |
| 最近记录： |