什么是 SEO

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

搜索引擎的工作原理

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

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

优化后 LightHouse 评分

Lighthousescore

做相关的外链

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

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

百度提交入口：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({
          //网页包的路径将应用程序输出到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 {}
  },
}

使用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 生成工具

原文地址：https://www.jb51.cc/wenti/3283409.html

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