最简洁网站 SEO 优化，Lighthouse SEO 评分 92

什么是 SEO

SEO(全称：Search engine optimization， 中文名称：搜索引擎优化) 是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化，从而提高网站的网站关键词排名以及公司产品的曝光度。

搜索引擎的工作原理

网络爬虫爬取网页的时候，需要分析页面内容：

• 从 meta 标签中读取 keywords 、 description、title 的内容。
• 根据语义化的 html 的标签爬取和分析内容。
• 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。
• 像 h1 - h6 标签是具有不同程度的强调意义的。
• 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。

优化后 LightHouse 评分

做相关的外链

• 外链：在相关权威网站，发布文章附加链接
• 友情链接：在相关友商的网站，添加友链

向各大搜索引擎提交收录自己的站点

• 百度提交入口：https://ziyuan.baidu.com/linksubmit/url
• Google提交入口：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl
• 360提交入口：http://info.so.360.cn/site_submit.html
• 搜狗提交入口：http://fankui.help.sogou.com/index.php/web/web/index?type=1
• 必应提交入口：https://www.bing.com/toolbox/webmaster

关键词

• 工麻时代的关键词：总结用户了解工业大麻时，会选择什么关键词搜索
• 选择适当的标签，添加关键词

  <title>博客title>
  <meta name="description" content='个人博客'>
  <meta name="keywords" content="个人博客">
  <meta name="anthor" content="作者">
  <meta name="robots" content="博客,前端,web,VUE">
  1
  2
  3
  4
  5

图片添加 Alt

<img alt='图片1' src='' />
1

VUE 单页面应用 SEO 优化

优化的方式

• SSR服务器渲染: SSR
• 静态化：Nuxt.js框架
• 预渲染 prerender-spa-plugin：router中必须是history模式

  cnpm install prerender-spa-plugin --save
  // vue.config.js
  module.exports = {
    configureWebpack: {
      plugins: [ new MyAwesomeWebpackPlugin() ]
    }
  }
  const PrerenderSPAPlugin = require('prerender-spa-plugin')
  const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
  const path = require('path')
  module.exports = {
    configureWebpack: config => {
      if (process.env.NODE_ENV !== 'production') return;
      return {
        plugins: [
          new PrerenderSPAPlugin({
            //网页包的路径将应用程序输出到prerender
            staticDir: path.join(__dirname,'dist'),
            //Routes to render 对应自己router
            routes: ['/', '/home','/blog','/aboutMe','/message'],
            renderer: new Renderer({
              inject: {
                foo: 'bar'
              },
              //渲染时显示浏览器窗口。对调试有用。
              headless: false,
              // // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
              renderAfterDocumentEvent: 'render-event'
            })
          }),
        ],
      };
    }
  }
  // main.js
  new Vue({
    router,
    store,
    render: h => h(App),
    //这里与vue.config.js中的事件名相对应
    mounted () {
        document.dispatchEvent(new Event('render-event'))
    }
  }).$mount('#app')
  // 使用 vue-meta-info 优化每个页面的 关键字
  npm install vue-meta-info --save
  // main.js
  import MetaInfo from 'vue-meta-info'
  Vue.use(MetaInfo)
  // 页面中使用
  export default {
    metaInfo:{
      title: 'message',
      meta: [
        {
          name: 'description',
          content: '这是Message页面',
        },
        {
          name: 'keywords',
          content: 'message'
        }
      ]
    },
    data(){
      return {}
    },
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68

• 使用Phantomjs针对爬虫做处理: 源码地址

编写 robots.txt 引导搜索引擎爬取

User-agent: Baiduspider
Disallow: /baidu
Disallow: /s?
Disallow: /ulink?
Disallow: /link?
Disallow: /home/news/data/
Disallow: /bh
1
2
3
4
5
6
7

通过站长工具统计站点的曝光度

参考文献

webpack cli config
搜索引擎的工作原理
站长工具统计 SEO
反链
robots.txt 生成工具