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 (
      <>
        
          hello, Home
          
        
        
); } }
  • News 页面
// src/client/News/index.js
import { Helmet } from 'react-helmet';

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

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

你可能感兴趣的