<template> 标签内的“损坏”链接

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 报告我的主页有一个损坏的链接）。

1. 这样使用<template>有效吗？

2. 将其放在<script type="text/template"> 之类的位置是否更好（如handlebars.js website 所示）？

Answer 1

output 变量确实包含我们期望的 HTML，即渲染的模板；但是，您的代码不会在任何地方写入 output 变量的内容。

这是一个工作示例：

<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*。尽管 Google 说您在 template 元素中有一个损坏的链接，但当用户查看它时您确实没有这样做。

让 Google 退出并表明您的链接已损坏的一种可能方法是用 <!--googleoff: anchor--> ...templates... <!--googleon: anchor--> 包围您的 template 标记。这些标签阻止 googlebot 索引其中包含的锚标签。

例子：

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