Use `title` and `titleTemplate` in other tags. #102

brianespinosa · 2016-02-18T00:35:23Z

I am rendering open graph and twitter meta tags and I would like to set the og:title and twitter:title content values to the same as what you render by combining the title and titleTemplate props. Is there a way to set those content values using that same process?

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

cwelch5 · 2016-02-22T22:40:27Z

Unless you track a template outside of Helmet to feed into both title and meta props, there's no way to handle this with the current API. This seems like a logical feature other people may want as well, and I'd like to find a good API that can work to achieve this within Helmet.

PRs are welcome as well. Let me know if you decide to give it a try.

brianespinosa · 2016-02-22T23:37:53Z

@cwelch5 Thanks for the reply. I am just starting to implement Helmet in our project now. I had a feeling that was the case. I'll probably take a crack at this sometime next month after I take care of some higher priority issues within our project. The thing with those social type media tags is there's a bit of overlap. My thought was to add support for a titleSlug and a descriptionSlug at minimum. I'll see what else would be useful once I am done implementing a few more displays. My thought is anything more than those two would end up needing something more complex.

cesarandreu · 2016-03-06T03:33:05Z

Another scenario in which you might also want a shared template is for the canonical url, currently all my views end up repeating the value for the canonical link and the open graph url:

<Helmet
  link={[
    // ...
    { rel: 'canonical', href: CANONICAL }
  ]}
  meta={[
    // ...
    { property: 'og:url', content: CANONICAL }
  ]}
/>

edoardo-bluframe · 2016-03-28T08:03:33Z

Hey you guys - love Helmet!

Already using it in production

How about this:

<Helmet
    title={title}
    mergeOgTags=true
    mergeTwitterTags=true
...
/>

That returns:

<head>
  <title>TITLE</title>
  <meta property="og:title" content="TITLE">
  <meta name="twitter:title" content="TITLE">
...
</head>

Would that work? And the same for other common tags? og:url, og:description/twitter:description, og:image/twitter:image ?

I can have a total go at a PR

Thoughts?

potench · 2016-03-28T15:23:55Z

Not sure that's necessary since you can handle og:tags like this:

<Helmet
    title={someTitle}
    meta={
        {"property": "og:title", "content": someTitle},
        {"property": "twitter:title", "content": someTitle}
    }
/>

edoardo-bluframe · 2016-03-28T15:27:44Z

Oh yeah - I'm totally doing that already

But it's 3 lines of code per same tag!

More error prone

And it's a nice social feature and anybody who needs social integration would have their lives made easier by React Helmet

Don't you think?

potench · 2016-03-28T15:59:45Z

I don't think the addition of these flags would be intuitive or add value to the API since configuration is really easy to understand right now.

Ultimately you're saving 1 or 2 lines of configuration at the cost of an API that would be coupled to specific tags in a specific social network. Hard to grok different merge scenarios say if you have this flag set but still provide og:title? You'd be sacrificing ease-of-use of the API for ease-of-use for 1 very specific scenario.

The better solution would be for Facebook/Twitter to default to the title and description metatags if no og: or twitter: specific ones are specified (if they don't already).

brianespinosa · 2016-04-04T21:25:43Z

@potench I see your point on this regarding making the API more difficult to manage. And I think your proposal to have Facebook/Twitter to default to title/description makes sense. Though og: or twitter: tags are not currently managed by Helmet. It just renders whatever you pass it so we would still need some way to define defaults for title/description... which might lead us back to square one.

edoardo-bluframe · 2016-04-05T14:16:09Z

@potench Actually @brianespinosa brings up a really good point!

How about adding "og" and "twitter" meta capabilities to the API?

This way you can set them more properly than just generic "meta" - which you sometimes end up setting A LOT of in a big chunk of JSX

Does that for you?

doctyper · 2016-04-05T14:50:15Z

@brianespinosa @edoardo-bluframe this use-case could also be abstracted at the project level:

// titleMeta.js
export function titleMeta(title) {
    return {
        title,
        meta: [
            {"property": "og:title", "content": title},
            {"property": "twitter:title", "content": title}
        ]
    }
}

import {titleMeta} from "./titleMeta.js";

<Helmet {...titleMeta("Some Title")} />

rosskevin · 2016-06-01T22:37:58Z

For my use case, I'd like to be able to capture the resolved title (preferably without applying the template) so I can sync it with a material-ui AppBar (header section)

cwelch5 · 2016-06-01T22:44:13Z

@rosskevin You can use the callback you specify with onChangeClientState to see when changes in the DOM are completed.

rosskevin · 2016-06-02T00:12:33Z

@cwelch5 I actually cannot get the title before the title template is applied:

I could parse it, but since this issue is contemplating using title, I'd like to see (a possible value) without the template applied.

msokk · 2017-11-30T12:40:44Z

I have the same problem as @rosskevin, any way to get the raw title from callback?

tmbtech · 2018-11-16T08:35:27Z

Closing - This issues is over a year old. If needed, please feel free to file a new issue.

cwelch5 added enhancement help wanted labels Feb 22, 2016

tmbtech closed this as completed Nov 16, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use `title` and `titleTemplate` in other tags. #102

Use `title` and `titleTemplate` in other tags. #102

brianespinosa commented Feb 18, 2016

cwelch5 commented Feb 22, 2016

brianespinosa commented Feb 22, 2016

cesarandreu commented Mar 6, 2016

edoardo-bluframe commented Mar 28, 2016

potench commented Mar 28, 2016

edoardo-bluframe commented Mar 28, 2016

potench commented Mar 28, 2016

brianespinosa commented Apr 4, 2016

edoardo-bluframe commented Apr 5, 2016

doctyper commented Apr 5, 2016

rosskevin commented Jun 1, 2016

cwelch5 commented Jun 1, 2016

rosskevin commented Jun 2, 2016 •

edited

msokk commented Nov 30, 2017

tmbtech commented Nov 16, 2018

Use title and titleTemplate in other tags. #102

Use title and titleTemplate in other tags. #102

Comments

brianespinosa commented Feb 18, 2016

cwelch5 commented Feb 22, 2016

brianespinosa commented Feb 22, 2016

cesarandreu commented Mar 6, 2016

edoardo-bluframe commented Mar 28, 2016

potench commented Mar 28, 2016

edoardo-bluframe commented Mar 28, 2016

potench commented Mar 28, 2016

brianespinosa commented Apr 4, 2016

edoardo-bluframe commented Apr 5, 2016

doctyper commented Apr 5, 2016

rosskevin commented Jun 1, 2016

cwelch5 commented Jun 1, 2016

rosskevin commented Jun 2, 2016 • edited

msokk commented Nov 30, 2017

tmbtech commented Nov 16, 2018

Use `title` and `titleTemplate` in other tags. #102

Use `title` and `titleTemplate` in other tags. #102

rosskevin commented Jun 2, 2016 •

edited