【前端芝士树】SPA 网站 SEO 初级优化指南（MVVM）

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>

Title
title 网站标题
Meta - Description
description 给搜索引擎提供了关于这个网页的简短的描述
Meta - Keywords
keywords 关于网页内容的几个关键词
Meta - Robots
robots 管理着搜索引擎是否可以进入网页

如下面一段代码，禁止搜索引擎获取网页，并且阻止其进入链接。
```
<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 攻略》

【前端芝士树】SPA 网站 SEO 初级优化指南（MVVM）

SPA 网站 SEO 初级优化指南（MVVM）

百度 Baidu

谷歌 Google

SEO 优化重点

（一）三个基本注意点

（二）利用好 Meta 信息标签

SPA 网站 SEO 优化指南

（一）三种解决方案：

（二）如何判断是爬虫访问还是浏览器访问

（三）如何在百度爬虫来访问时返回静态页

（四）如何生成静态页并优化

云中的猫

引用和评论

🧀 Jetbrains Mono、FiraCode、Source Code Pro、Consolas评测，哪款是你的菜？

100个React最佳实践小技巧

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

一些react使用小技巧（中）

一些react使用小技巧（下）

【前端芝士树】SPA 网站 SEO 初级优化指南（MVVM）

SPA 网站 SEO 初级优化指南（MVVM）

百度 Baidu

谷歌 Google

SEO 优化重点

（一）三个基本注意点

（二）利用好 Meta 信息标签

SPA 网站 SEO 优化指南

（一） 三种解决方案：

（二）如何判断是爬虫访问还是浏览器访问

（三）如何在百度爬虫来访问时返回静态页

（四）如何生成静态页并优化

云中的猫

引用和评论

🧀 Jetbrains Mono、FiraCode、Source Code Pro、Consolas评测，哪款是你的菜？

100个React最佳实践小技巧

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

一些react使用小技巧（中）

一些react使用小技巧（下）

（一）三种解决方案：