最简洁网站 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">
  

图片添加 Alt

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

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({//网页包的路径将应用程序输出到prerenderstaticDir: path.join(__dirname,'dist'),//Routes to render 对应自己routerroutes: ['/', '/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 {}},
  }
  

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

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

User-agent: Baiduspider
Disallow: /baidu
Disallow: /s?
Disallow: /ulink?
Disallow: /link?
Disallow: /home/news/data/
Disallow: /bh

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

参考文献

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