admin管理员组文章数量:1331083
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?
1 Answer
Reset to default 6Option 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
版权声明:本文标题:javascript - Using Gatsby.js, how do I add a route-specific og:image meta tag? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742261461a2442593.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论