Comment vue.js fait le référencement

Comment vue.js réalise le référencement : 1. Utilisez le rendu du serveur SSR ; 2. Lorsque [Nuxt.js] exécute la génération d'un packaging statique, un routage dynamique est d'abord requis pour générer des pages statiques ; -spa-plugin] ; 4. Utilisez Phantomjs pour traiter les robots.

[Articles connexes recommandés : vue.js]

Comment vue.js réalise le référencement :

1. Rendu du serveur SSR

À propos du rendu du serveur. : Selon le site officiel de Vue, il existe des exigences pour la version Vue et certaines exigences pour le serveur. Il doit prendre en charge l'environnement nodejs.

Les compromis de l'utilisation de SSR :

• Limité par les conditions de développement, le code spécifique au navigateur ne peut être utilisé que dans certaines fonctions de hook du cycle de vie ; bibliothèques externes) peuvent nécessiter un traitement spécial pour s'exécuter dans les applications de rendu du serveur

• Les exigences en matière d'environnement et de déploiement sont plus élevées et un environnement d'exécution de serveur Node.js est requis

• En cas de trafic élevé, veuillez préparer la charge du serveur correspondante et adopter judicieusement la stratégie de mise en cache.

Avantages :

• Meilleur référencement, puisque les robots des moteurs de recherche peuvent visualiser directement la page entièrement rendue

• Délai d'accès au contenu plus rapide, en particulier pour les conditions de réseau lentes ou les appareils lents.

Inconvénients : (fosses rencontrées lors du développement)

1. Un ensemble de code et deux ensembles d'environnements d'exécution entraîneront divers problèmes, comme l'absence de fenêtre sur le serveur. Côté, L'objet document est traité en ajoutant un jugement. S'il est exécuté par le client :

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

fait référence au package npm avec l'opération dom, tel que : wowjs Vous ne pouvez pas utiliser la méthode d'importation. 🎜>

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

à la place.

2.Méthode Nuxt asyncData, récupère les données avant d'initialiser la page, mais uniquement pour les appels de composants de page :

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

Obtenir les paramètres dans asyncData :

1. paramètres de routage, tels que :

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

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

2 Obtenir l'URL ?

Recevoir :

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

3. Si vous utilisez la syntaxe v-if, vous pouvez également rencontrer cette erreur lors du déploiement en ligne : /list?id=123

Erreur lors de l'initialisation de l'application DOMException : échec de l'exécution. 'appendChild' sur 'Node' : ce type de nœud ne prend pas en charge cette méthode.

chez Object.We [as appendChild]

Selon le numéro 1552 sur github nuxt, v-if doit être modifié pour la syntaxe v-show.

4. Il y a trop de pièges, laissez-les de côté et mettez-les à jour plus tard.

2. Statique

Lorsque Nuxt.js exécute la génération d'un packaging statique, le routage dynamique sera ignoré.

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

Si vous avez d'abord besoin d'un routage dynamique pour générer une page statique, vous devez spécifier la valeur du paramètre de routage dynamique et le configurer dans le tableau routes.

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

Exécutez le package et vous verrez la page empaquetée.

Mais que faut-il faire si la valeur du paramètre dynamique de l'itinéraire est dynamique au lieu d'être fixe ?

Utilisez une fonction qui renvoie un type d'objet Promise ;

Utilisez une fonction dont le rappel est callback(err, params).

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

Nous pouvons désormais accéder à la charge utile depuis /users/_id.vue, comme indiqué ci-dessous :

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

Si votre itinéraire dynamique comporte de nombreux paramètres, tels que les détails du produit, il peut être aussi élevé comme plusieurs milliers. Une interface est nécessaire pour renvoyer tous les identifiants, puis les identifiants sont parcourus lors de l'emballage et emballés localement. Si un produit est modifié ou retiré des rayons, il doit être reconditionné. L'emballage est également très lent et irréaliste lorsque la quantité est importante.

Avantages :

Fichiers statiques purs, la vitesse d'accès est super rapide

• Par rapport au SSR, cela n'implique pas ; charge du serveur Question ;

• Les pages Web statiques ne conviennent pas aux attaques de pirates et sont plus sécurisées.

• Lacunes :
  Non applicable s'il existe de nombreux paramètres de routage dynamique.

3. Prerender-spa-plugin

Si vous l'utilisez uniquement pour améliorer le référencement de quelques pages marketing (telles que /, /about, /contact, etc.), vous devrez peut-être effectuer un pré-rendu. Au lieu d'utiliser un serveur Web pour compiler dynamiquement du HTML en temps réel, le pré-rendu génère simplement des fichiers HTML statiques pour des itinéraires spécifiques au moment de la construction. L’avantage est que la mise en place du prérendu est plus simple et vous permet de traiter votre frontend comme un site complètement statique.

$ cnpm install prerender-spa-plugin --save

vue cli 3 vue.config.js configuration :

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

Ajouter dans main.js :

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

Remarque : mode : "history" doit être défini dans le routeur .

Vous pouvez voir le fichier après l'avoir empaqueté et le placer dans le dossier /index.html, par exemple : about => about/index.html, qui contient du contenu html.

Avantages :

Petits changements, il suffit d'introduire un plug-in

• Inconvénients :

Le routage dynamique ne peut pas être utilisé

• ne convient qu'aux projets comportant un petit nombre de pages. Lorsqu'il y a des centaines de pages, le packaging sera très lent ; 🎜>

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（视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!