React服務端渲染探祕：8.作好SEO的一些技巧，引入react-helmet

時間 2019-12-10

標籤 react 服務渲染探祕作好 seo 一些技巧引入 helmet 欄目 React 简体版

原文原文鏈接

這一節咱們來簡單的聊一點SEO相關的內容。css

所謂SEO(Search Engine Optimization)，指的是利用搜索引擎的規則提升網站在有關搜索引擎內的天然排名。如今的搜索引擎爬蟲通常是全文分析的模式，分析內容涵蓋了一個網站主要3個部分的內容:文本、多媒體(主要是圖片)和外部連接，經過這些來判斷網站的類型和主題。所以，在作SEO優化的時候，能夠圍繞這三個角度來展開。html

對於文原本說，儘可能不要抄襲已經存在的文章，以寫技術博客爲例，東拼西湊抄來的文章排名通常不會高，若是須要引用別人的文章要記得聲明出處，不過最好是原創，這樣排名效果會比較好。多媒體包含了視頻、圖片等文件形式，如今比較權威的搜索引擎爬蟲好比Google作到對圖片的分析是基本沒有問題的，所以高質量的圖片也是加分項。另外是外部連接，也就是網站中a標籤的指向，最好也是和當前網站相關的一些連接，更容易讓爬蟲分析。前端

固然，作好網站的門面，也就是標題和描述也是相當重要的。如：react

網站標題中不只僅包含了關鍵詞，並且有比較詳細和靠譜的描述，這讓用戶一看到就以爲很是親切和可靠，有一種想要點擊的衝動，這就代表網站的 轉化率比較高。

而React項目中，開發的是單頁面的應用，頁面始終只有一份title和description，如何根據不一樣的組件顯示來對應不一樣的網站標題和描述呢？npm

實際上是能夠作到的。redux

npm install react-helmet --save
複製代碼

組件代碼:(仍是以Home組件爲例)微信

import { Helmet } from 'react-helmet';

//...
render() { 
    return (
      <Fragment> <!--Helmet標籤中的內容會被放到客戶端的head部分--> <Helmet> <title>這是三元的技術博客，分享前端知識</title> <meta name="description" content="這是三元的技術博客，分享前端知識"/> </Helmet> <div className="test"> { this.getList() } </div> </Fragment> ); //... 複製代碼

這只是作了客戶端的部分，在服務端仍須要作相應的處理。react-router

其實也很是簡單：dom

//server/utils.js
import { renderToString } from 'react-dom/server';
import {  StaticRouter } from 'react-router-dom'; 
import React from 'react';
import { Provider } from "react-redux";
import { renderRoutes } from 'react-router-config';
import { Helmet } from 'react-helmet';

export const render = (store, routes, req, context) => {
  const content = renderToString(
    <Provider store={store}> <StaticRouter location={req.path} context={context}> <div> {renderRoutes(routes)} </div> </StaticRouter> </Provider>
  );
  //拿到helmet對象，而後在html字符串中引入
  const helmet = Helmet.renderStatic();

  const cssStr = context.css.length ? context.css.join('\n') : '';

  return  ` <html> <head> <style>${cssStr}</style> ${helmet.title.toString()} ${helmet.meta.toString()} </head> <body> <div id="root">${content}</div> <script> window.context = { state: ${JSON.stringify(store.getState())} } </script> <script src="/index.js"></script> </body> </html> `
};
複製代碼