javascript - Using Gatsby.js, how do I add a route-specific og:image meta tag? - Stack Overflow

admin管理员组

文章数量:1332649

I have already set up a social sharing image for my root route in React Helmet with the following code:

<meta property="og:url" content="" />
<meta property="og:image" content="" />

I have a separate route, or 'page' in Gatsby, that I want to set another og:image value for. Since there isn't anything linking the og:image to the og:url, how do I specify custom og:url and og:image links on my pages?

I have already set up a social sharing image for my root route in React Helmet with the following code:

<meta property="og:url" content="https://foo." />
<meta property="og:image" content="https://myhostedimg.png" />

I have a separate route, or 'page' in Gatsby, that I want to set another og:image value for. Since there isn't anything linking the og:image to the og:url, how do I specify custom og:url and og:image links on my pages?

• javascript
• reactjs
• facebook-opengraph
• gatsby
• react-helmet

Share Follow edited Mar 18, 2019 at 23:29 serraosays 7,92933 gold badges3838 silver badges6868 bronze badges asked May 3, 2018 at 18:34 Kyle FujisawaKyle Fujisawa 7111 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Option 1: You can do route sniffing in your main layout file and then pass two props (one for image, one for route) into whatever ponent controls your metadata.

In this example, my metadata ponent is named metadata but it should make sense whatever your ponent structure really is:

// Setup react stuff
import React from 'react'
import PropTypes from 'prop-types'

// Get your custom gatsby ponents - assuming a pretty basic layout here
import Metadata from '../ponents/Metadata'
import Header from '../ponents/Header'
import Footer from '../ponents/Footer'

// Get images you want, also assuming you have these in a static folder and you don't need to use `gatsby-image` to get them
import ogImgOne from './og-img-one.png'
import ogImgTwo from './og-img-two.png'

// Setup template wrapper
export default class TemplateWrapper extends React.Component {

  // We want to render different base templates depending on the path the user hits
  render() {

    // Page 1
    if (this.props.location.pathname === "/") {
      return (
        <div className="page1">
          <Header />
          <Metadata ogImgSrc={ ogImgOne } 
                    ogUrl={ this.props.location.pathname } />
          <div>
            { this.props.children() }
          </div>
          <Footer />
        </div>
      )
    } 

    // Page 2
    if (this.props.location.pathname === "/page-2/") {
      return (
        <div className="page2">
          <Metadata ogImgSrc={ ogImgTwo } 
                    ogUrl={ this.props.location.pathname } />
          <Header />
          <div>
            { this.props.children() }
          </div>
          <Footer />
        </div>
      )
    }
  }
}

Option 2 is just using React Helmet, which is included with Gatsby out of the box (as of v2.x at least). In this setup, you can set a metadata ponent that utilizes Helmet and then easily override those presets down in your Gatsby pages. Helmet will only override the metadata items you indicate, leaving the others if they don't need adjustment. Just import/call Helmet in your page/ponent for easy overrides:

metadata.js:

import React from 'react'
import Helmet from 'react-helmet'

import icon from '../../images/logo.png'
import socialBanner from '../../images/PFB_2018_social.jpg'

const Metadata = () => (
  <div>
    <Helmet>
      <title>Whatever</title>

      <meta property='og:image' content={ socialBanner } />
      <meta property='og:locale' content='en_US' />
      <meta property='og:type' content='website' />
      <meta property='og:title' content='Whatever' />
      <meta property='og:description' content="Description" />
      <meta property='og:url' content='https://example' />
      <meta property='og:updated_time' content='2019-01-31' />
    </Helmet>
  </div>
)

export default Metadata

page-example.js:

import React from 'react'
import Helmet from 'react-helmet'

export default class Example extends React.Component {
  render() {
    return (
      <div>

            {/* Custom metadata - assuming something ing from Node.js in pageContext prop */}
            <Helmet>
              <title>Override here</title>

              { /* Example from pageContext prop, gatsby-node.js */}
              <meta property='og:title' content={ `${this.props.pageContext.title} | Your brand` } />

              { /* Image from gatsby-node.js example, using gatsby-image for override */}
              <meta property='og:image' content={ this.props.pageContext.images[0].localFile.childImageSharp.fluid.src } />

              { /* Get path from location string */}
              <meta property='og:url' content={ this.props.location.href } />

            </Helmet>
      </div>
    )
  }
}

本文标签： javascriptUsing Gatsbyjshow do I add a routespecific ogimage meta tagStack Overflow