seo网站 seo-maskseo-mask方案对比优点缺点预渲染部署方便，开发成本低-未来可期SEO

seo掩码

seo-mask是利用搜索引擎蜘蛛的爬行原理（蜘蛛只能爬取网页内容，不关心解析网页中的css和js），创建一组专门针对seo的镜像网站，我称之为seo的掩码让蜘蛛看到网站的掩码更有利于收录。无需更改原网站的源代码。这种方式适用于需要较大SEO改造成本的动态数据的spa单页应用。

与流行的seo解决方案相比的优缺点

预渲染

部署方便，开发成本低

1、不能动态改变的页面（如：商品详情页）； 2.页面过多造成存储负担

ssr 服务端渲染

一步到位，开发独立控制页面渲染

1、已上线运营的spa项目改造成本过高； 2、开发过程需要考虑seo规范； 3.需要深入了解服务端才能优化渲染

seo掩码

1.无需更改源代码； 2.自由决定需要爬取的内容

1.需要维护另一套网站代码（开发成本极低）

适用范围Demo

一个简单的博客站点

Demo网站是基于cra开发的一个简单博客的例子。在项目的目录下，可以下载并在本地运行：

git clone https://github.com/lipten/seo-mask.git cd seo-mask/example npm install npm run start

// With npm npm install seo-mask // With bower bower install seo-mask

用法

请确保您的项目启动服务器是或基于-dev-seo网站，然后执行以下操作。

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

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

传入一个对象，对象具有、、三个属性。具体的解释和教程请看下面：

SEO优化目录

在你的项目中新建一个seo目录，用于配置你的mask网站路由和网站TDK（title,and）配置seo网站seo网站，以及mask网站的所有内容。

目录结构如下：

编辑 tdk.js、.js 和 .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

接下来定义您的 .ejs 模板：

// seo/src/layout.ejs 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="/">homea> <a href="/blog">bloga> nav> <%- result -%> <p>友情链接p> <a href="http://xxx.xx">xxa> div> body> html>

其他的页面模板可以用非常简洁的html写出来，直接用js渲染：

// seo/src/home/index.ejs


  <h1>SEO-Mask 首页h1>
  <h2>Hello, world!h2>
  <p>
    这是一个简单的博客网站，您现在是通过搜索引擎蜘蛛访问看到这个简单的网站内容，您可以继续访问博客页面查看我写的“博客”。
  p>
  <a href="/blog">前往博客a>


// 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}
}

4、需要从界面拉取动态数据的页面也可以这样做：

// seo/src/blog/index.ejs


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


// 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}
}

也可以在博客详情页面设置网站标题为博客标题：

// seo/src/blog_detail/index.ejs


  <h1>博客标题<%= post.title%>h1>
  <p><%= post.content%>p>


// 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}
}