标签：javascript reactjs facebook-opengraph gatsby react-helmet

我已经使用以下代码在React Helmet中为我的根路由设置了社交共享图像：

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

我有一个单独的路线,或盖茨比的“页面”,我想设置另一个og：图像值为.由于没有任何内容将og：image链接到og：url,如何在我的页面上指定自定义og：url和og：image链接？

解决方法:

选项1：您可以在主布局文件中进行路径嗅探,然后将两个道具(一个用于图像,一个用于路径)传递到任何组件控制元数据.

在此示例中,我的元数据组件被命名为元数据,但无论您的组件结构是什么,它都应该有意义：

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

// Get your custom gatsby components - assuming a pretty basic layout here
import Metadata from '../components/Metadata'
import Header from '../components/Header'
import Footer from '../components/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>
      )
    }
  }
}

选项2仅使用React Helmet,它与盖茨比开箱即用(至少从v2.x开始).在此设置中,您可以设置使用头盔的元数据组件,然后轻松覆盖Gatsby页面中的这些预设.头盔只会覆盖您指定的元数据项,如果不需要调整则保留其他元数据项.只需导入/调用页面/组件中的头盔即可轻松覆盖：

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.org' />
      <meta property='og:updated_time' content='2019-01-31' />
    </Helmet>
  </div>
)

export default Metadata

页面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 coming 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>
    )
  }
}

标签：javascript,reactjs,facebook-opengraph,gatsby,react-helmet
来源： https://codeday.me/bug/20190701/1347128.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。