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

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

        
      
    );
  }
}

• News 页面

// src/client/News/index.js
import { Helmet } from 'react-helmet';

class News extends Component {
  render() {
    return (
      <>
        
          
          
        
        

          
News Page
        
      
    );
  }
}

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 = `



  
  
  
  ${helmet.title.toString()}
  ${helmet.meta.toString()}
  


${domContent}




`;

    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优化