Wie vue.js SEO macht

So erreicht vue.js SEO: 1. Verwenden Sie das SSR-Server-Rendering. 2. Wenn [Nuxt.js] eine statische Verpackung generiert, ist zuerst ein dynamisches Routing erforderlich ]; 4. Verwenden Sie Phantomjs, um Crawler zu verarbeiten.

【Empfohlene verwandte Artikel: vue.js】

vue.js So erreichen Sie SEO:

1. SSR-Server-Rendering

Über den Server Rendering: Laut der offiziellen Vue-Website gibt es Anforderungen für die Vue-Version und bestimmte Anforderungen für den Server. Er muss die NodeJS-Umgebung unterstützen.

Kompromisse bei der Verwendung von SSR:

• Browserspezifischer Code kann nur in bestimmten Lebenszyklus-Hook-Funktionen verwendet werden; einige externe Bibliotheken erfordern möglicherweise eine spezielle Verarbeitung, um in einer Server-Rendering-Anwendung ausgeführt zu werden

• Umgebungs- und Bereitstellungsanforderungen sind höher und erfordern eine Node.js-Server-Laufumgebung.

• Bei hohem Datenverkehr bereiten Sie bitte die entsprechende Serverlast vor und verwenden Sie eine Caching-Strategie.

Vorteile:

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

• Schnellere Zeit bis zum Inhalt, insbesondere bei langsamen Netzwerksituationen oder trägen 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 Duancai-Ausführung eines Kunden handelt:

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

Quote npm-Paket, mit Dom-Operation, zum Beispiel: wowjs, können Sie die Importmethode nicht verwenden, verwenden Sie:

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

2.Nuxt asyncData-Methode, rufen Sie die Daten ab, bevor Sie die Seite initialisieren , aber nur für den Seitenkomponentenaufruf:

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

Parameter in asyncData abrufen:

1. Dynamische Routing-Parameter abrufen, wie zum Beispiel:

/list/:id' ==> /code><code>/list/:id&#39; ==> &#39;/list/123

接收：

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

2.获取url?获取参数，如：

/list?id=123

Receive:

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

2. URL abrufen? Wenn Syntax, online bereitstellen Wahrscheinlich wird auch dieser Fehler auftreten:

Fehler beim Initialisieren der App DOMException: Fehler beim Ausführen von „appendChild“ auf „Knoten“: Dieser Knotentyp unterstützt diese Methode nicht.

bei Object.We [as appendChild]

Laut Github-Ausgabe Nr. 1552 auf Nuxt wird vorgeschlagen, die Syntax von v-if in v-show zu ändern.

4. Es gibt zu viele Fallstricke, also lassen Sie sie hinter sich und aktualisieren Sie sie später.

2. Statisch

Wenn Nuxt.js statisches Paket generieren ausführt, wird dynamisches Routing ignoriert.

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

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.

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

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.

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

Jetzt können wir über /users/_id.vue auf die Nutzlast zugreifen, wie unten gezeigt:

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

Wenn Ihre dynamische Route viele Parameter hat, wie z. B. Produktdetails, können es Zehntausende sein. 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 sicher.

Nachteile:

Nicht anwendbar, wenn viele dynamische Routing-Parameter vorhanden sind.

3. Prerender-spa-plugin

Wenn Sie es nur zur Verbesserung der SEO einiger Marketingseiten (z. B. /, /about, /contact usw.) verwenden, müssen Sie möglicherweise vorab rendern . 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.

$ cnpm install prerender-spa-plugin --save

vue cli 3 vue.config.js Konfiguration:

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'
     })
    }),
   ],
  };
 }
}

In main.js hinzufügen:

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

Hinweis: Modus: „Verlauf“ muss im Router eingestellt sein.

Sie können die Datei nach dem Packen sehen und in den Ordner /index.html packen, zum Beispiel: about => about/index.html, der HTML-Inhalt enthält.

Vorteile:

• Die Änderungen sind gering, führen Sie einfach ein Plug-in ein;

Nachteile:

• Kann kein dynamisches Routing verwenden;

• Nur für Projekte mit einer geringen Anzahl von Seiten geeignet. mit bis zu Hunderten von Seiten In diesem Fall wird die Verpackung sehr langsam sein;

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 。

很少写文章，这是我这个月对Vue SEO方案的探索，写的不对的地方请指出，谢谢理解~

相关免费学习推荐：javascript（视频）

Das obige ist der detaillierte Inhalt vonWie vue.js SEO macht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!