All topics

Adding structured data to product page

FeRojas

1 month ago

Hi! Im having trouble adding a structured data in the body of a product page. Tried different configurations, but still https://search.google.com/test/rich-results?hl=es-419 dont recognize it. Only way that it worked for me, is by adding the script to the head of the page, the problem with that is that affects loading performance. The problem seems to be that it wraps the script content in <span data-node-type="text" ...>

Any help with this would be really appreciated 🙌 .
Erik Beuschau

1 month ago

You can add a script to head on the page’s configuration. Similar to when you add other head elements (meta tags for instance)
FeRojas

1 month ago

Yes, it worked when I added the script to the <head>. I was trying to put it in the <body> to avoid impacting loading performance.
Lucas G

1 month ago

This type of script shouldn’t really impact performance unless your backend is just really slow
Lucas G

1 month ago

It’s when you’re loading external things that you should be careful
FeRojas

1 month ago

I'm using Supabase. Yes, after doing some performance tests, I found that it didn't affect performance too much (it's not noticeable). Thanks again @Lucas G 👍!
Lucas G

1 month ago

You’re likely already using that data anyways in the body no?
FeRojas

1 month ago

Yes, is almost all but not all.
Lucas G

1 month ago

Gotcha
Lucas G

1 month ago

Se ve bien en móvil 👍
FeRojas

1 month ago

Yep, performance still good 🙌
Toddle so amazing
@Lucas G
Se ve bien en móvil 👍
FeRojas

1 month ago

Jajaja gracias!
Pascal

29 days ago

Hey, this sounds very interesting, why are you doing this, why should I do this – is this relevant for SEO?
salma

29 days ago

Yes primarily for SEO. It enables e.g. rich results in search engines (think reviews for products, ingredients for recipes etc showing directly on the search result page)

You can do similar things using schema.org markup in HTML, the way discussed in this thread is using JavaScript/JSON.

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data
❤️1
@salma
Yes primarily for SEO. It enables e.g. rich results in search engines (think reviews for products, ingredients for recipes etc showing directly on the search result page)

You can do similar things using schema.org markup in HTML, the way discussed in this thread is using JavaScript/JSON.

https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data
Pascal

29 days ago

Oh nice!
Thanks salma!
By the way, is there a way I can expose data in the page head from a component and not the page root level?
salma

29 days ago

You don’t need to do it in the head. All of this stuff can go in line wherever the component lives in the page. I would recommend that approach for maintainability actually as well.
Pascal

29 days ago

Oh really? I should look into this topic, shouldn't I?
Just in case you have it, but do you have an example project at hand?
salma

29 days ago

I have an example on my website but it’s not built with toddle (yet!)
But even on my current website the structured data is near the relevant HTML
Pascal

29 days ago

Ha, you page is pretty easy to find, good job
Ok anyway, I'll find a way (building something for the community btw, gathering as much high end ready for production stuff as I can find)
🙌1
@salma
You don’t need to do it in the head. All of this stuff can go in line wherever the component lives in the page. I would recommend that approach for maintainability actually as well.
Kamil

28 days ago

For now, the schema needs to be in the head because script tags in the body are not server rendered (for now). It's best to place the schema markup in your CMS and then dynamically load the right one based on the current page.
Kamil

28 days ago

I did this for a SPA/website with nearly 9,000 pages, where almost every other page has different schema markup.
salma

28 days ago

Ah that makes sense with regards to how toddle currently works. Still adjusting my mental model from years of other frameworks ☺️
👍1
Schema tags, however, are placed on the html, which would be server rendered
👍1
@Pascal
Hey, this sounds very interesting, why are you doing this, why should I do this – is this relevant for SEO?
FeRojas

28 days ago

I doing it for SEO, for rich results in search engines. Google adds them automatically to Google merchants that is a very good source for traffic for products. Toddle allows to build this dinamically for each page, is great.
👍1
FeRojas

28 days ago

The way I added is that I first added an external resource
And then a formula for the content
FeRojas

28 days ago

For that create a Json-ld with an external tool (or Claude) and then paste it in a Json node, so you dont have to create the json object from scratch. Then is possible to create dinamically the entire object from data from the database.
Pascal

28 days ago

whoa! 👌

Adding structured data to product page

FeRojas

Erik Beuschau

FeRojas

Lucas G

Lucas G

FeRojas

Lucas G

FeRojas

Lucas G

Lucas G

FeRojas

FeRojas

Pascal

salma

Pascal

salma

Pascal

salma

Pascal

Kamil

Kamil

salma

FeRojas

FeRojas

FeRojas

Pascal