React-helmet: Use `title` and `titleTemplate` in other tags.

Created on 18 Feb 2016 · 15Comments · Source: nfl/react-helmet

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?

enhancement help wanted

Source

brianespinosa

👍15

Most helpful comment

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?

edoardo-bluframe on 28 Mar 2016

👍2

All 15 comments

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.

cwelch5 on 22 Feb 2016

@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.

brianespinosa on 23 Feb 2016

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 }
  ]}
/>

cesarandreu on 6 Mar 2016

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?

edoardo-bluframe on 28 Mar 2016

👍2

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}
    }
/>

potench on 28 Mar 2016

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?

edoardo-bluframe on 28 Mar 2016

👍1

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).

potench on 28 Mar 2016

@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.

brianespinosa on 4 Apr 2016

@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?

edoardo-bluframe on 5 Apr 2016

@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")} />

doctyper on 5 Apr 2016

👍1

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)