Does Google crawl content inside HTML5 template tags?

Question

HTML5 template tags are meant to be completely inert as if the content doesn't exist in the source but is that the case when Google crawls and then indexes a webpage?

Does anyone have any data that can prove one way or another that Google indexes or doesn't index content within template tags? Template tags are great but I don't want to use them if they adversely affect SEO

Psychopath

Interested in this as well especially since angular 2.0+ uses <template> for the asterisk expansion syntax (*ngIf, *ngSwitch, *ngFor). Would be cool if you got some SEO benefits from it. – Townscape

Answer 1

I experienced something today that would confirm it does affect SEO.

I just received a warning from the Google Search Console about increasing 404 errors, and almost all URL in error are in that form: /some-path/some-page/$%7Bconsent.infoURL%7D.

Once URL decoded, we can see that ${consent.infoURL} is a variable I use in a template tag, on a href attribute:

<template data-template="cookie-notice">
    `<div data-cookie-notice class="cookie-notice" role="dialog">
    <span class="cookie-notice-caption">${consent.captionText}</span>
    <a class="cookie-notice-link" href="${consent.infoURL}">${consent.linkText}</a>
    <button data-button-consent type="button" class="cookie-notice-button">${consent.buttonText}</a>
    </div>`
</template>

So Google Bot indeed follows links in template tags.

Fabrienne

I have seen Google crawl URLs from data-attributes and JSON - I will now add html5 templates to the list. I believe Google crawls ANY url it can find, but this may not relate to SEO. What I really want to know is: Do the keywords inside html5 template tags get indexed the same as the main page content? – Psychopath

Answer 2

I was curious about this as well, as I was thinking about using the <template> tag as a form of server-side rendering or pre-rending some content that would be updated via AJAX/JS once the page is ready.

I checked the Google Webmaster Tools Structured Data Tester to see if it would read microdata out of HTML tags that were placed inside the <template> tag.

As you can see from the screenshot, it does seem to read the data that is inside the <template> tag. I wouldn't consider this a verified answer, but it does suggest that the parser (at least when it comes to HTML microdata) doesn't ignore content inside <template> tags.

Perspiratory

This seems to suggest Google does read content in html5 template tags, however it is not 100% proof. Perhaps I need to setup an experiment by adding a unique, made-up keyword in an html5 template tag and then see if the page ranks for that keyword. If it does, then that would be a 100% yes. – Psychopath

@MatthewJamesTaylor I wonder if you ever got to finding a definitive answer on this – Mackinaw

@Mackinaw I never did find out. It would actually be pretty simple to create a test: Just include a completely unique word within a template tag and after Google's indexed the page search for it to see if the page comes up. – Psychopath

Answer 3

I know this is an old post but I was looking into the same thing and found that instead of the <template> tag you can use a <script> tag with the type of text/template...

<script id="example" type="text/template">
    <div data-cookie-notice class="cookie-notice" role="dialog">
      <span class="cookie-notice-caption">${consent.captionText}</span>
      <a class="cookie-notice-link" href="${consent.infoURL}">${consent.linkText}</a>
      <button data-button-consent type="button" class="cookie-notice-button">${consent.buttonText}</a>
    </div>
</script>

And this is not readable by Google as far as I am aware

Pinworm