3

I’m using Web Components to build a site, and one of the biggest features is my use of the <template> element. Here’s an example:

<ul>
  <template>
    <li>
      <div class="c-ArticleTeaser" itemscope="" itemtype="http://schema.org/NewsArticle">
        <img class="c-ArticleTeaser__Img" src="{{ database__image }}" alt="" itemprop="image thumbnailUrl"/>
        <p class="c-ArticleTeaser__Hn">
          <a class="c-ArticleTeaser__Link" href="{{ database__url }}" itemprop="url mainEntityOfPage">
            <cite itemprop="headline">{{ database__title }}</cite>
          </a>
        </p>
        <p class="c-ArticleTeaser__Date">
          <time datetime="{{ database__datetime }}" itemprop="datePublished">{{ database__datetime_formatted }}</time>
        </p>
      </div>
    </li>
  </template>
</ul>

(A list containing a <template>, used for dynamically marking up article teaser items, each containing a headline, image, and timestamp.)

My front-end script clones the <template> content, fills in the missing data from a database, and then appends the newly-created <li> element to the end of the <ul>. The result is a <ul> with one <template> child followed by a bunch of <li> children.

When I run my markup through the Structured Data Testing Tool, it parses the “filled-in” articles correctly, but it also reads the dummy article in the <template> element. This throws a bunch of errors, such as:

Cannot understand the value {{ database__datetime }}

I can’t remove the template element from the DOM, in case it needs to be dynamically used again after page load.

Two questions:

  1. How do I get the tool (and Google) to ignore <template> elements?
  2. If I can’t, will these errors penalize my site?
  • 1
    You can't because itemprop="image thumbnailUrl" takes the value from SRC, in this case... {{ INVALID CODE }}, this is because your attempting to take values that do not YET... exist. You should opt to use Schema JSON which will give you more flexibility and will have the values when the DOM is ready, also you can use Google Tag manager to make things even easier with 'page' variables. – Simon Hayter Nov 20 '17 at 22:48
  • @SimonHayter could you rephrase? I don't quite understand. The testing tool does validate all of the appended items after the script runs, but in addition it also looks at the markup in <template>. So for example if the database has 3 articles, then the ul will contain 4 children: 1 template and 3 lis. All 4 children are parsed by the testing tool, but I only want it to parse the 3 li items. – chharvey Nov 21 '17 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.