<template>标记内的"Broken"链接

Question

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

<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网站上看到的)更好吗？

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标签<!--googleoff: anchor--> ...templates... <!--googleon: anchor-->。这些标签阻止 googlebot 对其中包含的锚标签进行索引。

例子：

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