benjifriedman/gatsbyHelmetFix.js

PaulieScanlon · 2022-10-09T15:03:54Z

Hey, try this.

Any file that is exported from src/pages is considered a Page in Gatsby.

Any Gatsby Page can export the Head API. The Head API receives data the same was as the Page does. E.g on the data prop.

You can pass any data you want on to the <Seo /> component, either by querying data using GraphQL which then becomes availbe on the data prop, or by "hard-coding" the props.

The <Seo /> component returns normal HTML <meta /> elements. You can see the available options for meta data using something like https://metatags.io/.

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title: 'The site name',
    description: 'The site description'
  }
};

// index.js
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import Seo from '../components/seo.js';

const Page = ({ data }) => {
  console.log(data);
  return <Layout>homepage content</Layout>;
};

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`;

export const Head = ({
  data,
  data: {
    site: {
      siteMetadata: { title, description }
    }
  }
}) => {
  console.log(data);

  return <Seo title={title} description={description} url={''} image={''} tags={['']} />;
};

export default Page;

// seo.js
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

const Seo = ({ type, title, description, url, image, tags }) => {
  return (
    <Fragment>
      <title>{title}</title>
      <link rel="canonical" href={url} />
      <meta name="description" content={description} />
      <meta name="image" content={image} />
      <meta name="image:alt" content={title} />
      <meta name="keywords" content={tags} />

      {/* Facebook */}
      <meta property="og:type" content={type} />
      <meta property="og:title" content={title} />
      <meta property="og:url" content={url} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:image:alt" content={description} />

      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:url" content={url} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
      <meta name="twitter:image:alt" content={description} />
    </Fragment>
  );
};

Seo.propTypes = {
  /** The type of meta - useful for Facebook */
  type: PropTypes.oneOf(['website', 'article']),
  /** The site title */
  title: PropTypes.string.isRequired,
  /** The site description */
  description: PropTypes.string.isRequired,
  /** The slug or full site URL */
  url: PropTypes.string.isRequired,
  /** Image url to use for opengraph image */
  image: PropTypes.string,
  /** Keywords to use in meta keywords */
  tags: PropTypes.arrayOf(PropTypes.string)
};

Seo.defaultProps = {
  type: 'website'
};

export default Seo;

benjifriedman · 2022-11-14T17:49:11Z

Just reviewing this again... so every page needs to have an export const Head now?

PaulieScanlon · 2022-11-14T20:27:26Z

@benjifriedman If you'd like to add SEO / metadata to the <head /> in a page, then yes.


	//index.js

	import React from "react"
	import { Link } from "gatsby"
	import Layout from "../components/layout"
	import Seo from "../components/seo.js"

	const IndexPage = () => {
	return (
	<Layout>
	<Seo title="Home" />
	//homepage content
	</Layout>
	)
	}

	export default IndexPage




	//seo.js

	import React from "react"
	import { Helmet } from "react-helmet"

	import { useStaticQuery, graphql } from "gatsby"

	const Seo = ({ title }) => {
	const data = useStaticQuery(graphql`
	query {
	site {
	siteMetadata {
	title
	}
	}
	}
	`)
	return <Helmet title={`${title} \| ${data.site.siteMetadata.title}`} />
	}

	export default Seo

benjifriedman/gatsbyHelmetFix.js

PaulieScanlon commented Oct 9, 2022 •

edited

Loading

benjifriedman commented Nov 14, 2022

PaulieScanlon commented Nov 14, 2022 •

edited

Loading

benjifriedman/gatsbyHelmetFix.js

PaulieScanlon commented Oct 9, 2022 • edited Loading

benjifriedman commented Nov 14, 2022

PaulieScanlon commented Nov 14, 2022 • edited Loading

PaulieScanlon commented Oct 9, 2022 •

edited

Loading

PaulieScanlon commented Nov 14, 2022 •

edited

Loading