<template>标签内的“Broken”链接

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

1. 使用<template>这种方式有效吗？

2. 是否最好将其放在类似于<script type="text/template">的东西中（如handlebars.js网站所示）？

- fstanis

Answer 1

输出变量确实包含我们期望的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-->

- Tim

---

谢谢，我实际上不知道googleoff注释！话虽如此，我知道我的示例实际上没有渲染任何内容（我只是用它来展示我如何使用<template>标签）；我的原始问题（仍然活跃）实际上是关于这种使用<template>是否在语义上（以及其他方面）有效，或者应该避免？ - fstanis