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

所有源代码、文档和图片都在 github 的仓库里，点击进入仓库

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 服务端使用

相关阅读

karuru

引用和评论

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具