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 ...
随机推荐
- ASP.NET Core 2.2 基础知识(九) 使用托管服务实现后台任务
在 ASP.NET Core 中,后台任务作为托管服务实现.托管服务是一个类,而且必须实现 IHostedService 接口,该接口定义了两个方法: StartAsync(CancellationT ...
- sed 概述
sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的内容送 ...
- AxureRP7超强部件库打包下载
摘要: 很多刚刚开始学习Axure的朋友都喜欢到网上搜罗各种部件库(组件库)widgets library ,但是网络中真正实用的并且适合你使用的少之又少,最好的办法就是自己制作适合自己工作内容的部件 ...
- NOI2013部分题解
Day 1 T1:向量内积 直接暴力有60.发现将n个向量合成$n\times d$的矩阵$A$,然后求$A\times A^T$,得到的矩阵包含了所有的答案. 先考虑$k=2$,将答案矩阵和全1矩阵 ...
- 【2-SAT】Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) D. Innokenty and a Football League
先反复地扫(不超过n次),把所有可以确定唯一取法的给确定下来. 然后对于剩下的不能确定的,跑2-SAT.输出可行解时,对于a和¬a,如果a所在的强连通分量序号在¬a之前,则取a,否则不取a.如果a和¬ ...
- Xshell连接VM中Ubuntu
摘要:终端输入ifconfig获取本地虚拟机的IP地址;安装openssh-serversudoapt-getinstallopenssh-server 查看server是否启动: ps-ef|gre ...
- 动态NAT地址转换
1.配置路由器的端口ip地址(注意外网和内网ip地址的设置) Router(config)#inter f0/0 Router(config-if)#ip add 192.168.1.1 255.25 ...
- coco2dx-2.2.2 win32启动过程(opengl 和 窗口大小初始化部分) - 学习笔记 1
因为最近要做不同分辩率的适配,所于看了下引擎这方面的代码,记录一下当是学习笔记,cocos2d-x 版本 2.2.2 , 例子是samples\Cpp\TestCpp下的 TestCpp. 先看下ma ...
- Java 和 数据库两种方式进行加锁
java方式: publicstatic synchronized int generate(StringtableName){ Stringsql = "select value from ...
- iOS：MBProgressHUD的基本使用
下载地址:https://github.com/jdg/MBProgressHUD/ //方式1.直接在View上show HUD = [[MBProgressHUD showHUDAddedTo:s ...