今回もGatsby.jsについての記事を書いていこうと思います。
今回の内容は、Graphqlからデータを取得しそれをメタタグとして、タイトルやらディスクリプションを設定してSEO対策しようって話です。
早速ですが説明していきます。
パッケージのインストール
まずは必要なパッケージをインストールしてみましょう。
npm i gatsby-plugin-react-helmet react-helmet
gatsby-configの設定
そしたら以下のようにgatsby-config.jsを設定。
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
],
siteMetadata: {
title: "test",
description: "テストサイトです"
},
}
コンポーネントの作成
src\components\SEO.jsxを作成して以下のようにコンポーネントを作成。
import { graphql, useStaticQuery } from 'gatsby'
import React from 'react'
import { Helmet } from 'react-helmet'
const SEO = () => {
const { site } = useStaticQuery(query)
return (
<>
<Helmet>
<html lang="ja" />
<title>{site.siteMetadata.title}</title>
<meta name="description" content={site.siteMetadata.description} />
</Helmet>
</>
)
}
export const query = graphql`
query {
site {
siteMetadata {
title
description
}
}
}
`
export default SEO
あとはこれをLayoutの中身に呼び出してあげましょう！
Layout.js
import React from 'react'
import { SEO } from '@/SEO.js'
const Layout = (props) => {
return (
<>
<SEO />
// 省略
</>
)
}
export default Layout
これで各ページごとにタイトル、ディスクリプションの設定を行うことでSEO対策ができます！
意外と簡単。
Thank you for reading