Can you dynamically add schema.org markup

A quick test to see if Google can pick up Schema.org markup that is added by Javacript.

This page used Javascript to add schema.org markup to the content. The test it to see if Google picks it up on several levels. Results in bold.

Updated 2020-02-24

The tested recipe was written in data-vocabulary.org which is being dropped. It's now in schema.org and is not complete so causes warnings.

  • URL works in Structured Data Testing Tool - No
  • Rendered HTML works in Structured Data Testing Tool - Yes
  • URL works in Rich Snippets Testing Tool - Yes
  • URL works in Google Search Consoles Inspection Tool - Yes
  • Google Search Consoles shows it in the Enhancements section - Yes

2015

  • Raw HTML validates in Rich Snippet Testing Tool - No
  • Rendered HTML validates in Rich Snippet Testing Tool - Yes
  • URL validates in Rich Snippet Testing Tool - No
  • Google Webmaster Tool Fetch as Google validates in Rich Snippet Testing Tool - No
  • Google Webmaster Tool Fetch & Render as Google validates in Rich Snippet Testing Tool - Not possible to get rendered code
  • Google Cache Raw HTML validates in Rich Snippet Testing Tool - Yes
  • Google Webmaster Tool Structured Data report shows markup - Yes
  • Actual Rich Snippets - Yes

Conclusions

Within a week I saw the markup in Google Webmaster Tool as well as the Recipe image showing up in the search results. Success :-)

Recipe Rich Snippet

So the answer is YES, Google will use you schema markup added via JavaScript. I also noticed:

2015

  • The Rich Snippet Testing Tool does not render and therefore cannot be used for testing
  • Google Cache showed up within a minute of submitting to the index...wow
  • Google site: search showed it just as fast...wow
  • Google real search showed it just as fast...wow wow wow
  • Fetch & Render does not let you see the rendered code
  • Google Cache does not show the rendered code, but the JavaScript works
  • Breadcrumb rich snippets showed up instantly

For me, this is great news as it will let me add markup to Content Management Systems that don't give me full control over the html they generate. It will also let me add markup using code based logic. People using Google Tag Manager could add markup without even having direct access to the pages content.

Note: I disabled the test to avoid this page being thought of as rich snippet manipulation. Even though the recipe was really my Mums. Later I re-enabled it and it did not earn the rich snippets, even though it is verified in the search console.

The Test

I've not tried a recipe before. Here is my Mums recipe for Chocolate Tiffin which she always used to make for me when I went home:

Chocolate Tiffin

Mums Chocolate Tiffin

By Irene McCreath

Mum new this was my weakness so she made it for me on every visit.

  • 1/2 lb of biscuits ('rich tea', 'digestive','wholemeal', any of these)
  • Min 100gr bar of cooking chocolate with at least 50% cocoa solids in it
  • 6oz butter
  • 2 tablespoons (biggest size) of syrup
  • 1 tablespoon of cocoa (avoid the 'drinking chocolate' variety)
  • A handful of raisins (any sort of dried fruit will do)

You'll need a swiss-roll tin which is a shallow tray about 12"x 9". Give it a light rub with oil or butter to prevent sticking.

Put the biscuits in a plastic bag and crush them fairly fine with a rolling pin or perhaps a bottle. (preferably Muscadet).

Melt the butter in a pan, add the syrup and cocoa, then the biscuits and fruit. Stir it up gently, pour it into the swiss-roll tin and press it down lightly or else it will be like a rock! Put it in the fridge to cool.

Meanwhile...

melt a bar of chocolate. To melt it you have to break it up in a basin and stand the basin in a pan of water over a moderate heat. Watch that the water doesn't go into the chocolate or it will spoil it.

Pour the chocolate over the crunchy mixture and spread it out with the back of a spoon or a spatula. Let it set! Cut it into squares, then eat it!