我有一个使用 Next.js 框架构建的站点。为了优化SEO，我添加了Unique <Meta/>标签在 <Head/>组件来自 Next/Head在每个页面上(index.tsx、titles/[title].tsx)。但是，在使用 BrowseSEO 等爬行站点进行测试时，每个页面上指定的 Meta 标签不可读。标题也一直显示错误。
这是browseSEO中网站页面的链接:Eating Animal Page
这是来自 pages/titles/[title].tsx 的片段文件
const Title: NextPage<{ content: Content; }> = ({
content,
}) => {
const {title, titlePath, desc} = content
return (
<>
<Head>
<link rel="canonical" href={`https://www.iwonder.com${titlePath}`} />
<title>{`Watch ${title} Streaming Online | iwonder`}</title>
<meta key="description" name="description" content={desc} />
</Head>
...
</>
)
}
export const getServerSideProps = async ({ req }: GetServerSidePropsContext) => {
const { url = '' } = req
const thePath = uri.parse(url).pathname
const id = thePath.substring(thePath.lastIndexOf('/')
const { content } = await getSingleTitle(id) //fetch for content data
return { props: { content } }
}
export default Title
最佳答案
这些元标记存在于 DevTools 中的页面上，但不存在于页面源中。所以这些特定的元标记是在客户端添加的。您在 browseSEO 中看不到它们，因为它在分析页面时似乎没有执行 JS。
我假设 page和 desc变量取决于页面参数 [title]由 Next.js 路由器解析。 next/router是一个客户端路由器，所以依赖它的代码只能在客户端执行。这就是为什么在客户端添加这些元标记的原因。
如果您需要在第一次响应时在页面源中显示动态元标记，则必须预先呈现它。您可以使用 getStaticProps在构建时渲染或 getServerSideProps在请求时呈现。
关于reactjs - BrowseSEO 无法读取 Next.js React App 中的 META 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62906981/