Question

我最近开始使用HTML的<template>标记，然后使用模板库处理，例如

<template id="tmpl">
  <div class="something">
    <a href="/pages/{{link}}">{{title}}</a>
  </div>
</template>
...
<script>
var output = Mustache.render($('#tmpl').html(), {
  link: 'abc',
  title: 'abc'
});
</script>

但是，我已经意识到这意味着我的HTML中有一个断开的链接（ example.com/pages / {{link}} ）。这是一个问题，因为各种抓取工具可能会认为它无效（实际上，Google Search Console会将我的主页报告为链接断开）。

以这种方式使用<template>是否有效？
最好是把它放在像<script type="text/template">这样的东西上（如handlebars.js website所示）？

Answer 1

输出变量确实包含我们期望的HTML，即呈现的模板;但是，您的代码不会在任何地方写入输出变量的内容。

这是一个有效的例子：

<template id="tmpl">
  <div class="something">
    <a href="/pages/{{link}}">{{title}}</a>
  </div>
</template>

<span id="output"></span>

<script>
var output = Mustache.render($('#tmpl').html(), {
  link: 'abc',
  title: 'abc'
});
$('#output').html(output);
</script>

Google未正确抓取我为此设置的测试网站。但是，当我要求GoogleBot呈现我的代码版本时，它会显示template元素内的链接，即*{{title}}*和呈现的模板链接，即*abc*。尽管谷歌表示你在template元素中有一个断开的链接，但是当用户查看它时你真的不知道。

让Google退出以表明您的链接断开的一种可能方法是使用template将 ...templates... 标记包围起来。这些标记会阻止googlebot索引包含在其中的锚标记。

示例：

<!--googleoff: anchor-->
<template id="tmpl">
    <div class="something">
        <a href="/pages/{{link}}">{{title}}</a>
    </div>
</template>
<!--googleon: anchor-->

＆＃34;破碎＆＃34; <template>标记内的链接

1 个答案: