Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Apr 20, 2023

Conversation

bc-jz
Copy link
Contributor

@bc-jz bc-jz commented Apr 20, 2023

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:
Screen Shot 2023-04-20 at 9 04 33 AM

Here is how it looks with the change in this PR:
Screen Shot 2023-04-19 at 6 59 27 PM

@Tiggerito
Copy link
Contributor

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.

image

@bc-jz
Copy link
Contributor Author

bc-jz commented Apr 20, 2023

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.

…schema to no longer use url encoding. The url encoding was resulting in undesired encoded characters showing up in places the description was used, like when linking a product to pinterest.
@Tiggerito
Copy link
Contributor

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
Copy link
Contributor Author

bc-jz commented Apr 20, 2023

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

@mattcoy-arcticleaf
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants