seo Question posted in
Some basic information to get you started with this can be found here.

Inserting JSON through Google Tag Manager – SEO

Trying to dynamically pull HTML elements from a template on a site. {{SCHEMA - Recipe Image}} and {{SCHEMA - Recipe Description}} are not working correctly. {{SCHEMA - Recipe Image}} is referencing the correct section, yet returns null (The value provided for image.url must be a valid URL) in Google’s Structured Data Testing Tool.
{{SCHEMA - Recipe Description}}, which worked when I created the Article schema, for some reason doesn’t work on this type of schema and gives me a

Error at line 9, character 5: Parse error. ‘}’ expected

error.
Can anyone help me understand why the Image URL and Description isn’t being pulled correctly?

<script>
  (function(){
var data = {
     "@context": "http://schema.org",
     "@type": "Recipe",
     "author": "Example",
     "cookTime": "PT1H",
     "description": "Generic description goes here.",
     "image": {
      "@type": "ImageObject",
      "url": {{SCHEMA - Recipe Image}}
     },
     "recipeIngredient": [
       {{SCHEMA - Recipe Ingredient}}
  ],
 "name": {{SCHEMA - Recipe Title}},
 "prepTime": "PT15M",
 "recipeInstructions": {{SCHEMA - Recipe Steps}}
}

var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script); 
 })(document);
</script>
Tags:

2

Answers


  1. 0

    Could I see your code for the custom variable {{ SCHEMA - Recipe Image }}? My first thought is that you’re not not correctly selecting the src attribute value for the image, but I can’t know unless I see that code. Also, seeing the HTML you’re trying to select may be helpful.

    Just as a reference, this is how I’ve successfully implemented the custom variable for an image: 

    function(){
var image = document.querySelector(".slide-2 a").getAttribute('href');
return image;
}

    Note that this is selecting the href attribute of a link that is wrapping the image, and you may need to select the src attribute of an image, depending on your HTML structure.

    One possibility is that you’re forgetting to ‘return’ the image, once you’ve selected it, so give that a check as well.

    You may need to do something closer to this: 

     function(){
    var image = document.querySelector("img").getAttribute('src');
    return image;
    }

    Another possible answer: I recently implemented this for a site of mine, and I was having Google’s Structured Data Testing Tool show a custom variable as null randomly, but not all the time. I would refresh the testing tool, and it would eventually show up correctly, so I wouldn’t put 100% trust into that tool, as it can be buggy. Give it a refresh, and see if that helps.

    The only way to really tell if the fields are actually populating are to open up the Chrome Developer Tools under the ‘Elements’ tab, hit Control – F and search ‘Schema’ to find your JSON object that was inserted by GTM, and see if the "url": field is actually populated with a URL.

    So, if this doesn’t solve your issues, provide me with some more info and I’d be glad to take another look!

    Login or Signup to reply.
  2. 0

    https://moz.com/blog/using-google-tag-manager-to-dynamically-generate-schema-org-json-ld-tags

    “…..is because Tag Manager replaces each variable with a little piece of JavaScript that calls a function — returning the value of whatever variable is called.”

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search