Enrich Search Results with JSON-LD Markup through Google Tag Manager

By | August 27, 2019


– [Voiceover] In this
video I’m going to show you how you can enrich your
Google.com search results by injecting JSON-LD
markup onto your pages. We do all this with the
help of Google Tag Manager. All the more coming up, so let’s dive in. (upbeat music) Hi there and welcome to another video of measureschool.com. Where we teach you the data driven way of digital marketing. My name is Julian and today we want to talk about Jason LD. And today we want to tackle the question, how we can communicate to the Google bot that there’s meta information
available on our page that can be used for enhancing
our search engine results within Google.com. And you might have seen
these rich snippets in other forms before, so Google has been implementing new forms of search engine results
over the past few years. And they come in many different forms, but how do we actually tell the Google bot that there is this information available, and then hopefully this information will be incorporated into our results. Well if you have dabble in SCO, then your job is to enhance the results and the markup of the page. So you have probably
built in commended tags into your HTML directly. In order to communicate this
information to the Google bot. But a little while ago, Google actually announced that
they would start accepting a new kind of data that
doesn’t have to necessarily be implementing in the HTML, but can be deployed through JavaScript. And this new format is called JSON-LD. And if you want to find
out more about JSON-LD there’s a great video which
I’m going to link up below. The official documentation
about these micro formats can be found at schema.org
and Google also has a resource section about this new markup. The key here being that JSON-LD can be deployed via JavaScript and therefore Google
Tag Manager can be used to deploy and communicate this information to Google bot. Additionally to these resources, Google has brought out a new testing tool which is the structured data testing Tool. Where you can implement
any kind of website, and see how it is marked up and what kind of micro
data is available here and if it is correct. So let’s see how we could implement such additional information
like the rating here into our page through Google Tag Manager. So it will hopefully be
picked up by the Google bot and incorporate it into our results. There’s never a guarantee
for this happening, but we can make this data available and hope for the best. So let’s see how we can do this. First of all, we would
need to have a template of the right markup. Google gives us structured
data tabs that are available, so they are not only for reviews but also for special data tabs for articles, music,
receipts, videos, and more. We are actually not in
the Creative Works here, we’re under the eCommerce section, because this is an eCommerce site. Let’s go here to Products, and look at the results
that we want to markup. We have here an example for JSON-LD. This will open up our structure data testing tool. And we can see which information ideally would be implemented in
such a JSON-LD object. So we have here the
product name, the image, the description, the brand, and here the important part
of our aggregate rating rating value, rating
count, and if you want we can also incorporate offers. Now on our demo shop here we don’t have an offer at the moment, and we don’t have all the
information available, so let’s cut this down a little bit. And you can do this really
easily in this editor. And every time we make a
change we can validate it and see if there are
any errors or warnings where we removed any kind of information that we shouldn’t have removed
for it to work correctly. I’ll also take out this brand information and product ID. Description, the image, all
we really need is the name and the aggregated rating. Let’s try to check that again. So we have a product name and the rating. So that should do it. Let’s copy this and put it into our Google
Tag Manager account. Click on new tag. This will be a customer HTML tag. And we simply input our text here. Let’s mark this up correctly. This is a JSON-LD markup
tag for the product pages. We continue here. And we build a trigger, which only files on product pages. Which we can define by the URL so if there’s product in the title this should work. And we create out tag. Go into the preview and debug mode. And go back to our page
and reload this as well. And our JSON-LD for product
pages was deployed correctly. Now unfortunately we
won’t be able to test this with our structured data testing tool because this only works for open websites and right now this website is still in preview and debug mode so the tag actually
hasn’t been deployed yet. We can change this by
publishing a version. Now let’s try this in our testing tool. Now fortunately we can see here that there is already
some markup in the page. Our shop system will
comerse this pretty well. The information we have inputted here is in the second tab and
we see the name has been transferred, the type,
and our rating value and review count. Now obviously this
wouldn’t make much sense to deploy on every product page, because every product page is different. We have a different name. We have different reviews, and we have different kind of ratings. But with Google Tag Manager we can actually deploy this dynamically with the help of variables. So how would we do this? Let’s go back in our JSON-LD object here and look at these things that we want to replace dynamically. First of all we would have here the name that should be changed dynamically based on the name in our eCommerce store. And we have covered a lot of ways on how to do this is previous videos. The safest way and the intended way of Google Tag Manager and doing this is the actual data layer. So I’ve implemented a data layer here. We can look into the data
layer in our messages and see what data we have available already in the data layer and use that for our tags. So for example here, in this data layer you already
have the name available and other information about this product. Now all we need to do is
build a data layer variable and pull out the name of this product. I already went ahead and did this. So on the variables I’ve built a data layer variable
for the product name. We dig into the eCommerce object, detailed product name, the first name that comes up. Then pull it into this variable. Now on other products that have reviews I have installed additional information and pushed this through the data layer, such as the review information. So we can again check
what is the data layer for this product and we see there’s an event called product view and the score and the reviews
are submitted as well. So that’s the information that I put into additional variables to pull out from the data layer. Now we can use these data layer variables, number of previews,
product name, review score to dynamically replace these values in our JSON-LD tag. So let’s try this out. Let’s go over to tags. And instead of the product name, we’ll implement our variable and we can do this with curly brackets and putting in the variable name. Same would be the case
with our rating value here, and our review count. Notice that these should model whatever you have named your variables in Google Tag Manager. So that should do it, we can now go ahead and save this tag. Let’s refresh here and refresh our page. We now see our JSON-LD being
deployed on this website. Once we click into it we can see how our custom HTML tag got filled. We have now that name Happy Ninja. We have the rating value and the number of ratings right here. So this is now dynamic so if you got to another
website or another product, Let’s choose this one. We see our JSON-LD product and we see it was filled out with different information here. This is now dynamically
filled through the data layer and our data layer variables. So again we could go
ahead and publish this, and test it our with our
structured data testing tool right here. Run a test. And we see we have a new product here which now has a different name and our rating value and
review count was ported over. So this was a quick example on how you can implement metadata to your pages with the help of Google Tag Manager. There is obviously much more to it than just our short example here. There are many more JSON-LD
examples for reviews, for receipts, for music, for articles to markup your pages if that
is applicable to your case. Now if you’re interested in
building this into your website with the help of Google Tag Manager we have a little template for you, which you can use on the
measureschool.com/jsonld. Where you find a container
that you can upload to your Google Tag Manager account. Which will give you all
the different templates that you might want to use
for deployment of JSON-LD on your website. So check it out at
measureschool.com/jsonld. (upbeat music) And that’s already it
with this weeks video of measureschool.com. If you like this video, please subscribe to this channel and don’t forget that you
can get our JSON-LD templates at measureschool.com/jsonld. My name is Julian, til next time. (upbeat music)

66 thoughts on “Enrich Search Results with JSON-LD Markup through Google Tag Manager

  1. vila vg Post author

    Aren't the products in search results US-only?

    Reply
  2. chris sowerby Post author

    how did the rating get into the data layer?

    Reply
  3. Alexandra Stratan Post author

    I am not sure if anyone knows what you are doing dear, might as well start from scratch and actually make a video that is put to use or delete this confusing mangle

    Reply
  4. Tharaneetharan Pushparaja Post author

    Can GTM be used to insert meta tags such as description, keywords, og, for each page that is used for SEO, if so will it be a good practice

    Reply
  5. Artumès & Co Post author

    At 7'20 you say that you already talked about data layer and creating variables in a previous video. This part is really missing. Which video is it? Can you please give us the link ? Thanks for your precious help

    Reply
  6. Besfort Rexhahmetaj Post author

    Great video, thanks. What I do not understand is how to provide ratings to my dlv's?

    Reply
  7. Viktar Kern Post author

    Hey Bro, great job, i was wondering how to push data to the dataLayer. Im using plugin to place my GTM into wordpress and this plugin has an option to push some data to the dataLayer but very limited. The question is should i remove that plugin and implement GTM manually and put dataLayer.push script into the header manually or keep the plugin and use Custom HTML Tag within GTM to append data to the existing dataLayer?

    Reply
  8. K Md Post author

    thank you , sir am using blogger platform, my blog is education and job niche,. I want use job posting schema markup json with help of gtm, is it possible, if yes than plz help me

    Reply
  9. Alex Galea Post author

    Another great video. Very clear and concise as usual.

    Reply
  10. thasha1 Post author

    what if product don't have rating? Getting an error field rating value may not be empty. one of ratingcount or review
    count must be provided. some products have review and some don't. how I can fix it?

    Reply
  11. avichueloo Post author

    You are my new god! Just a few question. Do we have to edit manually the variables as price and reviews in case they change? What happens in case google find out that the informations doesn't match? People might lie

    Reply
  12. Mourin Bably Post author

    data layer variable not showing on the category page? and the three variable name showing undefined. What can be the mistake?

    Reply
  13. mourin bably Post author

    Hello Julian. Thank you so much for this video. I follow from first to last But i am unable to extract the avrg rating and review values from the page using DOM element variable. While debugging the page, the value showing 'null'. How can i extract the value from pages. Trying to get rid of this ..but failed. If there any solution about the variable configuration or any solution that really works. Please share. Waiting for your reply… Thanks in Advance…

    Reply
  14. Rumenigo Fernandes Post author

    Hi Julian
    Do you have any documentation for sites like Hotels, where there will be common data types across the site , while specific pages would have separate category data types.
    Also with hotels since we have multiple languages do we need to mark for each language or will it be ok to markup in English?

    Reply
  15. Jim Holloman Post author

    The music at the beginning is very loud, annoying and distracting.

    Reply
  16. Svetlana Wilson Post author

    Hi Julian, Thanks very much for the video, it is very helpful, I have been working on Jobposting mark [email protected] LD , trying to get it working dynamically, but I am lost…………. any suggestions where to start please. Many thanks

    Reply
  17. Rombout Versluijs Post author

    I did all of this also tried manual in header or body. Still never see the added data in google search results. Tried looking in to this for more info, but its hard to find. Do you have any tips?

    Reply
  18. Aleksejs Vorobjovs Post author

    Thank you!
    Why did cut down the offer for that example. There was a price specified, right? 🙂

    Reply
  19. Meg Ramsay Post author

    Hi, thanks for uploading this video!
    I was wondering: if our shop only has very few products, is it okay to not make the code change dynamically with variables, and just put in the info of each product manually for each product? And just have the tag trigger on the specific page of that product?
    I think this would also work. Thanks in advance for your input on this subject
    Have a great day!

    Reply
  20. Akshit Tyagi Post author

    hey julian juenemann,
    I have seen your video on youtube about dynamically schema via GTM seriously you did a great job and i have downloaded your templet too but i am stuck some where please help me out. such as i am unable to understand youe breadcumbs schema templet becuase i have 5 item for that and you have provided templet with 2 product only and the other thing which I want from your side give some variable for product schema such as price , review and etc . thank you in advance for your support,

    Reply
  21. ianman6 Post author

    Does anyone know if it’s possible to do the same with Open Graph tags? I can’t find anything about this.

    Reply
  22. Carlos Giraldo Post author

    Can you just put the "ratingValue" and "reviewCount" values as you wish? If that's is how you do it, can anybody just "fake" those reviews?

    Reply
  23. Akshit Tyagi Post author

    Dear JULIAN,

    I am trying to use dynamically breadcrumb schema through google tag manager it is firing well but not giving the value?
    http://www.spicestyle.com

    Tags

    <script type=”text/javascript”>

    $(function () {

    var trackingData = new Object();
    trackingData[“@context”] = “http://schema.org”;
    trackingData[“@type”] = “BreadcrumbList”;
    trackingData.itemListElement = [];

    var $breadcrum = jQuery(‘.breadcrumb’);
    var hasBreadCrumb = $breadcrum.length;
    if(hasBreadCrumb) {

    $breadcrum.find(‘li’).each( function (key,val) {

    var $childElements = jQuery(val).children();

    if($childElements.is(‘a’)){
    trackingData.itemListElement.push(
    {“@type”:”ListItem”, “position”:key+1 , “item”:{
    “@id”:window.location.origin+$childElements.attr(“href”) ,
    “name”:$childElements.text().trim()
    }
    });

    }else{

    trackingData.itemListElement.push(
    {“@type”:”ListItem”, “position”:key+1 , “item”:{
    “@id”:window.location.href ,
    “name”:jQuery(val).text().trim()
    }
    });

    }

    } );
    }
    //console.log(trackingData);
    $(‘body’).append(‘<script type=”application/ld+json”>’+JSON.stringify(trackingData)+'</script>’);

    });

    </script>

    Firing type
    dom- product details

    Reply
  24. Yassine Jabir Post author

    hi there can you help me plz , how can use json LD for all pages of my website and change the informations automaticly?? thanx

    Reply
  25. Kyle Doran Post author

    Thank you for the tutorial, however you skipped a vital step. At 7:51 "I already went ahead and did this.." Why? This is a tutorial no?? The point of a tutorial is that you don't skip steps. How do I create the data layer variable?

    Reply
  26. Anthony Calleja Photography Post author

    Hi , I was wondering for Amp pages how do you add JSON-LD Script since there is not custom html. Also can we past multiple Java script on one tag?

    Reply
  27. Platos305 FL Post author

    What schema would you recommend for a restaurants review / restaurant blogger website?

    Reply
  28. Salman Qadeer Post author

    Please message for proper advance course covering everything in detail for google tag manager so after completing i can use and know all of GTM so i can use from time to time.

    Reply
  29. Cody Paddock Post author

    Hi Julian,

    We have been using this same method for our clients. Although recently, the schema tags we have placed within Google Tag Manager do not show up within the Google Structured Data Testing Tool.
    We have also checked the Knowledge Panel for these clients and the markup that we put in the Schema Tags no longer shows up either.

    Have you seen this as well?
    Thanks-

    Reply
  30. martoniko1 Post author

    I wonder what everything can be done by GTM. Thank you for these courses.

    Reply
  31. sweta jani Post author

    hi

    i want to know how to appear lists views in the google.

    Reply
  32. M Sharjeel Post author

    i was apply this trick but this was not work. You lose my full day.

    Reply
  33. Jatin Chhabra Post author

    Very useful video. As now I know how to add rich snippets without plugins.

    Reply
  34. Sajjan Kumar Post author

    Nice article. Thanks for explaining the concepts so clearly.
    One addition: We see two products in Structure data testing tool (SDT ) but there is only one product is actually available on the page. This can create problem while showing results in Search engine result Page (SERP). As per my understanding, this issue can be resolved by including @id attribute in our newly injected JSON-LD through Google tag manager (GTM). The value @id should be same the id of the product being present on the page. Please respond if that is the solution?

    Reply
  35. Bek Bekov Post author

    Great stuff but missing some key points, it would be nice if you make another follow up video explaining how you created the DataLayer and DataLayer Variables. Currently it leaves people hanging with missing parts.

    Reply
  36. pamela ravelo Post author

    Hi, you should do a video explaining how to insert Breadcrumb correctly on Google tag manager #justanidea 😉

    Reply
  37. Meenu Makan Post author

    Hi Julian, I have created a local business schema using GTM and I have also published it and the tag is being fired in preview mode. but when I am testing it using the structured testing tool it is not showing. The website address is https://www.how2startproperty.com.au/ could you please let me know what could be the reason.

    Reply
  38. Ceek Recruiter Post author

    Would really appreciate some support with the following. I have followed the steps and everything has worked fine with the markup but once i try to test the link into google structured testing tool. it shows errors as if the markup is empty. The tag has been checked in debugger and it fires correctly on the page and all changes have been published through GTM, I have tried re-processing the changes but it still shows errors.

    Please Help!!

    Reply
  39. Rahul Makhija Post author

    Hello Internet, this solution doesn't completely work as of December 2018.
    The Structured data testing tool doesn't detect the JSON LD despite the tags being fired.
    You need to modify the Custom HTML.

    <script>

    (function()

    {

    var data = {

    ADD SCHEMA INFORMATION

    }

    var script = document.createElement('script');

    script.type = "application/ld+json";

    script.innerHTML = JSON.stringify(data);

    document.getElementsByTagName('head')[0].appendChild(script);

    })(document);

    </script>

    After using the above code, the structured data testing tool started to detect the reviews.

    I found the solution on this page https://productforums.google.com/forum/#!topic/tag-manager/wFzBFwPDq1U

    Reply
  40. Rajat Jangra Post author

    Hello,

    I want to know how do you create the dynamic variable for products in the variable section?

    Reply
  41. S Serafin Post author

    When I do the tag creation I get an error. Testing tool is asking for Brand, Description, etc but in your video you didn't get any errors. How come?

    Also, you're using Woocommerce to show an ecommerce page. So are you adding to the schema that WC already creates? It wasn't clear what was missing from WC in your initial display of the product page.

    Reply
  42. Harvinder Singh Post author

    Bother can you tell me how can I scrap the image from the source page?

    like

    <div class="et_pb_section" >

    <span class="et_pb_image">

    <img src="https://image.png" alt>

    how can I pick an image URL from Dom Element so that I can add it into the review schema to complete my product review element?

    thanks

    Reply
  43. Kanwal CarbonTeq Post author

    is there any other way to check if the schema is working or not? Data structured testing tool is having the issue with DTM

    Reply
  44. mwxseo Sammelaccount Post author

    Question: In case the number of reviews on a page increase, is the rich snippet on search results automatically updated with this method?

    Reply
  45. Abdul Samad Ghafouri Post author

    Hello

    I got a search console from …

    But I need help, I can not fix the error

    Pictures :

    https://imgur.com/hVb1uMl

    https://imgur.com/hVb1uMl

    Reply
  46. MyLoveHoney Post author

    Love your videos, I have been implementing everything you teach from your tutorials on facebook, google analytics and tag manager. One thing I want to ask is that, how come I don't see any reviews, ratings, and availability option under my site data layer? I amusing woocommerce and a plugin you have suggested DuracellTomi's Google Tag Manager for WordPress. How do I add these missing data layer?

    Reply
  47. Unilet solar Solutions Post author

    when i remove i am getting warning to re-instate that string. what should i do?

    Reply
  48. Jared Newnam Post author

    I'm writing this comment nearly 3 years after the video was made, but this method didn't seem to work for me. Placing the snippet directly after the start of the <body> tag is what helped most. I was able to see the snippet immediately, with 0 errors.

    Reply
  49. Classic DSLR Cameras Post author

    Hi Julian , thank you for the video. 3 years later this is still a quality tutorial with one answer from you missing to make it a great tutorial, which will make everyone happy. The answer missing is for the question:

    "Which plugin did you install/use on your demo shop to push/insert the parameters for "number of reviews" and "review score" into the datalayer ? Usually you never miss to mention that you use the gtm4wp plugin by Thomas Geiger to have a datalayer for e.g. (when this is important) but somehow here you have missed the more important plugin you have installed to push the ratings data into the datalayer. Would you share the name?

    Bonus questions for all future visitors:

    Is the latest version of WooCommerce today already taking care of adding automatically a dynamic review/rating structured data for products?

    In your tutorial after testing the product URL in the Structured Data Testing Tool (SDTT) the results returned 2 products containing one set of structured data created by WooCommerce and one created by your custom HTML. Even if one manages to have zero issues/errors in SDTT is it correct to show Google 2 products when only one is available on the page?

    Can one use custom HTML tag to add only missing product characteristics (followed by a SDTT test) but skip the rest which are available for in the structured data already added by WooCommerce (when Google has firm rule to state all required parameters for each product)?

    Reply
  50. Muhammad Axad Post author

    Very useful information thank you soooooo much

    Reply
  51. Wasim Mumtaz Post author

    Hey your video is really very informative.
    I have created my website using wix.com. it normally doesn't allow making schema markup on dynamic page.
    The steps which you have shown in this video will it be applicable or effective for wix dynamic pages?

    Reply
  52. Guillaume Hirschler Post author

    Does this technic still works today ?

    Reply
  53. Unilet solar Solutions Post author

    hey! you videos are very informative and i am a new comer to your videos. i find you are too fast, i cant follow quickly. hence i request you to be a bit slow. But your videos are just too good and very helpful in deed. Thank you once again.

    Reply
  54. Sarah Jack Post author

    Thank you, do you have a video for Schema mark up in Squarespace?

    Reply
  55. Tejas R Post author

    Hey mate, Quick question! How do we add Google Tag Manager on Google My Business page – Look forward for your response!!!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *