React服务端渲染之路09SEO优化

8次阅读

共计 1786 个字符，预计需要花费 5 分钟才能阅读完成。

所有源代码、文档和图片都在 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 优化

搜索引擎优化 Search engine optimization
搜索引擎分析网站的时候，搜集网站的全部内容，进行分析，然后得出一个主题，这个主题，就是搜索关键词
title 标签和 meta 里的 description 的真正作用是提高网站的转化率，不在于 SEO 优化
网站的三部分：文字，链接和媒体。文字的原创；链接的相关性，外部链接越多，网站的欢迎程度越好；图片的原创，高清

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>
      </>
    );
  }
}

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);
  });
};