seo-mask -- 为单页应用创建一个适合蜘蛛爬取的seo网站
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，加入代码：
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
- 编辑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
- 接着定义你的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>
- 其他的页面模板可以用很简洁的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}
}
- 需要从接口拉取动态数据的页面也可以做到：
// 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}
}
- 需要在博客详情页设置网站标题为博客标题也可以做到：
// 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
License
MIT
seo-mask -- 为单页应用创建一个适合蜘蛛爬取的seo网站的更多相关文章
- 【python爬虫】一个简单的爬取百家号文章的小爬虫
需求 用"老龄智能"在百度百家号中搜索文章,爬取文章内容和相关信息. 观察网页 红色框框的地方可以选择资讯来源,我这里选择的是百家号,因为百家号聚合了来自多个平台的新闻报道.首先看 ...
- [Swift通天遁地]二、表格表单-(9)快速创建一个美观强大的表单
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 写一个python 爬虫爬取百度电影并存入mysql中
目标是利用python爬取百度搜索的电影 在类型 地区 年代各个标签下 电影的名字 评分 和图片连接 以及 电影连接 首先我们先在mysql中建表 create table liubo4( id in ...
- 第十六节：Scrapy爬虫框架之项目创建spider文件数据爬取
Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了页面抓取所设计的, 也可以应用在获取API所返回的数据或 ...
- 一个简单的爬取b站up下所有视频的所有评论信息的爬虫
心血来潮搞了一个简单的爬虫,主要是想知道某个人的b站账号,但是你知道,b站在搜索一个用户时,如果这个用户没有投过稿,是搜不到的,,,这时就只能想方法搞到对方的mid,,就是 space.bilibil ...
- Python转页爬取某铝业网站上的数据
天行健,君子以自强不息:地势坤,君子以厚德载物! 好了废话不多说,正式进入主题,前段时间应朋友的请求,爬取了某铝业网站上的数据.刚开始呢,还是挺不愿意的(主要是自己没有完整的爬取过网上的数据哎,即是不 ...
- Python 2.7和3.6爬取妹子图网站单页测试图片
1.url= http://www.mzitu.com/74100/x,2为1到23的值 2.用到模块 os 创建文件目录; re模块正则匹配目录名 图片下载地址; time模块 限制下载时间;req ...
- Python 2.7_爬取妹子图网站单页测试图片_20170114
1.url= http://www.mzitu.com/74100/x,2为1到23的值 2.用到模块 os 创建文件目录; re模块正则匹配目录名 图片下载地址; time模块 限制下载时间;req ...
- 用Python实现的一个简单的爬取省市乡镇的行政区划信息的脚本
# coding=utf-8 # Creeper import os import bs4 import time import MySQLdb import urllib2 import datet ...
随机推荐
- 树莓派编译nginx，支持rtmp直播
树莓派3B+ 系统更新至最新 下载依赖 sudo apt-get update sudo apt-get install libxslt1-dev libgd-dev libgeoip-dev lib ...
- POJ 2763 Housewife Wind（树链剖分+树状数组）
[题目链接] http://poj.org/problem?id=2763 [题目大意] 在一棵树上,给出一些边的边长,有修改边的边长的操作, 询问每次从当前点到目标点的最短距离 [题解] 树链剖分之 ...
- 【贪心】Gym - 100507H - Pair: normal and paranormal
每次取相邻的两个可以射击的从序列中删除,重复n次. 可以看作括号序列的匹配. #include<cstdio> #include<vector> using namespace ...
- 【枚举】【二分答案】【分块答案】【BFS】【最大流】【Dinic】bzoj1189 [HNOI2007]紧急疏散evacuate
[法一]枚举Time(0~N*M): S->'.'(1); 'D'->T(Time); '.'->'D'(dis(用BFS预处理,注意一旦到达'D',BFS就不能继续扩展了,注意di ...
- jQuery的deferred对象详解(转)
jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...
- flask 开发环境搭建
window下: 1)安装python 2)安装pip 3)使用pip install flask 如果成功安装使用pip list 既可以查看到flask的版本 ubuntu下的环境搭建 同样地使用 ...
- Java静态static工具类线程安全问题研究
针对静态方法有以下一些前提: 静态方法和实例方法的区别是静态方法只能引用静态变量,静态方法通过类名来调用,实例方法通过对象实例来调用 每个线程都有自己的线程栈,栈与线程同时创建,每一个虚拟机线程都有自 ...
- Sql-简单分页
create proc proc_searchuser( @username varchar(12), @page int=1, @pagesize int=3, @totalcount int ou ...
- profiler
推荐C++ 的profiler 用于GPU CPU 综合测试 FramePro http://www.puredevsoftware.com/ 可以在进度条上拉时间 查看GPU CPU bound
- 在eclipse上配置tomcat
Eclipse中Tomcat的配置及简单例子 Eclipse中Tomcat的配置是很简单的一个工作,作为一名刚刚起步的编程菜鸟,我将这个配置的过程和简单的例子写下来记录,也希望能给像我怎样的新手一些帮 ...