<template>標記中的「損壞」鏈接

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

谷歌已經無法正常抓取的試驗場我設置了這一點。但是，當我要求GoogleBot呈現我的代碼版本時，它會在template元素內顯示鏈接，即*{{title}}*和呈現的模板鏈接，即*abc*。儘管Google說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-->