[Part 2]React App 通过 AWS S3 存储,cloudfront CDN 优化并通过Google Search Console 做搜索引擎优化 SEO

[Part 2]React App 通过 AWS S3 存储,cloudfront CDN 优化并通过Google Search Console 做搜索引擎优化 SEO

第二部分:将React App 针对SEO进行优化并将网址添加到Google Search Console

首先,我们需要对我们的React App做一些改进。因为单独的react应用在搜索引擎排名时存在着很多的问题:

  1. 单网址网页无法容纳足够的内容
  2. meta tags在HTML文本上,无法被React所更改
  3. 网页显示和实际存在差异,Google的网页爬虫和现实中通过浏览器访问所呈现的效果是不同的
  4. 没有sitemap来做index

针对这三个问题,我们将会一一进行解决和优化。

React Router 处理网页的网址跳转

因为React作为一个单网页的应用,只有一个html文件,就是index.html, 而如果想要产生一个多网页的应用,并实现路由的效果,就要借助React Router

React Router 本质上是通过将网址填入浏览器的访问历史中,同时刷新应用到对应的网页状态来让用户产生网页跳转的错觉。

安装方式:

1
npm install react-router-dom

具体的文档参见:https://reacttraining.com/react-router

BrowserRouter

通过使用BrowserRouter,可以使Google抓到所产生的多个网址,并被加入index。

只是有一点需要注意,Google在URL中不要使用hashtag,可能会存在一些问题。因此,如果要为了Google 做SEO,不要使用React Router中的”HashRouter”,可能会无法被Google识别到。Google: Do Not Use Hashtags In URLs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/dashboard">Dashboard</Link></li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}

React Helmet解决meta tags在不同网址的变化

html设定的问题

以我的个人小网站为例,我的head原本设置如下

1
2
3
4
5
6
<head>
<title>ShortCut Mac, Master the shortcuts for your Mac App</title>
<meta name="description"
content="Keyboard shortcuts for your Mac Apps Command ⌘ Control ⌃ option ⌥ shift ⇧"
/>
</head>

在Google的搜索引擎下显示为如下的效果:

这里面,蓝色带有下划线的部分对应的是”title”下的内容,而余下的描述部分对应的则是”meta”tag下的”description”。

如果我们对一个简单的React 应用只是在文件夹目录中的public/index.html添加这一tag,当React router切换网址时,对应的标题(title)和描述(description)会永远保持首页的设定。

shorcutmac.com目前有两个网址,一个是shortcutmac.com/design/sketch,另一个是shortcutmac.com/design/after effect。 那么这两个网址在搜索引擎结果列表下我们期待的状态是对应着两个不同的描述,但实际上只会有html文件中的唯一一个结果。

因此,我们需要使用React Helmet来解决不同网址对应的不同title和description的问题。

React Helmet

安装react helmet:

1
npm install react-helmet

react helmet 应用的例子如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};
`

React Helmet 能够根据不同的

# ,

评论