[英]Using Gatsby.js, how do I add a route-specific og:image meta tag?
I have already set up a social sharing image for my root route in React Helmet with the following code: 我已经使用以下代码在React Helmet中为我的根路由设置了社交共享图像:
<meta property="og:url" content="https://foo.com" />
<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. 我有一个单独的路线,或盖茨比的“页面”,我想设置另一个
og:image
值为。 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? 由于没有任何内容将
og:image
链接到og:url
,如何在我的页面上指定自定义og:url
和og:image
链接?
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 component controls your metadata. 选项1:您可以在主
layout
文件中进行路径嗅探,然后将两个道具(一个用于图像,一个用于路径)传递到任何组件控制元数据。
In this example, my metadata component is named metadata
but it should make sense whatever your component structure really is: 在此示例中,我的元数据组件被命名为
metadata
但无论您的组件结构是什么,它都应该有意义:
// 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>
)
}
}
}
Option 2 is just using React Helmet , which is included with Gatsby out of the box (as of v2.x at least). 选项2只使用React Helmet ,它与Gatsby开箱即用(至少从v2.x开始)。 In this setup, you can set a metadata component that utilizes Helmet and then easily override those presets down in your Gatsby pages.
在此设置中,您可以设置使用头盔的元数据组件,然后轻松覆盖Gatsby页面中的这些预设。 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/component for easy overrides: 只需导入/调用页面/组件中的
Helmet
轻松覆盖:
metadata.js: 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
page-example.js: 页面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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.