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:
- How do I get the tool (and Google) to ignore
<template>
elements? - If I can’t, will these errors penalize my site?
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.<template>
. So for example if the database has 3 articles, then theul
will contain 4 children: 1template
and 3li
s. All 4 children are parsed by the testing tool, but I only want it to parse the 3li
items.