Question

我有一个小网站，它使用Laravel和Vue.js来呈现列表。您可以查看here。看起来Google抓取工具无法关注v-for生成的链接。

Google Search Console说：Not found: vergleichen/%7B%7B%20anbieter.slug%20%7D%7D以及我知道的所有onpage抓取工具都无法抓取链接。

我做错了什么？有解决方法吗？任何帮助表示赞赏♥

更新

@Linus：你的假设是正确的，this是我的刀片文件的内容，JS看起来像这样：

var suche = new Vue({
   el: '#suchen',
   data: {
        search: ''
     }
});

所以我必须create a new component才能使其正常工作？

更新

我切换到Hideseek。问题＆＃34;解决了＃34;。

Answer 1

Google抓取工具在Vue可以替换{{anbieter.slug}}

之前解析您的HTMl

您可以将#app元素的内容提取到{<1}}元素中，Google 应忽略该元素，并将此元素设置为Vue的模板。

这个应该确保Vue首先解析模板，将其插入DOM，然后爬虫可以解析链接。

虽然未经测试。

示例：

<template>

HTML：

var App = new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
        test: 'Test'
    }
  }
})

要支持IE9，请使用<div id="app">  </div> <template id="main"> {{test}} </template>代替<script type="x-template">

小提琴：https://jsfiddle.net/Linusborg/an49og18/

Vue.js |抓取工具无法跟踪v-for生成的链接

1 个答案: