fix(storefront): STRF-10416 - Remove URL Encoding from Description in the Product Schema

[bc-jz]

What?

Updates the description in the schema.org product schema to remove url encoding. This schema is output into a "rich snippet" script on the PDP which is used by 3rd party platforms for accessing product details in a consistent way.

The url encoding was resulting in undesired encoded characters showing up in places the description was used, like when linking a product to pinterest.

For example, I setup a product with a description that resulted in this value being printed into the HTML of the page:

"description": "Who%20doesn't%20like%20a%20sugar%20skull%3F%0ATesting%20if%20I%20can%20break%20the%20output%20by%20adding%20a%20quote%20-%26gt%3B%20%22%22and%20single%20quote%20-%26gt%3B%20'%0Aand%20closing%20curly%20brace%20-%26gt%3B%20%7D%0Aand%20opening%20curly%20brace%20-%26gt%3B%20%7B%0A%26nbsp%3B%0Atest%20script%20-%26gt%3B%20%7D%3Balert(%22print%20this!%22)%3B%0A%0ASayHello%0A%26nbsp%3B",

This caused things like the %20 (instead of a space) to persist in the description pulled into pinterest when using the "share on pinterest" button that can be enabled on a PDP. With my changes the description instead looks like this:

"description": "Who doesn't like a sugar skull?
Testing if I can break the output by adding a quote -> ""and single quote -> '
and closing curly brace -> }
and opening curly brace -> {
 
test script -> };alert("print this!");

SayHello
 ",

Html encoded characters (like & and ') are still used and do display properly on the pinterest side as seen in the images below.

Requirements

• CHANGELOG.md entry added (required for code changes only)

Tickets / Documentation

https://bigcommercecloud.atlassian.net/browse/STRF-10416

Screenshots (if appropriate)

Here is an example of how the results in pinterest look with our current url encoding:

Here is how it looks with the change in this PR:

[Tiggerito]

Coincidentally I provided a similar solution for this in the Google Search Central Community. Their issue was related to the length of the description which Google limits to 5000 characters. My solution encodes it correctly as well as limits its length.

Google's limit is not very well documented or reported. Their Rich Result Testing Tool just says it is too long. There is a clue in the Merchant Centre documentation for description.

[bc-jz]

Hi @Tiggerito,

That is interesting! It looks like that 5000 character limit is specific to Google's usage of the schema description field but I wonder if it would be a good limitation to implement in general. Maybe it should be a theme toggle as not all situations would have that limit.

Is your code sample viewable somewhere? I did not see it at the link you provided.

[Tiggerito]

Here's the code:

"description": {{{json (ellipsis (sanitize product.description) 4000) }}},

I always use it as Google is the biggest consumer, their warnings panic people, and we don't want the structured data to bloat out the HTML for no reason.

[bc-jz]

That sounds reasonable to me. Thank you for the insight on this, @Tiggerito !

[mattcoy-arcticleaf]

Nice fix @Tiggerito ! The original code in this commit would have broken if the product description had a double quote in it (").