2016-10-31 12 views
7

मैंने हाल ही में HTML के लिए <template> टैग का उपयोग शुरू कर दिया है जिसे मैं बाद में टेम्पलेट लाइब्रेरी का उपयोग करके संसाधित करता हूं, उदा।<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. क्या इसे जैसे कुछ में रखना बेहतर है (जैसा कि handlebars.js website पर देखा गया है)?

उत्तर

1

उत्पादन चर एचटीएमएल हम उम्मीद करते हैं, को शामिल करता है जैसे कि, प्रदान की गई टेम्पलेट; हालांकि, आपका कोड आउटपुट कहीं भी वैरिएबल की सामग्री नहीं लिखता है।

<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 को छोड़ने का एक संभावित तरीका यह इंगित करता है कि आपके पास टूटा हुआ लिंक है टैग <!--googleoff: anchor--> ...templates... <!--googleon: anchor--> के साथ टैग करना है। ये टैग googlebot को एंकर टैग को अनुक्रमणित करने से रोकते हैं।

उदाहरण:

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

धन्यवाद, मैं वास्तव में 'googleoff' टिप्पणियों के बारे में पता नहीं था! उस ने कहा, मुझे पता है कि मेरा उदाहरण वास्तव में कुछ भी प्रस्तुत नहीं कर रहा था (मैं बस यह दिखाने के लिए इसका उपयोग कर रहा था कि मैं '