React服務端渲染之路09——SEO優化

時間 2019-11-09

標籤 react 服務渲染之路 seo 優化欄目 React 简体版

原文原文鏈接

全部源代碼、文檔和圖片都在 github 的倉庫裏，點擊進入倉庫javascript

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服務端渲染之路09——SEO優化

相關閱讀

1. SEO優化

2. 使用 react-helmet 進行 SEO 優化

2.1 客戶端使用

2.2 服務端使用

相關閱讀