如何在使用 reactjs 构建的网站中更改标题和描述答案

【问题标题】：How to change Title and Desscription in the website that build with reactjs如何在使用 reactjs 构建的网站中更改标题和描述
【发布时间】：2021-05-31 09:04:25
【问题描述】：

我在 react java 中有我的网站。它建得非常早。现在我正在尝试为我的网站做 SEO，但我无法为每个页面提供单独的 SEO 标题和描述。即使我输入语法，谷歌也无法识别它。因为，当我单击任何页面的“查看源代码”时，它只会打开主页的查看源代码。视图源中没有显示其他页面。

当我向一些技术人员询问这个问题时，他说，整个网站就像一个单一的登录页面，所以只会这样。

如果是这样，其他人如何为他们的网站做 SEO？

有没有办法解决这个问题？

【问题讨论】：

标签： javascript java reactjs react-native seo

【解决方案1】：

这完全取决于您创建的内容等。但是使用https://www.npmjs.com/package/react-helmet 可以轻松地在您的页面上添加元数据

如果您希望页面可被搜索引擎索引，则需要具有 SPA 模式，并且还需要使用 SSR（静态站点渲染）来渲染页面。否则，Google 抓取工具将无法读取它

如果你是 NextJS 或类似的框架，那么这很容易。

【讨论】：

【解决方案2】：

我在使用 AngularJS 构建的网站时遇到了类似的问题。

为了解决这个问题，我们使用this lib 创建了一个预渲染服务。

我们将爬虫流量路由到预渲染服务。

如果操作正确，Google 和其他爬虫将始终获得完全呈现的页面，从而解决 SPA 问题。

【讨论】：

【解决方案3】：

尝试 react-meta-tags npm 库，根据需要在每个组件中添加元标记

npm install react-meta-tags --save

让我们先导入 react 和 react-meta-tags

import React from 'react';
import MetaTags from 'react-meta-tags';

//lets make a componet having some meta tags structure like this
class Component1 extends React.Component {
  render() {
    return (
        <div className="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta name="description" content="Some description." />
            <meta property="og:title" content="MyApp" />
            <meta property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div className="content"> Some Content </div>
        </div>
      )
  }
}

首先你应该试试这个：- 对于 react 或简单的 html 站点，程序是相同的在你的公共目录>index.html里面修改它们

标题要给出标题，我们应该在 <title> my title </title> 标签之间添加我们的磁贴

用于说明 在

之间添加这个标签

<meta name=”description” content=”This is my site description”>

【讨论】：

嗨，。我可以输入那些，但是，..更新后，。当我打开该页面的视图源时，它只打开主页的视图源。因此，谷歌不会抓取这些页面的页面。