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

什么是 SEO

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

搜索引擎的工作原理

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

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

优化后 LightHouse 评分

最简洁网站 SEO 优化,Lighthouse SEO 评分 92_第1张图片

做相关的外链

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

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

  • 百度提交入口: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 生成工具

你可能感兴趣的:(前端,前端,vue.js,node.js,npm,html)