"Broken" links inside a <template> tag

Question

I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.

<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>

However, I've come to realise this means I have a broken link (example.com/pages/{{link}}) in my HTML. This is a concern, as various crawlers might consider it invalid (in fact, the Google Search Console reports my homepage as having a broken link).

1. Is it valid to use <template> this way?

2. Is it better to put it in something like <script type="text/template"> instead (as seen on the handlebars.js website)?

Answer 1

The output variable does contain the HTML we would expect, i.e., the rendered template; however, your code does not write the contents of the output variable anywhere.

Here is a working example:

<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 has not properly crawled the test site I setup for this. However, when I asked GoogleBot to render my version of your code it displayed the link inside the template element, i.e., *{{title}}* and the rendered template link, i.e., *abc*. Even though Google says you have a broken link in the template element, you really don't when a user views it.

One possible way to get Google to quit indicating that you have a broken link is to surround your template tags with <!--googleoff: anchor--> ...templates... <!--googleon: anchor-->. These tags stop googlebot from indexing anchor tags contained within.

Example:

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