Does Schema.org markup work if markup is dynamically built with JavaScript?

Question

I have a page where some events are dynamically loaded by reading some JSON with JavaScript. I build a div for every event with the Event Schema.org markup.

Google's testing tool doesn't read this markup. Is it because of an error in the markup, or is it because of the dynamic loading?

The HTML code of one Event is:

<div class="evento well" itemscope itemtype="http://schema.org/Event">
   <meta itemprop="startDate" content="2015-03-20T20:00:00.000Z">
   <meta itemprop="endDate" content="2015-01-21T20:00:00.000Z">
   <div class="dataEvento">
      <div class="dayWeekEvento">venerdì</div>
      <div class="dayNumEvento">20</div>
      <div class="monthEvento">Marzo</div>
   </div>
   <div class="datiEvento">
      <div class="oraEvento">ore 21:00</div>
      <div class="titoloEvento"><span itemprop="name">Titolo evento</span></div>
      <div class="luogoEvento" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"><a href="https://www.google.it/maps/place/Milano" target="_blank"><span class=" glyphicon glyphicon-map-marker" aria-hidden="true"></span> <span itemprop="addressLocality">Milano</span></a></div>
   </div>
</div>

you need to add the actual code you used, otherwise we cant look to see if its an error in our code — Jonathan
– Jonathan, Commented Mar 15, 2015 at 18:41
The short answer is no: Google will mostly only crawl the static markup of your page. That mens that you will have to provide the microtags in the markup that is eother static or rendered server side. If you make usage of a heavy javaScript Framework like Backbone, Angular, Ember and so on, you have the ability to let all of your pages be rendered by a service and be saved under the same URL, but with a #! (hashbang). Google, Bing and Yahoo (and some other) will try and index the hashbang URLS instead of the original ones then. — Rias
– Rias, Commented Mar 15, 2015 at 19:59

unor · Accepted Answer · 2015-03-15 22:08:33Z

25

Google’s documentation only mentions that they can consume dynamically added structured data if the syntax JSON-LD is used:

Also, Google can read JSON-LD data even when it is dynamically injected into the page's contents, such as by Javascript code or embedded "widgets".

This does not necessarily mean that they can’t read it in case of other syntaxes (like Microdata or RDFa), but at least they don’t document it.

That their testing tool doesn’t read it may or may not mean something (it could be that the tool doesn’t handle this but their internal system does). However, there should be no issue with your actual markup, as you can easily test it yourself by pasting your markup instead of entering your URL.

answered Mar 15, 2015 at 22:08

unor

97.7k29 gold badges234 silver badges391 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Karim Samir Over a year ago

are you sure about there internal system does?, I can't find it in there documentation

unor Over a year ago

@KarimSamir: What do you mean exactly? Sure that which system does what?

Tony McCreath Over a year ago

Google does also pick up dynamically added or altered microdata. Their SD Testing Tool can deal with some JavaScript, but is far from 100% on it. You can paste in pre-rendered html to test things. The Google Search Console Structured Data report provides more accurate data on how Google read your markup, but you do have to wait until the page is crawled and processed.

Daniel Amerbauer Over a year ago

Just recently Google added in their documentation that generating JSON-LD with Javascript is allowed and interpreted: developers.google.com/search/docs/guides/…

Rich S · Accepted Answer · 2018-08-02 15:45:39Z

3

If you're having trouble validating schema markup with the Google testing tool, you can create the json-ld snippet with JS, which also allows you to manipulate the data if needed like:

<script> 
    (function(){
       var data = {
            "@context": "http://www.schema.org",
            ...
        }
        var script = document.createElement('script');
        script.type = "application/ld+json";
        script.innerHTML = JSON.stringify(data);
        document.getElementsByTagName('head')[0].appendChild(script); 
    })(document);
</script>

answered Aug 2, 2018 at 15:45

Rich S

1204 bronze badges

Comments

David Garcia · Accepted Answer · 2016-04-27 19:18:01Z

0

It depends on what type of markup it is. From Google:

JSON-LD is supported for all Knowledge Graph features, sitelink search boxes, Event Rich Snippets, and Recipe Rich Snippets; Google recommends the use of JSON-LD for those features. For the remaining Rich Snippets types and breadcrumbs, Google recommends the use of microdata or RDFa.

It should work but I know people have reported problems with the testing tool.

answered Apr 27, 2016 at 19:18

David Garcia

1012 bronze badges

Collectives™ on Stack Overflow

Does Schema.org markup work if markup is dynamically built with JavaScript?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related