seo-mask
seo-mask是利用搜索引擎蜘蛛的爬取原理（蜘蛛只會爬取網(wǎng)頁的內(nèi)容，并不會關心解析網(wǎng)頁里的css和js）雌续，制作一套專門針對seo的鏡像網(wǎng)站菇晃，鄙人稱它為針對seo的mask，讓蜘蛛看到的是網(wǎng)站的mask更利于收錄呆万。無需改變原有網(wǎng)站的源碼商源，此方法適合seo改造成本較大的具有動態(tài)數(shù)據(jù)的spa單頁應用。
與流行的seo方案對比
| 優(yōu)點 | 缺點 | |
|---|---|---|
| prerender 預渲染 | 部署方便谋减，開發(fā)成本低 | 1. 無法render動態(tài)改變的頁面(如：某商品詳情頁) ; 2. 頁面太多時造成存儲負擔 |
| ssr服務端渲染 | 一步到位牡彻，開發(fā)自主控制頁面渲染 | 1. 對于已在線上運營的spa項目改造成本太大； 2. 開發(fā)過程需要考慮seo規(guī)范出爹；3.需要對服務器深入了解優(yōu)化渲染 |
| seo-mask | 1. 無需改動源代碼庄吼；2. 自由決定需要被爬取的內(nèi)容 | 1.需要另外維護一套網(wǎng)站代碼(開發(fā)成本極低) |
適用范圍
- 復雜型單頁應用（如：論壇、商城严就、新聞等）
- 已經(jīng)在線上運營改造服務端渲染成本巨大的單頁應用
- express作為啟動服務器(后期會陸續(xù)推出適配不同服務器的版本)
Demo
Demo網(wǎng)站是一個基于cra開發(fā)的簡易博客示例总寻，在該項目的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中間件，還有相應的配置數(shù)據(jù)即可铸董。
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，加入代碼：
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網(wǎng)站路由及網(wǎng)站的TDK(title套鹅、description和keywords)配置，以及mask網(wǎng)站的所有內(nèi)容汰具。
目錄結構如下：
my-app/
├── xxxx
└── seo/
├── src/ # mask網(wǎng)站內(nèi)容
| |—— home/ # 根據(jù)自身業(yè)務需求建立seo-mask頁面
| | |—— index.ejs
| | └── index.js
| |—— blog/ # 根據(jù)你的網(wǎng)站的頁面做調(diào)整卓鹿，這里假設是blog
| | |—— index.ejs
| | └── index.js
| |—— blog_detail/
| | |—— index.ejs
| | └── index.js
| |—— layout.ejs # seo-mask網(wǎng)站也需要一個layout布置網(wǎng)站head或一些公共元素
| └── layout.js # 提供layout_render渲染整個mask網(wǎng)站
|—— routes.js # routes配置匹配特定的路徑指向?qū)膍ask頁面
└── tdk.js # 配置特定路徑的默認tdk，必須要有一組作為網(wǎng)站的默認tdk
- 編輯tdk.js郁副、routes.js以及l(fā)ayout.js：
// seo/tdk.js
// 為特定路徑配置默認tdk
module.exports = {
// 默認tdk减牺，至少寫一組
'^/$': {
title: 'SEO-Mask 示例網(wǎng)站',
description: '這是一個seo-mask示例網(wǎng)站，項目地址https://github.com/lipten/seo-mask',
keywords: 'seo,example',
},
// 可以根據(jù)不同路徑匹配不同的tdk
'^/blog$': {
title: 'Blog - SEO-Mask 示例網(wǎng)站',
},
}
// 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
- 接著定義你的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 >xx</a>
</div>
</body>
</html>
- 其他的頁面模板可以用很簡潔的html來寫，js直接渲染:
// seo/src/home/index.ejs
<div>
<h1>SEO-Mask 首頁</h1>
<h2>Hello, world!</h2>
<p>
這是一個簡單的博客網(wǎng)站拔疚，您現(xiàn)在是通過搜索引擎蜘蛛訪問看到這個簡單的網(wǎng)站內(nèi)容肥隆，您可以繼續(xù)訪問博客頁面查看我寫的“博客”。
</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}
}
- 需要從接口拉取動態(tài)數(shù)據(jù)的頁面也可以做到：
// 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) => {
// 假裝博客數(shù)據(jù)是從api拉取的稚失。栋艳。
const res = await axios('/api/posts')
const result = ejs.render(template, {post_list: res.data.items})
return {result}
}
- 需要在博客詳情頁設置網(wǎng)站標題為博客標題也可以做到：
// 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]
// 假裝博客數(shù)據(jù)是從api拉取的。句各。
const res = await axios.get(`/api/post/${post_id}`)
const post = res.data
const result = ejs.render(template, {post})
// 設置博客標題為網(wǎng)站標題吸占，動態(tài)設置tdk
const tdk = {
title: `${post.title} - SEO-Mask 示例網(wǎng)站`,
description: post.description,
keywords: 'SEO-Mask,blog'
}
return {result, tdk}
}
Resource
License
MIT
