React: Microdata HTML attributes are camelCase in server render

[mike-marcacci]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
ReactDOM render methods (renderToStaticMarkup, renderToString, etc) generate camelCase microdata attributes.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/yvpq464mov

What is the expected behavior?
Microdata attributes should be rendered all lowercase (itemprop, itemtype, itemid, etc).

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.0.0 - 16.4.0

This is related to #12403 and #12462. While Google's structured data testing tool recognizes camelCase props, our index of structured data disappeared after switching from lowercase itemprop to camelCase itemProp to appease a linter:

This a definitely a Google problem, not a react one.. but can easily be solved by calling toLowerCase() from react renderers.

We've switched back to lowercase attributes today, and will see if this resolves the issue with google.

[gaearon]

How many microdata props do we support?

[gaearon]

In other words, are we talking about fixing one attribute or like 10?

[mike-marcacci]

Just 5:

• itemscope
• itemtype
• itemid
• itemprop
• itemref

[aweary]

Spec for reference: https://www.w3.org/TR/microdata/#new-attributes

[gaearon]

The spec doesn't seem to say anything about them being case-sensitive. 😞
Maybe we can find someone from Google who can shed light on this?

[aweary]

We currently lowercase the itemScope microdata attribute, but none of the others. Why did we special case itemScope 🤔

[gaearon]

It's boolean.

[aweary]

Oh right 🤦 in this if case-sensitivity isn't spec-defined it's better to get vendors like Google spec-compliant. @mike-marcacci is the structured data test tool the only case where this has been a problem for you?

[mike-marcacci]

No, the testing tool acts correctly and sees camelCase props, but the index itself disappeared for myself and another react user after switching to camelCase. We just switched back to use lowercase string props today, so I probably have to wait until tomorrow to see if the index is recovering.

There's definitely a possibility that google changed something internally at the same time as my switch to camelCase microdata props and that the camelCase has nothing to do with the index loss, so I'll definitely keep this issue updated.

[mike-marcacci]

FWIW I would definitely prefer leaving react as-is, just not if it's an SEO foot-gun waiting to happen.

[mike-marcacci]

I'm going to close this; we did a test where we kept lowercase microdata names on some pages and camelCase on others. Without changing anything else related to structured data Google has begun to pick up both sets again.

I'll chock this up to coincidence and the superstitious nature of everything SEO. Apologies for the noise.

[gaearon]

Sounds good, thanks for checking.

[nhunzaker]

Yes! Thank you for posting this issue, I think the write-up will be useful for reference in the future if it comes up again!

[lid2000]

I _think_ this is causing issues in my isomorphic app - it renders microdata props as camelcase on the server, however as far as I can tell React on the client-side renders them as all-lowercase, which causes mismatch warnings to get thrown up when using ReactDOM.hydrate(). I'm just using ReactDOM.render() instead to get around it for now.