如何在 React js 中将 Canonical Tag 添加到单页应用程序？答案

【问题标题】：How to add Canonical Tag to single page application in react js?如何在 React js 中将 Canonical Tag 添加到单页应用程序？
【发布时间】：2021-05-29 11:53:26
【问题描述】：

我在 react js 中有一个电子商务单页应用程序，我想添加 Canonical Tag 以使我的应用程序的 SEO 更好，但如果我添加 <link rel="canonical" href="http://example.com/" />我的index.html 将适用于所有页面。

我理解对吗？
我有一个product page，每个产品都有数百页，我该如何添加规范标签？

感谢您的帮助，我是新手。

【问题讨论】：

标签： reactjs seo

【解决方案1】：

您可以使用Helmet 更改规范标签。在路由更改时呈现的任何组件中使用它。示例：

import { Helmet } from 'react-helmet-async';
<Helmet>
    <title>{pageTitle}</title>
    <link rel="canonical" href={pageURL} />
</Helmet>

【讨论】：