Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

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

like image 550
Kyle Fujisawa Avatar asked May 03 '18 18:05

Kyle Fujisawa


People also ask

How do you add meta tags to gatsby?

Add siteMetadataThe siteMetadata section of the gatsby-config file is available in the GraphQL datalayer. It's considered best practice to place your site metadata there. The siteUrl should be the URL of your deployed target (e.g. production domain) so that later metatags can point to absolute URLs.

Is gatsby SEO friendly?

Gatsby gives you full control over the website's content and structure, and consequently, over the SEO of this website. You can add metadata like page titles, meta descriptions and alt text, which helps search engines to understand the content on your website and when to display your site in search results.

What is helmet in gatsby?

React Helmet is a component which lets you control your document head using their React component. With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds.


1 Answers

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.

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

// 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). In this setup, you can set a metadata component 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/component 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.org' />
      <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 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>
    )
  }
}
like image 91
serraosays Avatar answered Oct 19 '22 13:10

serraosays