Bolehkah Vue halaman tunggal melakukan SEO?

Vue halaman tunggal boleh melakukan SEO. Kaedah: 1. Perenderan pelayan SSR, membenarkan perangkak enjin carian terus melihat halaman yang diberikan sepenuhnya, membolehkan kandungan tiba dengan lebih cepat; Gunakan Phantomjs untuk memproses perangkak.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Seperti yang kita semua tahu, aplikasi satu halaman Vue SPA tidak mesra SEO Sudah tentu, terdapat beberapa penyelesaian SEO yang dikaji dan digunakan baru-baru ini berdasarkan Nuxt.js .

• 1. Pelayan SSR;
• 2 perayap proses.
• 1. Paparan pelayan SSR
• Mengenai pemaparan pelayan: Menurut laman web rasmi Vue, terdapat keperluan untuk versi Vue dan keperluan tertentu untuk pelayan, dan ia perlu menyokong persekitaran nodejs.

Pertukaran penggunaan SSR:

Terhad oleh keadaan pembangunan, kod khusus penyemak imbas hanya boleh digunakan dalam fungsi cangkuk kitar hayat tertentu (cangkuk kitar hayat ); sesetengah perpustakaan luaran (pustaka luaran) mungkin memerlukan pemprosesan khas untuk dijalankan dalam aplikasi pemaparan pelayan

Keperluan persekitaran dan penggunaan adalah lebih tinggi dan persekitaran berjalan pelayan Node.js diperlukan

• Dalam kes trafik tinggi, sila sediakan beban pelayan yang sepadan dan gunakan strategi caching dengan bijak.
• Kelebihan:

SEO yang lebih baik, kerana perangkak enjin carian boleh melihat halaman yang diberikan sepenuhnya secara langsung

Masa yang lebih pantas- kepada kandungan, terutamanya untuk keadaan rangkaian yang perlahan atau peranti yang berjalan perlahan.

• Kelemahan: (pit yang dihadapi semasa pembangunan)

1. Satu set kod dan dua set persekitaran pelaksanaan akan menyebabkan pelbagai masalah, seperti tiada tetingkap pada pelayan sisi, objek dokumen, kaedah pemprosesan adalah untuk menambah pertimbangan Jika ia dilaksanakan oleh pelanggan:

merujuk kepada pakej npm, dengan operasi dom, contohnya:
, tidak boleh menggunakan Kaedah

, tukar Gunakan:

if(process.browser){
 console.log(window);
}

wowjs2.Kaedah Nuxt asyncData, dapatkan data sebelum memulakan halaman, tetapi hanya untuk importkomponen halaman

panggilan:

if (process.browser) {
     var { WOW } = require('wowjs');
     require('wowjs/css/libs/animate.css');
 }

masuk Parameter asyncData:

// 并发加载多个接口：
  async asyncData ({ app, query }) {
    let [resA, resB, resC] = await Promise.all([
      app.$axios.get('/api/a'),
      app.$axios.get('/api/b'),
      app.$axios.get('/api/c'),
     ])
     
     return {
       dataA: resA.data,
       dataB: resB.data,
       dataC: resC.data,
     }
  }

3 Jika anda menggunakan sintaks

, anda juga mungkin menghadapi ralat ini apabila digunakan dalam talian:

1.获取动态路由参数，如：

/list/:id' ==>  '/list/123

接收：

async asyncData ({ app, query }) {
  console.log(app.context.params.id) //123
}
2.获取url?获取参数，如：

/list?id=123

接收：

async asyncData ({ app, query }) {
  console.log(query.id) //123
}

Mengikut pada github nuxt No. Isu 1552 v-if menggesa bahawa

harus ditukar kepada

Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.We [as appendChild]

sintaks.

4. Terdapat terlalu banyak perangkap, tinggalkan dan kemas kini kemudian. v-if2. Pestatikan v-show

Pestatikan ialah satu lagi cara pembungkusan Nuxt.js Ia merupakan inovasi Nuxt.js dan kelajuan memuatkan halaman adalah sangat pantas.

Apabila Nuxt.js melaksanakan menjana pembungkusan statik, penghalaan dinamik akan diabaikan.

Jika anda memerlukan penghalaan dinamik, anda mesti menjana halaman statik terlebih dahulu Anda perlu menentukan nilai parameter penghalaan dinamik dan mengkonfigurasinya dalam tatasusunan laluan.

Jalankan pakej dan anda akan melihat halaman yang dibungkus.

-| pages/
---| index.vue
---| users/
-----| _id.vue

Tetapi apakah yang perlu dilakukan jika nilai parameter dinamik laluan adalah dinamik dan bukannya tetap?

// nuxt.config.js
module.exports = {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

Gunakan fungsi yang mengembalikan jenis objek Promise;

Kini kami boleh mengakses
• daripada
, seperti yang ditunjukkan di bawah:

Jika laluan dinamik anda mempunyai banyak parameter, seperti butiran produk , mungkin setinggi berpuluh ribu. Antara muka diperlukan untuk mengembalikan semua ID, dan kemudian ID dilalui semasa pembungkusan dan dibungkus secara tempatan Jika produk diubah suai atau dialih keluar dari rak, ia mesti dibungkus semula Pembungkusan juga sangat perlahan dan tidak realistik apabila kuantitinya besar.

// nuxt.config.js
import axios from 'axios'

export default {
  generate: {
    routes: function () {
      return axios.get('https://my-api/users')
      .then((res) => {
        return res.data.map((user) => {
          return {
            route: '/users/' + user.id,
            payload: user
          }
        })
      })
    }
  }
}

Kelebihan: /users/_id.vuepayload

async asyncData ({ params, error, payload }) {
  if (payload) return { user: payload }
  else return { user: await backend.fetchUser(params.id) }
}

Fail statik tulen, kelajuan akses super pantas; 🎜>Halaman web statik tidak sesuai untuk serangan penggodam dan lebih selamat.

Kekurangan:

• Tidak berkenaan jika terdapat banyak parameter penghalaan dinamik.
• 3. Prapaparan prerender-spa-plugin

Jika anda hanya menggunakannya untuk meningkatkan SEO beberapa halaman pemasaran (seperti /, /about, /contact, dsb. ), maka anda mungkin Memerlukan pra-pemarahan. Daripada menggunakan pelayan web untuk menyusun HTML secara dinamik dalam masa nyata, prapemarahan hanya menjana fail HTML statik untuk laluan tertentu pada masa binaan. Kelebihannya ialah menyediakan prapaparan adalah lebih mudah dan membolehkan anda menganggap bahagian hadapan anda sebagai tapak yang statik sepenuhnya.

vue cli 3

Konfigurasi:

• Tambah dalam main.js:

Nota: .

Anda boleh melihat fail selepas membungkusnya dan folder

$ cnpm install prerender-spa-plugin --save

dibungkus, contohnya:

=> vue.config.js, yang mengandungi kandungan html.

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({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

Kelebihan:

new Vue({
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

mode: “history”Perubahan kecil, cuma perkenalkan pemalam

/index.htmlaboutKelemahan: about/index.html

• 无法使用动态路由；
• 只适用少量页面的项目，页面多达几百个的情况下，打包会很很很慢；

4.使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

具体代码戳这里：vue-seo-phantomjs。
要安装全局phantomjs，局部express，测试：

$ phantomjs spider.js 'https://www.baidu.com'

如果见到在命令行里出现了一推html，那恭喜你，你已经征服PhantomJS啦。
启动之后或者用postman在请求头增加User-Agent值为Baiduspider，效果一样的。

部署上线
线上要安装node、pm2、phantomjs，nginx相关配置：

upstream spider_server {
  server localhost:3000;
}

server {
    listen       80;
    server_name  example.com;
    
    location / {
      proxy_set_header  Host            $host:$proxy_port;
      proxy_set_header  X-Real-IP       $remote_addr;
      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

      if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
        proxy_pass  http://spider_server;
      }
    }
}

优势：

• 完全不用改动项目代码，按原本的SPA开发即可，对比开发SSR成本小不要太多；
• 对已用SPA开发完成的项目，这是不二之选。

不足：

• 部署需要node服务器支持；
• 爬虫访问比网页访问要慢一些，因为定时要定时资源加载完成才返回给爬虫；
• 如果被恶意模拟百度爬虫大量循环爬取，会造成服务器负载方面问题，解决方法是判断访问的IP，是否是百度官方爬虫的IP。

总结

如果构建大型网站，如商城类，别犹豫，直接上SSR服务器渲染，当然也有相应的坑等你，社区较成熟，英文好点，一切问题都迎刃而解。
如果只是个人博客、公司官网这类，其余三种都可以。
如果对已用SPA开发完成的项目进行SEO优化，而且支持node服务器，请使用Phantomjs。

【相关推荐：vuejs视频教程、web前端开发】

Atas ialah kandungan terperinci Bolehkah Vue halaman tunggal melakukan SEO?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!