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

SPA 网站 SEO 初级优化指南(MVVM)

百度 Baidu

百度搜索资源平台 https://ziyuan.baidu.com/?cas…

链接提交地址 https://ziyuan.baidu.com/link…

百度爬虫 UA

谷歌 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 优化重点

(一)三个基本注意点

  1. 信息架构

    信息架构要明晰,这个对 SEO 也非常重要,包括网站扁平化设计,友好的 URL 设计,标题书写,页面相关度信息聚合和融合,这也是影响用户体验的一大部分。

  2. 网站主题

    为网站确定一个主题(核心关键词),一旦确定,那么全站都围绕这个关键词进行扩展和相关性来做

  3. 外链和友链权重

    网站外链就是在别的网站导入自己网站的链接,高质量高 PR 的外链能迅速提高自身网站的权重。友链则是自己的网站包含了其他网站的链接,效果与外链类似。

(二)利用好 Meta 信息标签

Meta 标签用于给搜索引擎提供关于网页的信息,这些信息对于访问者而言是不可见的。

参考淘宝网的做法

<header>
  <title>淘宝网 - 淘!我喜欢</title>
  <meta
    name="description"
    content="淘宝网 - 亚洲较大的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品,同时提供担保交易(先收货后付款)等安全交易保障服务,并由商家提供退货承诺、破损补寄等消费者保障服务,让你安心享受网上购物乐趣!"
  />
  <meta
    name="keyword"
    content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"
  />
  ...
</header>
  1. Title
    title 网站标题
  2. Meta – Description
    description 给搜索引擎提供了关于这个网页的简短的描述
  3. Meta – Keywords
    keywords 关于网页内容的几个关键词
  4. Meta – Robots
    robots 管理着搜索引擎是否可以进入网页

    如下面一段代码,禁止搜索引擎获取网页,并且阻止其进入链接。

    <meta name="”robots”" content="”noindex," nofollow” />

SPA 网站 SEO 优化指南

(一) 三种解决方案:

  1. 服务器端渲染,较为复杂
  2. 页面缓存服务,prerender.io,涉及收费第三方服务,或者中间层启用渲染
  3. 静态页替换,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 确认是否已经返回了静态页的内容。

(四)如何生成静态页并优化

  1. 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
  2. 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
  3. 从浏览器获取静态页内容(推荐)
    与前两者相比,看上去没那么极客,但是非常的简单好用。

    • 首先需要新建一个static.html
    • 然后在浏览器打开需要生成静态页的页面
    • F12 打开 DevTool
    • 鼠标选中<html>标签,右键 Copy > Copy OuterHTML
    • 将内容粘贴至static.html保存即可
  4. 静态页压缩优化

    • 用编辑器打开static.html,删除掉所有的<script></script>以及其中的内容
    • 浏览器打开静态页,按 F12 打开 DevTool 确保没有报错
    • 体积大小优化的程序视页面的复杂度而定,一般能压缩到原有大小的十分之一

参考文章链接

《Meta 标签与搜索引擎优化》

《SEO 网站优化的步骤和技巧有哪些?》

《Angular2 网站 SEO 攻略》

    原文作者:云中的猫
    原文地址: https://segmentfault.com/a/1190000017469566
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞