react-helmet
react-helmet copied to clipboard
nfl
any possible way to disable 'data-react-helmet="true"' from server side rendering?
i don't mind if its in the client but i don't like these extra chars in my markup.
any suggestions? thanks
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?
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
@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, '')
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.
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.
@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.
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?
I've run into another issue with this data attribute — it breaks Google AMP's [albeit strict] validation for their boilerplate tags.
It also affect Facebook debugger https://developers.facebook.com/tools/debug/
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>
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.
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...
How to add meta tag of twitter card in react-helmet to render dynamic data
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.
+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());
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…
