{{ product | json }} is creating weird links in product-template.liquid

Solved
Highlighted
Shopify Partner
111 8 37

At the bottom of the product-template.liquid, there's this piece of code

<script type="application/json" id="ProductJson-{{ section.id }}">
  {{ product | json }}
</script>

If I check the results in the product source code in my browser, I retrieve some weird code, ir's starting with

<script type="application/json" id="ProductJson-product-template">
    {"id":4717658865763,"title":"Handpuppe Zauberer","handle":"kersa-handpuppe-zauberer-12600","description":"\u003cp\u003eZauberer als Handpuppe mit weichem Stoff- Textilkopf aus der beliebten Kersa Classic Edition, in Handarbeit in Deutschland gefertigt (Made in Germany)\u003c\/p\u003e\u003ch4\u003eMaße:\u003c\/h4\u003e\u003cp\u003e33 cm\u003c\/p\u003e\u003ch4\u003eGewicht:\u003c\/h4\u003e\u003cp\u003e60 Gramm\u003c\/p\u003e\u003ch4\u003eVom Hersteller empfohlenes Alter:\u003c\/h4\u003e\u003cp\u003eAb 3 Jahren\u003c\/p\u003e\u003ch4\u003eArtikelnummer:\u003c\/h4\u003e\u003cp\u003e23-12600\u003c\/p\u003e\u003cp\u003eDie weichen Textilköpfe werden in aufwändiger Handarbeit sorgfältigst bestickt, handgeformt und liebevoll handbemalt. Die federleichten Puppen sind typisch für das Kasperlspiel und fantastisch ausdrucksstark. Der Einsatz edler Materialien macht diese Puppen seit über sieben Jahrzehnten zu einem \"beliebten und bewährten Klassiker\". \u003cbr\u003e100% deutsche Handarbeit \u003cbr\u003eWir empfehlen das \u003ca href=\"https:\/\/menschenskinder-shop.de\/products\/kersa-tuertheater-palazzo-90020\" title=\"Kersa Tür- Theater\"\u003e\u003cspan style=\"text-decoration: underline;\"\u003eTürtheater Palazzo\u003c\/span\u003e\u003c\/a\u003e für die Aufführungen der besonderen Art.\u003c\/p\u003e\u003ch4\u003eHinweise zur Produktsicherheit:\u003c\/h4\u003e\u003cp\u003eAchtung! Nicht für Kinder unter drei Jahren geeignet. Verschluckbare Kleinteile. Erstickungsgefahr!\u003c\/p\u003e","published_at":"2020-10-05T17:22:48+02:00","created_at":"2020-10-05T17:22:50+02:00","vendor":"Kersa","type":"","tags":["alter-3","Kasperlepuppe","Kasperltheater","kategorie-geschenk-3","kategorie-puppe","price-40","Puppe","Puppenthater","siegel-mig","Theater","vendor-Kersa"],"price":3250,"price_min":3250,"price_max":3250,"available":true,"price_varies":false,"compare_at_price":null,"compare_at_price_min":0,"compare_at_price_max":0,"compare_at_price_varies":false,"variants":[{"id":33175559602275,"title":"Default Title","option1":"Default Title","option2":null,"option3":null,"sku":"23-12600","requires_shipping":true,"taxable":true,"featured_image":null,"available":true,"name":"Handpuppe Zauberer","public_title":null,"options":["Default Title"],"price":3250,"weight":0,"compare_at_price":null,"inventory_management":"shopify","barcode":"4005183126000"}],"images":["\/\/cdn.shopify.com\/s\/files\/1\/0298\/5895\/5363\/products\/kersa-handpuppe-zauberer-12600_3d597ff9-3d83-42f9-91f3-8413556eb407.jpg?v=1602679960"],"featured_image":"\/\/cdn.shopify.com\/s\/files\/1\/0298\/5895\/5363\/products\/kersa-handpuppe-zauberer-12600_3d597ff9-3d83-42f9-91f3-8413556eb407.jpg?v=1602679960","options":["Title"],"media":[{"alt":"Handpuppe Zauberer von Kersa","id":8365873758307,"position":1,"preview_image":{"aspect_ratio":1.0,"height":1730,"width":1730,"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0298\/5895\/5363\/products\/kersa-handpuppe-zauberer-12600_3d597ff9-3d83-42f9-91f3-8413556eb407.jpg?v=1602679960"},"aspect_ratio":1.0,

 The links to the images is not correct obviously, it's this line

"src":"https:\/\/cdn.shopify.com\/s\/files\/1\/0298\/5895\/5363\/products\/kersa-handpuppe-zauberer-12600_3d597ff9-3d83-42f9-91f3-8413556eb407.jpg?v=1602679960"

This is not working for sure, why are all these "\/\/" in there? Is it an error? I have some wrong images on google, so I try to correct the wrong image links to see if that's solving the issue.

Thank you for a bit more clarity in what is happening here.

I work with minimal theme, I tried a virgin theme as well with the same results.

My website is www.menschenskinder-shop.de

Thank you!!

0 Likes
Highlighted
Shopify Expert
10006 116 1819

This is an accepted solution.

Those slashes are the escaped version of the character.
So a \ becomes \/. And since after http: you have // the string then becomes \/\/. It might look odd but it's expected and correct.

When you parse the json with JavaScript, the result will be the expected url.

Are you seeing an error?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
Shopify Partner
111 8 37

Thank you Jason! That's good to know!

No there's no error, just sth weird on google image search. If I type some very clear search expressions with the name of my shop in it, for example "kersa zauberer handpuppe menschenskinder" (on google images, while menschenskinder is my shop name), the picture that is shown is another product. I have no clue why this can happen, this is why I started to check the generated page code for "jpg" and found these json links. But obviously this cannot be the reason for that issue with google.

0 Likes
Highlighted
Shopify Partner
111 8 37

There's one thing about {{ product | json }} I don't understand, it seems that it's creating additional structured data with its 

 

 <script type="application/json" id="ProductJson-product-template">
 {"id":4717658865763,"title":"Handpuppe Zauberer","handle":"kersa-handpuppe-zauberer-12600","description":"

 

.....and so on. I already have structured data implemented by myself. So can I kick this "product json" out? There are weird issues with google happening, and I guess this might be the problem. The problem is, google takes images of the "recommended products" section on the bottom of the page instead of the correct product images. Right below that {{ product | json }} creating these "Structured data" in my site source, there is the "product recommendation" section. So this is why I guess there is a connection between these issues.

So what is this  {{ product | json }} doing, why is it there?

0 Likes