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 ...
随机推荐
- luogu P1095 守望者的逃离
题目描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒,这座岛很快就会 ...
- 【2-SAT】URAL - 2089 - Experienced coach
题意:给出n对点a,b 要求从没对点中选出一个,且最终选出的点n个数不能存在相同的.输入数据满足每种数最多出现3次,最少出现1次 思路:第i对点的编号2*i, 2*i+1, 因为每个数最多出现3 ...
- 【递归】先修课 计算概论（A） / 函数递归练习（3）2:分解因数
#include<cstdio> using namespace std; bool is_prime(int x) { ;i*i<=x;i++) ) return false; r ...
- 【记忆化搜索】bzoj1055 [HAOI2008]玩具取名
f(l,r,c)表示sl...sr能否被合成字符c. #include<cstdio> #include<cstring> using namespace std; int m ...
- 1.1（Spring学习笔记）Spring-事务基础
一.Spring 事务 Spring提供对事务支持的核心包是spring-tx-4.3.6.RELEASE包. 该包类有三个核心接口,提供对事务的支持: 1.1PlatformTransactionM ...
- java 的 &和&&的区别
public class Test { public static void main(String[] args) { String str = null; if(str != null & ...
- [Ubuntu Setup] Ubuntu 14.10 LTS 中文输入法的安装
from : http://www.cnblogs.com/zhj5chengfeng/archive/2013/06/23/3150620.html http://xboot.org/thread- ...
- win8 下脚本安装IIS
@echo off echo 正在添加IIS8.0 功能,依据不同的网络速率,全程大约需要5分钟时间... start /w pkgmgr /iu:IIS-WebServerRol ...
- solr6.6 高级搜索Facet
1.介绍 facet分面查询是solr中以导航为目的的查询,在用户查询的结果上根据分类增加了count信息,然后用户根据count信息做进一步实现渐进式精确搜索. 什么字段适合用facet呢? fa ...
- 我的mac OSX bash_profile文件
A typical install of OS X won't create a .bash_profile for you. When you want to run functions from ...