seo-mask -- 為單頁應用建立一個適合蜘蛛爬取的seo網站

lipten100發表於2019-01-19
網站

seo-mask

seo-mask是利用搜尋引擎蜘蛛的爬取原理（蜘蛛只會爬取網頁的內容，並不會關心解析網頁裡的css和js），製作一套專門針對seo的映象網站，鄙人稱它為針對seo的mask，讓蜘蛛看到的是網站的mask更利於收錄。無需改變原有網站的原始碼，此方法適合seo改造成本較大的具有動態資料的spa單頁應用。

與流行的seo方案對比

優點 缺點
prerender 預渲染 部署方便，開發成本低 1. 無法render動態改變的頁面(如：某商品詳情頁) ; 2. 頁面太多時造成儲存負擔
ssr服務端渲染 一步到位，開發自主控制頁面渲染 1. 對於已線上上運營的spa專案改造成本太大； 2. 開發過程需要考慮seo規範；3.需要對伺服器深入瞭解優化渲染
seo-mask 1. 無需改動原始碼；2. 自由決定需要被爬取的內容 1.需要另外維護一套網站程式碼(開發成本極低)

適用範圍

  • 複雜型單頁應用（如：論壇、商城、新聞等）
  • 已經線上上運營改造服務端渲染成本巨大的單頁應用
  • express作為啟動伺服器(後期會陸續推出適配不同伺服器的版本)

Demo

一個簡易的部落格網站

Demo網站是一個基於cra開發的簡易部落格示例，在該專案的example目錄，你可以下載下來本地執行：

git clone https://github.com/lipten/seo-mask.git

cd seo-mask/example

npm install

npm run start
複製程式碼

Install

// With npm
npm install seo-mask

// With bower
bower install seo-mask
複製程式碼

Usage

請確保你的專案啟動伺服器是express或者是基於express的webpack-dev-server，再進行下面的操作。

  • 在你的啟動伺服器例項var app = express()加入seo-mask中介軟體，還有相應的配置資料即可。
app.use(require('seo-mask')({
  routes: require('../seo/routes'),
  tdk_config: require('../seo/tdk'),
  layout_render: require('../seo/src/layout'),
}));
複製程式碼
  • 如果是webpack-dev-server，則在devServer的配置裡的before，加入程式碼：

webpack: devServer.before

before(app, server) {
  app.use(require('seo-mask')({
    routes: require('../seo/routes'),
    tdk_config: require('../seo/tdk'),
    layout_render: require('../seo/src/layout'),
  }));

  ......
},
複製程式碼

傳入一個物件，分別有routes、tdk_config和layout_render三個屬性，具體釋義和教程請接著往下看：

SEO目錄

在你的專案裡新建一個seo目錄，該目錄用於配置你的mask網站路由及網站的TDK(title、description和keywords)配置，以及mask網站的所有內容。

目錄結構如下：

my-app/
  ├── xxxx
  └── seo/
      ├── src/                  # mask網站內容
      |   |—— home/             # 根據自身業務需求建立seo-mask頁面
      |   |   |—— index.ejs
      |   |   └── index.js
      |   |—— blog/             # 根據你的網站的頁面做調整，這裡假設是blog
      |   |   |—— index.ejs
      |   |   └── index.js
      |   |—— blog_detail/
      |   |   |—— index.ejs
      |   |   └── index.js
      |   |—— layout.ejs        # seo-mask網站也需要一個layout佈置網站head或一些公共元素
      |   └── layout.js         # 提供layout_render渲染整個mask網站
      |—— routes.js             # routes配置匹配特定的路徑指向對應的mask頁面
      └── tdk.js                # 配置特定路徑的預設tdk，必須要有一組作為網站的預設tdk
複製程式碼
  1. 編輯tdk.js、routes.js以及layout.js：
// seo/tdk.js

// 為特定路徑配置預設tdk
module.exports = {
  // 預設tdk，至少寫一組
  '^/$': {
    title: 'SEO-Mask 示例網站',
    description: '這是一個seo-mask示例網站，專案地址https://github.com/lipten/seo-mask',
    keywords: 'seo,example',
  },
  // 可以根據不同路徑匹配不同的tdk
  '^/blog$': {
    title: 'Blog - SEO-Mask 示例網站',
  },
}

// seo/routes.js
module.exports = {
  '^/blog$': require('./src/blog'),
  '^/blog/\\d+$': require('./src/blog_detail'),
  '^/?$': require('./src/home'),
}

// seo/src/layout.js

const ejs = require('ejs')  //記得要裝ejs模組：npm install -D ejs
const fs = require('fs')
const path = require('path')
const template = fs.readFileSync(path.resolve(__dirname, './layout.ejs'), 'utf8');

const layout_render = (children) => {
  return ejs.render(template, children)
}
module.exports = layout_render

複製程式碼
  1. 接著定義你的layout.ejs模板:
// seo/src/layout.ejs
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name=”renderer” content=”webkit”>
  <meta content="<%= tdk.keywords%>" name="keywords"/>
  <meta content="<%= tdk.description%>" name="description"/>
  <title><%= tdk.title%></title>
</head>
<body>
  <div id="root">
    <nav>
      <a href="/">home</a>
      <a href="/blog">blog</a>
    </nav>
    <%- result -%>
    <p>友情連結</p>
    <a href="http://xxx.xx">xx</a>
  </div>
</body>
</html>

複製程式碼
  1. 其他的頁面模板可以用很簡潔的html來寫，js直接渲染:
// seo/src/home/index.ejs

<div>
  <h1>SEO-Mask 首頁</h1>
  <h2>Hello, world!</h2>
  <p>
    這是一個簡單的部落格網站，您現在是通過搜尋引擎蜘蛛訪問看到這個簡單的網站內容，您可以繼續訪問部落格頁面檢視我寫的“部落格”。
  </p>
  <a href="/blog">前往部落格</a>
</div>



// seo/src/home/index.js

const ejs = require('ejs')
const fs = require('fs')
const path = require('path')
const template = fs.readFileSync(path.resolve(__dirname, './index.ejs'), 'utf8');
const axios = require('axios');

module.exports = async (req) => {
  const result = ejs.render(template)
  return {result}
}
複製程式碼
  1. 需要從介面拉取動態資料的頁面也可以做到：
// seo/src/blog/index.ejs

<div>
  <ul>
    部落格列表
    <% post_list.map((item) => { %>
    <li><a href="/blog/<%= item.id-%>" target="_blank"><%= item.title-%></a></li>
    <% })%>
  </ul>
</div>


// seo/src/blog/index.js
const ejs = require('ejs')
const fs = require('fs')
const path = require('path')
const template = fs.readFileSync(path.resolve(__dirname, './index.ejs'), 'utf8');
const axios = require('axios');

module.exports = async (req) => {
  // 假裝部落格資料是從api拉取的。。
  const res = await axios('/api/posts')
  const result = ejs.render(template, {post_list: res.data.items})
  return {result}
}

複製程式碼
  1. 需要在部落格詳情頁設定網站標題為部落格標題也可以做到：
// seo/src/blog_detail/index.ejs

<div>
  <h1>部落格標題<%= post.title%></h1>
  <p><%= post.content%></p>
</div>


// seo/src/blog_detail/index.js
const ejs = require('ejs')
const fs = require('fs')
const path = require('path')
const template = fs.readFileSync(path.resolve(__dirname, './index.ejs'), 'utf8');
const axios = require('axios');

module.exports = async (req) => {
  const post_id = req.path.split('/')[2]
  // 假裝部落格資料是從api拉取的。。
  const res = await axios.get(`/api/post/${post_id}`)
  const post = res.data
  const result = ejs.render(template, {post})
  // 設定部落格標題為網站標題，動態設定tdk
  const tdk = {
    title: `${post.title} - SEO-Mask 示例網站`,
    description: post.description,
    keywords: 'SEO-Mask,blog'
  }
  return {result, tdk}
}

複製程式碼

Resource

單頁應用SPA做SEO的一種清奇的方案

License

MIT

相關文章