Do Google crawlers/extractors read attributes in React props?

Question

We have a use case where we are displaying a certain product price when a page is rendered. And when a radio button is clicked on the page (product upgrades), we display additional prices.

The "additional prices" are stored in data-react-props and are not displayed anywhere in the HTML, neither in "View Page Source" or visible to the user on the page. We also use dynamically-generated Schema.org structured data markup, where we have included only the initial price.

Despite not showing the price in the markup (except in data-react-props), the Google Merchant Center is reporting non-displayed prices based on the data extracted by their crawlers.

Does Google extractors read data attribute values in React props?

OR...

Do the extractors/crawlers have the ability to click radio buttons and record the revealed content?

Answer 1

Yes, google can read the attributes of your tags even if they are rendered by react. Assuming that your website is rendered on the client side, when you right click on view source the attributes are not shown. However google does not solely rely on the initial source code. It renders the webpage and client side code is converted into a html code. To test this use the URL inspection tool in the search console and click on Test live url then click on view source. You can see the rendered version of your webpage including the attributes which were hidden previously