Title component doesn't override default <title> tag provided via HTML template #83

rdsedmundo · 2019-04-22T18:08:19Z

I'm using client-side rendering and react-head is not able to replace a default tag that I provided on my HTML template. It only adds a new <title> tag at the end of the head, and due to the browser behavior, only the first one is actually used. react-helmet as a reference supported this fine.

template.html

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
     <div id="react-mount"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Title, HeadProvider } from 'react-head';

ReactDOM.render(
  <div>
    <HeadProvider>
      <Title>Test2</Title>
    </HeadProvider>
  </div>
  document.getElementById('react-mount'),
)

The expected behavior for me is that Test2 is going to replace and be the title of the page, but what happens is that Test remains as the title, as its tag is positioned first.

The text was updated successfully, but these errors were encountered:

rdsedmundo · 2019-04-22T18:13:53Z

Nevermind, I realized what is going on in fact. The nesting is working. The problem is that, if I provide a default tag on my HTML template, react-head won't override it and it always stays on the top and "won the battle" compared to the tag that react-head inserts.

I'll change the title and description appropriately.

tizmagik · 2019-04-23T02:13:00Z

I guess what is the desired behavior here? I'm not sure react-head should mess with existing markup on the page. Curious what your use case is for the title to be part of the template vs having react-head completely manage it?

rdsedmundo · 2019-04-23T10:10:16Z

It's simply because this one can act as a default one and if I share the webpage on Slack, for example. If I do that and have the <title> tag on the HTML I can see the title being picked up. Relying only on react-head Slack won't get anything, as JS won't execute. And by the way, we don't have strong SEO requirements that would justify adding server-side rendering, the use case is really just this quick link sharing on a platform here and there.

tizmagik · 2019-04-24T16:26:48Z

Yes, makes total sense to have a fallback as part of the template @rdsedmundo 👍

However, I'm not sure react-head should manage that. Conceptually my mental model is when you import { Title } from 'react-head' then you're telling react-head to manage that Title tag -- I'm not sure it makes sense for react-head to manage all title tags.

To solve your use case though I guess it would be relatively easy to add a small snippet to remove the title tag that the template adds and then the rest would be left up to react-head:

<head>
  <title id="template-title">Template Title</title>
</head>

<script>
const templateTitle = document.getElementById("template-title");
if (templateTitle) templateTitle.parentNode.removeChild(templateTitle);
</script>

TrejoCode · 2019-10-06T00:06:06Z

Yes, makes total sense to have a fallback as part of the template @rdsedmundo 👍

However, I'm not sure react-head should manage that. Conceptually my mental model is when you import { Title } from 'react-head' then you're telling react-head to manage that Title tag -- I'm not sure it makes sense for react-head to manage all title tags.

To solve your use case though I guess it would be relatively easy to add a small snippet to remove the title tag that the template adds and then the rest would be left up to react-head:
<head>
  <title id="template-title">Template Title</title>
</head>

<script>
const templateTitle = document.getElementById("template-title");
if (templateTitle) templateTitle.parentNode.removeChild(templateTitle);
</script>

Thank you, I stopped using react-head precisely for not having this feature, it is very, the proposed solution is simply horrible, nothing clean.
I hope in some future it will be corrected and I can return to this compenente.

Thank you anyway.

tizmagik · 2019-10-06T16:39:21Z

I’m curious how others feel about this. If there’s enough interest in having react-head clobber existing tags on the page that it otherwise does not manage, we can look into adding support.

JoshuaToenyes · 2019-10-06T23:30:25Z

Personally, my mental model says that existing tags should not be modified by react-head. The real solution here is SSR.

Although the title tag might seem special in this case, how would react-head handle other singleton type tags (i.e. <meta name="viewport" ...>). Would it clobber those too?

I image troubleshooting unexpectedly changing tag values to be more difficult than seeing duplicate tags and realizing one is being injected by react-head, and the other hardcoded in the template.

Also, expecting react-head to clobber the other title tags could lead to problems if you are using SSR. Suppose you had a hard-coded title tag in your template (or interpolated through some other means), then inject another title tag via react-head. The resulting HTML will have two title tags (bad for a number of reasons). However, inspecting the page after JS has executed and react-head has removed the original title tag will make it appear as though there's no problem.

TrejoCode · 2019-10-07T13:58:02Z

Personally, my mental model says that existing tags should not be modified by react-head. The real solution here is SSR.

Although the title tag might seem special in this case, how would react-head handle other singleton type tags (i.e. <meta name="viewport" ...>). Would it clobber those too?

I image troubleshooting unexpectedly changing tag values to be more difficult than seeing duplicate tags and realizing one is being injected by react-head, and the other hardcoded in the template.

Also, expecting react-head to clobber the other title tags could lead to problems if you are using SSR. Suppose you had a hard-coded title tag in your template (or interpolated through some other means), then inject another title tag via react-head. The resulting HTML will have two title tags (bad for a number of reasons). However, inspecting the page after JS has executed and react-head has removed the original title tag will make it appear as though there's no problem.

It is correct thought in SSR.
My approach is for the CSR.

tizmagik · 2019-10-11T19:46:06Z

If anyone's interested in working on this, I think a PR to show how this might work would be helpful. Ideally there should be a way to opt-in (or opt-out) of clobbering.

tizmagik · 2019-10-14T16:39:14Z

Wrote up a quick RFC: #97

rdsedmundo changed the title ~~Nested Title tags are not working~~ Title component doesn't override default <title> tag provided via HTML template Apr 22, 2019

tizmagik added enhancement help wanted labels Oct 11, 2019

tizmagik mentioned this issue Oct 14, 2019

RFC: Managing tags without extra markup #97

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Title component doesn't override default <title> tag provided via HTML template #83

Title component doesn't override default <title> tag provided via HTML template #83

rdsedmundo commented Apr 22, 2019 •

edited

rdsedmundo commented Apr 22, 2019

tizmagik commented Apr 23, 2019

rdsedmundo commented Apr 23, 2019

tizmagik commented Apr 24, 2019

TrejoCode commented Oct 6, 2019

tizmagik commented Oct 6, 2019

JoshuaToenyes commented Oct 6, 2019 •

edited

TrejoCode commented Oct 7, 2019

tizmagik commented Oct 11, 2019

tizmagik commented Oct 14, 2019

Title component doesn't override default <title> tag provided via HTML template #83

Title component doesn't override default <title> tag provided via HTML template #83

Comments

rdsedmundo commented Apr 22, 2019 • edited

rdsedmundo commented Apr 22, 2019

tizmagik commented Apr 23, 2019

rdsedmundo commented Apr 23, 2019

tizmagik commented Apr 24, 2019

TrejoCode commented Oct 6, 2019

tizmagik commented Oct 6, 2019

JoshuaToenyes commented Oct 6, 2019 • edited

TrejoCode commented Oct 7, 2019

tizmagik commented Oct 11, 2019

tizmagik commented Oct 14, 2019

rdsedmundo commented Apr 22, 2019 •

edited

JoshuaToenyes commented Oct 6, 2019 •

edited