所有源代碼、文檔和圖片都在 github 的倉庫裏，點擊進入倉庫
相關閲讀
- React服務端渲染之路01——項目基礎架構搭建
- React服務端渲染之路02——最簡單的服務端渲染
- React服務端渲染之路03——路由
- React服務端渲染之路04——redux-01
- React服務端渲染之路05——redux-02
- React服務端渲染之路06——優化
- React服務端渲染之路07——添加CSS樣式
- React服務端渲染之路08——404和重定向
- React服務端渲染之路09——SEO優化
1. SEO優化
- 搜索引擎優化
Search engine optimization - 搜索引擎分析網站的時候，蒐集網站的全部內容，進行分析，然後得出一個主題，這個主題，就是搜索關鍵詞
- title 標籤和 meta 裏的 description 的真正作用是提高網站的轉化率，不在於 SEO 優化
- 網站的三部分：文字，鏈接和媒體。文字的原創；鏈接的相關性，外部鏈接越多，網站的歡迎程度越好；圖片的原創，高清
2. 使用 react-helmet 進行 SEO 優化
2.1 客户端使用
- Home 頁面
// src/client/Home/index.js
import {Helmet} from 'react-helmet';
class Home extends Component {
render() {
return (
<>
<Helmet>
<title>hello, Home</title>
<meta name="描述" content="這是 Home 頁面" />
</Helmet>
<div className={styles.wrapper}>
</div>
</>
);
}
}- News 頁面
// src/client/News/index.js
import { Helmet } from 'react-helmet';
class News extends Component {
render() {
return (
<>
<Helmet>
<title>hello, News</title>
<meta name="描述" content="這是 News 頁面" />
</Helmet>
<div>
<h1>News Page</h1>
</div>
</>
);
}
}2.2 服務端使用
- src/server/render.js
// src/server/render.js
import { Helmet } from 'react-helmet';
export default (req, res) => {
Promise.all(promises).then(() => {
const helmet = Helmet.renderStatic();
let html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
${helmet.title.toString()}
${helmet.meta.toString()}
<style>${cssStr}</style>
</head>
<body>
<div id="root">${domContent}</div>
<script>
window.context = {
state: ${JSON.stringify(store.getState())}
}
</script>
<script src="/client.js"></script>
</body>
</html>
`;
res.send(html);
});
};相關閲讀
- React服務端渲染之路01——項目基礎架構搭建
- React服務端渲染之路02——最簡單的服務端渲染
- React服務端渲染之路03——路由
- React服務端渲染之路04——redux-01
- React服務端渲染之路05——redux-02
- React服務端渲染之路06——優化
- React服務端渲染之路07——添加CSS樣式
- React服務端渲染之路08——404和重定向
- React服務端渲染之路09——SEO優化
