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 ...
随机推荐
- 用python 将 pymysql操作封装成类
觉得代码啰嗦的可以把logging日志删掉,但是工程中时刻要记得写日志 import pymysql import logging import sys # 加入日志 #获取logger实例 logg ...
- 移除tabBar 重影
-(void)viewWillLayoutSubviews{ [super viewWillLayoutSubviews]; for (UIView *child in self.tabBar.sub ...
- IOS之Block的应用-textFeild的回调应用
Block的一点优点为可以省略回调函数,简化代码今天我就应用了以下. 以下是代码片段. _testTextField1=[[MyTextField alloc] init]; [self.view a ...
- 再谈EditText只能输入金额
上次写了一篇EditText只能输入金额的博客,后来发现一个bug,当还未输入数字的情况下输入小数点程序就崩了,我去测了一下支付宝,看看会怎么样,我先输入小数点,程序正常,我再输入数字,可以正常输入, ...
- 继续推荐几款VisualStudio的插件（二）
今天晚上闲着的时候逛了一下,发现了几款不错的VisualStudio插件,这里推荐一下: Exception Breaker 在调试的时候,为了及时发现错误,我们常常会打开"总是引发所有CL ...
- 【k8s】了解一下k8s
了解一下k8s 地址: https://www.kubernetes.org.cn/doc-11
- Centos7下ZABBIX安装全记录
安装之前务必关闭SELINUX Install Repository with MySQL database : rpm -i https://repo.zabbix.com/zabbix/3.4/r ...
- css活用，半星星的效果
1.首先下载要用到星星字体 http://www.w3cplus.com/w3cplusDemo/demos/webFontIcon.html 2.css .cleanfloat::after{dis ...
- nagios学习记录
这几天开始接触nagios,记录下学习的心得 监控机上需要安装nagios,nagios-plugins, nrpe 被监控机上需要安装nagios-plugins, nrpe nagios通过插件n ...
- Selenium webdriver Java firefox 路径设置问题
问题: Cannot find firefox binary in PATH. Make sure firefox is installed. 原因:selenium找不到Firefox浏览器. 方法 ...