共计 3382 个字符，预计需要花费 9 分钟才能阅读完成。
SPA 网站 SEO 初级优化指南（MVVM）
百度 Baidu
百度搜索资源平台 https://ziyuan.baidu.com/?cas…
链接提交地址 https://ziyuan.baidu.com/link…
百度爬虫 UA
Mozilla/5.0 (Linux;u;Android 4.2.2;zh-cn;) AppleWebKit/534.46 (KHTML,like Gecko) Version/5.1 Mobile Safari/10600.6.3 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…
Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…）
谷歌 Google
Google Search Console https://search.google.com/sea…
谷歌爬虫 UA
Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
SEO 优化重点
（一）三个基本注意点
信息架构信息架构要明晰，这个对 SEO 也非常重要，包括网站扁平化设计，友好的 URL 设计，标题书写，页面相关度信息聚合和融合，这也是影响用户体验的一大部分。
网站主题为网站确定一个主题（核心关键词），一旦确定，那么全站都围绕这个关键词进行扩展和相关性来做
外链和友链权重网站外链就是在别的网站导入自己网站的链接，高质量高 PR 的外链能迅速提高自身网站的权重。友链则是自己的网站包含了其他网站的链接，效果与外链类似。
（二）利用好 Meta 信息标签
Meta 标签用于给搜索引擎提供关于网页的信息，这些信息对于访问者而言是不可见的。
参考淘宝网的做法
<header>
<title> 淘宝网 – 淘！我喜欢 </title>
<meta
name=”description”
content=” 淘宝网 – 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费 / 点卡充值… 数亿优质商品，同时提供担保交易 (先收货后付款) 等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！”
/>
<meta
name=”keyword”
content=” 淘宝, 掏宝, 网上购物,C2C, 在线交易, 交易市场, 网上交易, 交易市场, 网上买, 网上卖, 购物网站, 团购, 网上贸易, 安全购物, 电子商务, 放心买, 供应, 买卖信息, 网店, 一口价, 拍卖, 网上开店, 网络购物, 打折, 免费开店, 网购, 频道, 店铺 ”
/>
…
</header>
Titletitle 网站标题
Meta – Descriptiondescription 给搜索引擎提供了关于这个网页的简短的描述
Meta – Keywordskeywords 关于网页内容的几个关键词
Meta – Robotsrobots 管理着搜索引擎是否可以进入网页
如下面一段代码，禁止搜索引擎获取网页，并且阻止其进入链接。
<meta name=””robots”” content=””noindex,” nofollow”/>
SPA 网站 SEO 优化指南
（一）三种解决方案：
服务器端渲染，较为复杂
页面缓存服务，prerender.io，涉及收费第三方服务，或者中间层启用渲染
静态页替换，phantom.js、puppeteer 或者浏览器 Copy outerHTML 就能完成，需要 nginx 配合
（二）如何判断是爬虫访问还是浏览器访问
爬虫访问时，会使用特殊的 user agent，以百度蜘蛛的 UA 为例，它会使用“Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…）”这样的 UA，所以我们可以判断 UA 中含有“Baiduspider”字样则意味着是百度蜘蛛来访问了
（三）如何在百度爬虫来访问时返回静态页
先把静态页放置到网站的 /assets/static/ 下，配置 nginx 的配置文件 nginx.conf:
location / {
root C:\projects\bzbclub-dist;
index index.html index.htm;
if ($http_user_agent ~* “Baiduspider”){
rewrite ^/index.html$ /assets/static/index.html last;
}
}
保存配置文件后要使用 nginx -s reload 重新加载网站，然后使用 curl 命令的“-A”参数模拟百度蜘蛛访问首页：
curl -A “Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/s…）” http://localhost:17082 > z:tempbzbclub.html 打开 z:tempbzbclub.html 确认是否已经返回了静态页的内容。
（四）如何生成静态页并优化
Phantom.js
var fs = require(“fs”);
var page = require(“webpage”).create();
phantom.outputEncoding = “utf-8”; // 指定编码方式
page.open(“http://localhost:17082”, function(status) {
if (status === “success”) {
fs.write(“z:\\temp\\index.html”, page.content, “w”);
} else {
console.log(“ 网页加载失败 ”);
}
phantom.exit(0); // 退出系统
});
将此脚本保存为“phantom-static-page.js”，在命令行执行此脚本：
phantomjs phantom-static-page.js
Puppeteer
const fs = require(“fs”);
const puppeteer = require(“puppeteer”);
(async () => {
const browser = await puppeteer.launch({
headless: false
// executablePath: “C:/Program Files (x86)/Google/Chrome”
});
const page = await browser.newPage();
page.setViewport({
width: 1920,
height: 1800
});
await page.goto(“http://localhost:3333”);
await page.screenshot({path: “example.png”});
const content = await page.content();
fs.writeFileSync(“./index.html”, content);
// await page.close();
// await browser.close();
})();
将此脚本保存为“pupp-static-page.js”，在命令行执行此脚本：
node pupp-static-page.js
从浏览器获取静态页内容（推荐）与前两者相比，看上去没那么极客，但是非常的简单好用。
首先需要新建一个 static.html
然后在浏览器打开需要生成静态页的页面
按 F12 打开 DevTool
鼠标选中 <html> 标签，右键 Copy > Copy OuterHTML
将内容粘贴至 static.html 保存即可
静态页压缩优化
用编辑器打开 static.html，删除掉所有的 <script></script> 以及其中的内容
浏览器打开静态页，按 F12 打开 DevTool 确保没有报错
体积大小优化的程序视页面的复杂度而定，一般能压缩到原有大小的十分之一
参考文章链接《Meta 标签与搜索引擎优化》《SEO 网站优化的步骤和技巧有哪些？》《Angular2 网站 SEO 攻略》
