Matthew James Taylor
Matthew James Taylor

Reputation: 4866

Does Google crawl content inside HTML5 template tags?

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

Upvotes: 13

Views: 3472

Answers (3)

MikeeeG
MikeeeG

Reputation: 341

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

Upvotes: 0

Cedric Anamorphik
Cedric Anamorphik

Reputation: 71

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.

Upvotes: 6

james2doyle
james2doyle

Reputation: 1439

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.

google structured data template tag test

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.

Upvotes: 5

Related Questions