any possible way to disable 'data-react-helmet="true"' from server side rendering? #79

SkateFreak · Dec 2, 2015

i don't mind if its in the client but i don't like these extra chars in my markup.

any suggestions?
thanks

cwelch5 · Dec 3, 2015

We currently use that markup to distinguish Helmet's tags from existing tags in the app, in case a user wants tags managed outside of Helmet. The current implementation clears all the tags managed by Helmet and re-adds them. If we eliminated this from the server, we couldn't distinguish on the front end.

We will be moving to an implementation that will track individual tags on the front end and only update the changed ones. But for that we still need the client to establish a set of known Helmet-managed tags.

We could potentially re-visit why we have separate Helmet-managed tags and consider having Helmet manage everything...or perhaps an opt-in for full management vs. partial management. Hmmm....thoughts?

pavelkornev · May 11, 2016

@cwelch5 Having such an option would be cool

janoist1 · Aug 3, 2016

Still nothing?

dergachevm · Dec 6, 2016

Realy need to disable data-attributes from meta tags on server side. I have asked support of Yandex and they say data attributes not allowed in meta tags

svagi · Dec 6, 2016

@dergachevm As a workaround, you can replace it with empty string. Something like:

const Head = Helmet.rewind()
const regexp = / data-react-helmet="true"/g
const attr = Head.htmlAttributes.toString()
const title = Head.title.toString().replace(regexp, '')
const link = Head.link.toString().replace(regexp, '')
const style = Head.style.toString().replace(regexp, '')
const meta = Head.meta.toString().replace(regexp, '')
const script = Head.script.toString().replace(regexp, '')

dergachevm · Dec 12, 2016

@svagi Thank you

huygn · Dec 21, 2016

Anyways I can do this in the client? I have a React client side rendered page and trying to use meta tags for Twitter Card.

staylor · Feb 24, 2017

Only remove the data attribute from element sets that aren't already in the <head>:

<head>
${head.meta.toString().replace(regExp, '')}
${head.title.toString().replace(regExp, '')}
${head.script.toString().replace(regExp, '')}
${head.link.toString()}
${cssBundle ? `<link rel="stylesheet" type="text/css" href="${cssBundle}" />` : ''}
</head>

Otherwise, the <link> tag will get wiped out.

gajus · May 8, 2017

@cwelch5 Can you make HELMET_ATTRIBUTE configurable?

In the mean time, a dirty workaround is:

require('react-helmet/lib/HelmetConstants.js').HELMET_ATTRIBUTE='data-react';

Personally, I don't feel comfortable exposing the fact that the server-side code is using a particular framework. Exposing in markup that react-helmet is being used to generate headers creates a possible attack vector.

ncochard · May 31, 2017

I am wondering if anybody has evidence that the data-react-helmet attribute is a detriment to SEO?

We are using react-helmet for SEO. We use it to insert content into the <title> tag, and manage other tags such as <link rel="canonical" href="...">, etc.

Our SEO consultant suspect that the attribute data-react-helmet may affect SEO negatively.

Since we are implementing an isomorphic application, removing the data-react-helmet attribute server-side (e.g. ${head.title.toString().replace(regExp, '')}) is not an option, because this will cause the element to be duplicated when the page is re-rendered client-side.

So I am considering working on a fork (or pull-request) which does not use the attribute data-react-helmet. But this will be a lot of work. And clearly according to W3C data-* attributes are allowed and should not cause any issue. So do the Google bots correctly ignore the data-* attributes when analysing the HTML?

jfuchs · May 31, 2017

I've run into another issue with this data attribute — it breaks Google AMP's [albeit strict] validation for their boilerplate tags.

shahkashani · Jun 1, 2017

Please. 🙏

hugmanrique · Aug 10, 2017

+1 This is affecting Google's AMP pages

esbb48 · Aug 18, 2017

It also affect Facebook debugger
https://developers.facebook.com/tools/debug/

jcdarwin · Sep 5, 2017

In order to deal with this annoying behaviour, you can do this hack, which removes the data-react-helmet attribute between Helmet calls.

    <!-- The mount point for the header.js component; this can be whatever you want. -->
    <div id="header"></div>

    <!-- The mount point for the footer.js component; this can be whatever you want. -->
    <div id="footer"></div>

    <script>
        (function() {
          this.removeAttribute = function(tagName, attribute) {
            var tags = document.getElementsByTagName(tagName)
            // Convert our nodelist to an array, so we can iterate using forEach
            tags = Array.prototype.slice.call(tags);
            tags.forEach(function (tag) {
              tag.removeAttribute(attribute)
            })
          }

          this.renderComponent = function(component, mountPoint, props) {
            // We need to remove the data-react-helmet attribute from any <style>s added
            // previously by react-helmet, otherwise on the next invocation (i.e. inside a component)
            // it will remove these styles from the DOM.
            // https://github.com/nfl/react-helmet/issues/79
            this.removeAttribute('style', 'data-react-helmet')

            ReactDOM.render(
              React.createElement(component, props || {}, null),
              document.getElementById(mountPoint)
            )
          }

          // Render the header
          this.renderComponent(StuffIsomorphicComponent__header, 'header')

          // this.renderComponent(StuffIsomorphicComponent__headline, 'headline', {title: 'What is this?'})

          // Render the footer
          this.renderComponent(StuffIsomorphicComponent__footer, 'footer')
        }())
    </script>

calpa · Nov 8, 2017

It affects the Facebook open graph...

elrumordelaluz · Nov 10, 2017

Same problem here for Twitter Cards

spiral2k · Nov 29, 2017

any updates on this one?

adam-26 · Dec 14, 2017

I have forked react-helmet and removed the data-react-helmet attribute usage, it's published as react-cap.

There is one caveat, if you include any metadata in your render using alternative methods (not react-helmet syntax), you must assign the HTML element the attribute data-ignore-metadata. There's more information on the readme page.

Obviously it would be preferable if react-helmet included an option to disable use of the attribute, but given this issue is over 2 years old that seems unlikely. As a side note, the fork was originally created to enable support of the react 16 server-side streaming interface.

priteshpoddar · Feb 9, 2018

Any updates on this?

milotindragos · Mar 13, 2018

Any news on this?

vxcamiloxv · Apr 12, 2018

data-react-helmet is annoying

RobsonAraujo · Apr 17, 2018

Our project is using Helmet too and we use server side rendering. When checking the SEO with https://seositecheckup.com/ we get missing tags (especially the description meta tag) although it is there. We suspect that thedata-react-helmettags might cause this problem.
Note, we don't have problems with the Facebook og:+* tags...
So it might not be a real problem, just that the mentioned site gives us a bad note...

championshuttler · May 7, 2018

How to add meta tag of twitter card in react-helmet to render dynamic data

flavioalves · Jun 3, 2018

+1

taze-fullstack · Jun 5, 2018

+1

hugmanrique · Jun 6, 2018

As this issue is pretty old, there are lots of people subscribed to it through email. We would appreciate if instead of adding +1 comments you used the reactions feature.

cmtt · Jul 13, 2018

+1.

Using this as workaround and feel bad about it.

/**
 * Regular expression used in `removeAdditionalHelmetAttributes`. 
 * @type {RegExp}
 */
const ATTRIBUTE_REGEXP = / data-react-helmet="true"/g;

/**
 * Removes "data-react-helmet" attributes from generated HTML, as it
 * cannot be currently disabled.
 * @method removeAdditionalHelmetProps
 * @see https://github.com/nfl/react-helmet/issues/79
 * @param {Object} helmet
 * @return {Object}
 * @private
 */
const removeAdditionalHelmetAttributes = (helmet) => {
  return Object.keys(helmet).reduce((previous, acc) => {
    const handler = helmet[acc];
    const _toString = handler.toString;
    const toString = () => _toString.call(handler).replace(ATTRIBUTE_REGEXP, '');

    return {
      ...previous,
      [acc]: { ...handler, toString },
    };
  }, {});
};

// In your middleware:

/**
 * Collect properties for Helmet after rendering.
 * @type {Object}
 */
const helmet = removeAdditionalHelmetAttributes(Helmet.rewind());

CanRau · Jul 14, 2018

react-head might be an interesting alternative, haven't tried it myself, yet, but it uses React Portals and says it's SSR ready. Medium article

Still didn't had the time to test it yet, example app won't install, and the code mentions data-rh attribute, so…

outofthisworld · Aug 28, 2018

+1

AndyPresto · Sep 9, 2018

Is there any alternative to this issue yet?

Apart from hacky workarounds.

hugmanrique · Sep 10, 2018

This project hasn't received any updates for more than 7 months now. I think it's safe to say that if you want a library that doesn't have this bug, it would be better to search for an alternative (especially considering they would use newer React features such as portals) instead of waiting for the react-helmet team to fix this.

@CanRau suggested an alternative above

CanRau · Sep 10, 2018

@hugmanrique @AndyPresto only thing is react-head is still missing some, for me, important features like manipulating <html /> attributes e.g. setting <html lang="en"> and wont let you change <body/> attributes either, I didn't had the time to come up with a PR so far
If you need it you would have to use plain js to update them at the moment, which might not be a big deal..just a note ;-)

tmbtech · Nov 7, 2018

Removing the enhancement tag and escalating to a bug. We are in the process of discussing the roadmap for the next update major update and will be addressing some of these bugs.

zolero · Nov 13, 2018

Removing the enhancement tag and escalating to a bug. We are in the process of discussing the roadmap for the next update major update and will be addressing some of these bugs.

Any ETA?

tmbtech · Nov 16, 2018

@zolero sorry I do not have an ETA. I wish we had a dedicated team for OOS but the maintainers are volunteers from the engineering department.

Please bear with me while I get caught up with the project.

cwelch5 added enhancement help wanted and removed help wanted labels Jan 6, 2016

hugmanrique referenced this issue Aug 10, 2017
Closed
Option to render output without `data-react-helmet` attrs #304

KyleAMathews referenced this issue Nov 7, 2017
Closed
Optimize the open graph tag in gatsby #2829

CanRau referenced this issue Jul 14, 2018
Closed
data-rh attribute #40

tmbtech added bug and removed enhancement labels Nov 7, 2018

tmbtech self-assigned this Nov 16, 2018

This was referenced Nov 16, 2018

Open

Metatags from helmet are not recognized by google, neither social medias! gatsbyjs/gatsby#9979

Open

[gatsby-plugin-manifest] Add option to remove theme-color meta tag gatsbyjs/gatsby#9977

nfl/react-helmet

Join GitHub today

any possible way to disable 'data-react-helmet="true"' from server side rendering? #79

Comments

SkateFreak commented Dec 2, 2015

This comment has been minimized.

cwelch5 commented Dec 3, 2015

cwelch5 added enhancement help wanted and removed help wanted labels Jan 6, 2016

This comment has been minimized.

pavelkornev commented May 11, 2016

This comment has been minimized.

janoist1 commented Aug 3, 2016

This comment has been minimized.

dergachevm commented Dec 6, 2016 • edited

This comment has been minimized.

svagi commented Dec 6, 2016 • edited

This comment has been minimized.

dergachevm commented Dec 12, 2016

This comment has been minimized.

huygn commented Dec 21, 2016 • edited

This comment has been minimized.

staylor commented Feb 24, 2017

This comment has been minimized.

gajus commented May 8, 2017 • edited

This comment has been minimized.

ncochard commented May 31, 2017

This comment has been minimized.

jfuchs commented May 31, 2017

This comment has been minimized.

shahkashani commented Jun 1, 2017

hugmanrique referenced this issue Aug 10, 2017

Option to render output without `data-react-helmet` attrs #304

This comment has been minimized.

hugmanrique commented Aug 10, 2017

This comment has been minimized.

esbb48 commented Aug 18, 2017 • edited

This comment has been minimized.

jcdarwin commented Sep 5, 2017

KyleAMathews referenced this issue Nov 7, 2017

Optimize the open graph tag in gatsby #2829

This comment has been minimized.

calpa commented Nov 8, 2017

This comment has been minimized.

elrumordelaluz commented Nov 10, 2017 • edited

This comment has been minimized.

spiral2k commented Nov 29, 2017

This comment has been minimized.

adam-26 commented Dec 14, 2017

This comment has been minimized.

priteshpoddar commented Feb 9, 2018

This comment has been minimized.

milotindragos commented Mar 13, 2018

This comment has been minimized.

vxcamiloxv commented Apr 12, 2018

This comment has been minimized.

RobsonAraujo commented Apr 17, 2018

This comment has been minimized.

championshuttler commented May 7, 2018

This comment has been minimized.

flavioalves commented Jun 3, 2018

This comment has been minimized.

taze-fullstack commented Jun 5, 2018

This comment has been minimized.

hugmanrique commented Jun 6, 2018

This comment has been minimized.

cmtt commented Jul 13, 2018

This comment has been minimized.

CanRau commented Jul 14, 2018

CanRau referenced this issue Jul 14, 2018

data-rh attribute #40

This comment has been minimized.

outofthisworld commented Aug 28, 2018

This comment has been minimized.

AndyPresto commented Sep 9, 2018

This comment has been minimized.

hugmanrique commented Sep 10, 2018 • edited

This comment has been minimized.

CanRau commented Sep 10, 2018

tmbtech added bug and removed enhancement labels Nov 7, 2018

This comment has been minimized.

dergachevm commented Dec 6, 2016 •

edited

svagi commented Dec 6, 2016 •

edited

huygn commented Dec 21, 2016 •

edited

gajus commented May 8, 2017 •

edited

esbb48 commented Aug 18, 2017 •

edited

elrumordelaluz commented Nov 10, 2017 •

edited

hugmanrique commented Sep 10, 2018 •

edited