Kann Vue Single Page SEO durchführen?

vue einzelne Seite kann SEO betreiben. Methoden: 1. SSR-Server-Rendering, damit Suchmaschinen-Crawler die vollständig gerenderte Seite direkt anzeigen können, sodass der Inhalt schneller ankommt. 2. Statisch, sodass die Seite schneller geladen werden kann. 3. Pre-Render-Spa-Plugin. Verwenden Sie Phantomjs, um Crawler zu verarbeiten.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Wie wir alle wissen, ist die Single-Page-Anwendung von Vue nicht SEO-freundlich. Nachfolgend sind mehrere kürzlich erforschte und verwendete SEO-Lösungen aufgeführt, die auf Nuxt.js basieren.

• 1. SSR-Server-Rendering;
• 3.
• 1.SSR-Server-Rendering
• Über Server-Rendering: Laut der offiziellen Vue-Website gibt es Anforderungen für die Vue-Version und bestimmte Anforderungen für den Server, und er muss die NodeJS-Umgebung unterstützen.

Die Nachteile der Verwendung von SSR:

Browserspezifischer Code kann nur in bestimmten Lebenszyklus-Hook-Funktionen verwendet werden. Für die Ausführung in Server-Rendering-Anwendungen ist möglicherweise eine spezielle Verarbeitung erforderlich.

Umgebungs- und Bereitstellungsanforderungen sind höher und eine Node.js-Server-Laufumgebung ist erforderlich.

• Bei hohem Datenverkehr bereiten Sie bitte die entsprechende Serverlast vor und übernehmen Sie Caching-Strategien mit Bedacht.
• Vorteile:

Bessere SEO, da Suchmaschinen-Crawler die vollständig gerenderte Seite direkt anzeigen können;

Schnellere Zeit bis zum Inhalt, insbesondere bei langsamen Netzwerkbedingungen oder langsamen Geräten.

• Mängel: (Während der Entwicklung aufgetretene Fehler)

1. Ein Satz Code und zwei Sätze Ausführungsumgebungen verursachen beispielsweise keine Fenster- oder Dokumentobjekte. Die Lösung besteht darin, das Urteilsvermögen zu erhöhen . Wenn es sich um eine Kunden-Duancai-Ausführung handelt:

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

bezieht sich auf NPM-Pakete mit Dom-Operationen, wie zum Beispiel: wowjs, kann import nicht verwenden, verwenden Sie:

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

2. Nuxt asyncData-Methode, Daten vor der Initialisierung der Seite abrufen, aber nur für

Seitenkomponenten

Aufruf: wowjs，不能用import的方式，改用：

// 并发加载多个接口：
  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,
     }
  }

2.Nuxt asyncData方法，初始化页面前先得到数据，但仅限于页面组件调用：

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
}

在asyncData中获取参数：

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

3.如果你使用v-if语法，部署到线上大概也会遇到这个错误：

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

根据github nuxt上的issue第1552条提示，要将v-if改为v-show语法。

4.坑太多，留坑，晚点更。

2.静态化

静态化是Nuxt.js打包的另一种方式，算是 Nuxt.js 的一个创新点，页面加载速度很快。
在 Nuxt.js 执行 generate 静态化打包时，动态路由会被忽略。

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

需要动态路由先生成静态页面，你需要指定动态路由参数的值，并配置到 routes 数组中去。

// 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
          }
        })
      })
    }
  }
}

运行打包，即可看见打包出来的页面。
但是如果路由动态参数的值是动态的而不是固定的，应该怎么做呢？

• 使用一个返回 Promise 对象类型 的 函数；
• 使用一个回调是 callback(err, params) 的 函数。

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

现在我们可以从/users/_id.vue访问的payload，如下所示：

$ cnpm install prerender-spa-plugin --save

如果你的动态路由的参数很多，例如商品详情，可能高达几千几万个。需要一个接口返回所有id，然后打包时遍历id，打包到本地，如果某个商品修改了或者下架了，又要重新打包，数量多的情况下打包也是非常慢的，非常不现实。
优势：

• 纯静态文件，访问速度超快；
• 对比SSR，不涉及到服务器负载方面问题；
• 静态网页不宜遭到黑客攻击，安全性更高。

不足：

• 如果动态路由参数多的话不适用。

3.预渲染prerender-spa-plugin

如果你只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 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'
                    })
                }),
            ],
        };
    }
}

vue cli 3 vue.config.js配置：

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

在main.js中添加：

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

注意：router中必须设置 mode: “history”。

打包出来可以看见文件，打包出文件夹/index.html，例如：about => about/index.html

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;
      }
    }
}

Parameter in asyncData abrufen:

rrreee3. Wenn Sie die v-if-Syntax verwenden, stellen Sie sie bereit Dieser Fehler kann auch online auftreten: rrreee

Gemäß 2. Statisch

Statisch ist eine weitere Art, Nuxt.js zu packen. Es handelt sich um eine Innovation von Nuxt.js und die Seite wird sehr schnell geladen. Wenn Nuxt.js statisches Paket generieren ausführt, wird dynamisches Routing ignoriert. rrreee

Wenn Sie zunächst dynamisches Routing benötigen, um eine statische Seite zu generieren, müssen Sie den Wert des dynamischen Routing-Parameters angeben und ihn im Routen-Array konfigurieren. 🎜rrreee🎜Führen Sie das Paket aus und Sie können die gepackte Seite sehen. 🎜Aber was ist zu tun, wenn der Wert des Routendynamikparameters dynamisch statt fest ist? 🎜🎜🎜Verwenden Sie eine Funktion, die einen Promise-Objekttyp zurückgibt. 🎜🎜Verwenden Sie eine Funktion, deren Rückruf callback(err, params) ist. 🎜🎜rrreee🎜Jetzt können wir über /users/_id.vue auf die Payload zugreifen, wie unten gezeigt: 🎜rrreee🎜Wenn Ihre dynamische Route viele Parameter hat, wie z. B. Produkte Die Angaben können in die Zehntausende gehen. Es wird eine Schnittstelle benötigt, um alle IDs zurückzugeben, und dann werden die IDs beim Verpacken durchlaufen und lokal verpackt. Wenn ein Produkt geändert oder aus den Regalen genommen wird, muss es auch bei großen Mengen neu verpackt werden. 🎜🎜Vorteile: 🎜🎜🎜🎜Rein statische Dateien, die Zugriffsgeschwindigkeit ist superschnell; 🎜🎜Im Vergleich zu SSR gibt es keine Probleme mit der Serverlast; 🎜🎜Statische Webseiten sind nicht für Hackerangriffe geeignet und sicherer. 🎜🎜🎜🎜Nachteile: 🎜🎜🎜🎜Nicht anwendbar, wenn viele dynamische Routing-Parameter vorhanden sind. 🎜🎜

3. Prerender-spa-plugin🎜🎜Wenn Sie es nur zur Verbesserung der SEO einiger Marketingseiten verwenden (z. B. /, /about, /contact usw.) , dann benötigen Sie möglicherweise Vorgerendert. Anstatt einen Webserver zu verwenden, um HTML dynamisch in Echtzeit zu kompilieren, werden beim Pre-Rendering einfach statische HTML-Dateien für bestimmte Routen zur Erstellungszeit generiert. Der Vorteil besteht darin, dass die Einrichtung des Prerenderings einfacher ist und Sie Ihr Frontend als vollständig statische Site behandeln können. 🎜rrreee🎜vue cli 3 vue.config.js Konfiguration: 🎜rrreee🎜In main.js hinzufügen: 🎜rrreee🎜Hinweis: mode: „history“</code muss im festgelegt werden Router >. 🎜🎜Sie können die Datei nach dem Packen sehen und in den Ordner <code>/index.html packen, zum Beispiel: about => html, Es enthält HTML-Inhalt. 🎜🎜🎜Vorteile: 🎜🎜🎜🎜Die Änderungen sind gering, einfach ein Plug-in einführen und fertig; 🎜🎜🎜🎜Nachteile: 🎜🎜

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

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前端开发】

Das obige ist der detaillierte Inhalt vonKann Vue Single Page SEO durchführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!