Gatsbyウェブサイトのメタデータ設定
SEO的にメタデータを設定しておくのは大切なことです。
メタデータを設定することで、Googleが情報収集をしているクローラーに適切な情報を与えることができるようになります。
GoogleChromeのデベロッパーツールには、ウェブサイトの性能やSEOの状態を評価できるLighthouseレポートがついていますので、まずはその評価を確認してみましょう。
まだ何も設定していませんが、そこそこ悪くない数字ですね。ここから問題のありそうな部分を追加していきます。
<title>タグの設定
以下の<title>タグが全てのページにつくように変更していきます。
<title>タイトル</title>lang属性の追加
日本語なので、lang属性には"ja"を設定する必要があります。以下のような形ですね。
<html lang="ja">Canonicalの設定
せっかくなので、canonicalも一緒に設定していきます。これはページのURLをGoogleに正しく伝えるためのメタデータです。
これも<head>の中に配置するメタデータで以下のような形式で使います。
<link rel="canonical" href={url} />React Helmetのインストール
これらの3つの問題を解決するために、React Helmetを利用します。
npm install react-helmet gatsby-plugin-react-helmetgatsby-config.jsにgatsby-plugin-react-helmetを追記します。
plugins: [
{
...中略...
"gatsby-plugin-react-helmet",
...中略...続いて、メタデータの設定をするコンポーネントファイルをsrc/componentsフォルダに作成します。名前はseo.jsとしておきます。
# src/components/seo.js
import * as React from 'react'
import { Helmet } from "react-helmet"
const SEOHead = () => {
return (
<Helmet
htmlAttributes={{
lang: 'ja',
}}
>
<title>タイトル</title>
<meta name="description" content="説明" />
<link rel="canonical" href="https://www.yourdomain.com" />
</Helmet>
)
}
export default SEOHeadあとは、このコンポーネントをレイアウトのコンポーネントの最初に追加してあげれば、全てのページでこのメタデータが追加されます。
ただし、このままだと全てのページで、同じタイトルや説明が記載されることになってしまいます。SEO的には各ページで、それぞれのページに合ったタイトルや説明文を追加したいでしょう。
次はそれらを設定できるようにしていきます。
SEOHeadに各ページから値を渡す
まずはgatsby-config.jsのsiteMetadataにメタデータのデフォルト値を用意しておきましょう。これで設定するのを忘れてしまったとにも、最低限の設定はされるようになります。
module.exports = {
siteMetadata: {
siteUrl: "https://www.yourdomain.com",
title: "GatsbyJSTurorialSite",
lang: "ja",
description: "Gatsbyのチュートリアルページです",
},
...中略...そしてこの情報を、seo.jsのコンポーネント内でGraphQLクエリを使って取得します。コンポーネント内なのでStaticQueryを利用します。
const data = useStaticQuery(graphql`
query{
site {
siteMetadata {
title
lang
description
siteUrl
}
}
}
`)もし、このページ内のメタデータ情報がなかった場合、デフォルトの値を利用するようにします。
const title = props.title ? `${props.title} | ${data.site.siteMetadata.title}` : data.site.siteMetadata.title
const description = props.desc || data.site.siteMetadata.description
const url = props.url ? `${data.site.siteMetadata.siteUrl}${props.url}` : data.site.siteMetadata.siteUrl後はこの値を、Helmet内で利用するだけです。
<Helmet
htmlAttributes={{
lang: data.site.siteMetadata.lang,
}}
>
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={url} />
</Helmet>これで<head>内に<title>や<meta>を追加することができました。
最後に、各ページからこのコンポーネントに値を渡すように変更します。といってもいちいち各ページに設定するのは面倒なので、レイアウトファイルにこのSEOHeadを配置します。
const Layout = ({ title, desc, url, children }) => {
return (
<>
<SEOHead title={title} desc={desc} url={url}/>
...中略...後は、Layoutを利用する際に、これらの値を渡してあげればいいわけです。
const QuestionPage = ( {location}) => {
return (
<Layout title="お問合せ" desc="好かれるマーケティング研究室の問い合わせページ" url={location.pathname}>
...中略...ページを表示してみて、ソースコードを確認すると、、、
<html>内にlang属性がついており、<title>にタイトルが設定されています。
<link>にはurlが表示されており、<meta>には詳細が記載されています。
Googleのクローラー設定
現時点では、Googleにこのウェブサイトをクロールしないような設定になっています。
これを解消するために、robot.txtというファイルを作成します。robot.txtはGoogleなどのクローラーに対して、どのように情報してもいいかを指定するファイルです。
Gatsbyではこれもプラグインを利用することで簡単に作れます。
サイトマップとrobots.txtを追加する
サイトマップとは、ウェブサイトにあるページの一覧のようなものです。これがあることで、クローラーがウェブサイト内を探しやすくなります。
Gatsbyでサイトマップを作るには、gatsby-plugin-sitemapをインストールします。robots.txtの設定もプラグインで可能です。gatsby-plugin-robots-txtをインストールして初期設定を行いましょう。
npm install gatsby-plugin-sitemap gatsby-plugin-robots-txtこれらのプラグインをgatsby-config.jsに追加します。
siteMetadata: {
siteUrl: "https://gatsbyjstutorialmain19416.gatsbyjs.io",
},
plugins: [
{
...中略...
`gatsby-plugin-sitemap`,
'gatsby-plugin-robots-txt',
...中略...この２つのプラグインを追加することで、ビルドした際に、2つのファイルが作成されます。/sitemap/sitemap-index.xmlとrobots.txtです。
これらは開発環境では作成されないので、以下のコマンドを実行して、publicフォルダ内を見るか、Gatsby Cloud上で確認しましょう。
npm run build実装結果
https://gatsbyjstutorialmain19416.gatsbyjs.io/robots.txt
https://gatsbyjstutorialmain19416.gatsbyjs.io/sitemap/sitemap-index.xml
これらの対応を行なった結果、Lighthouseの評価を再度確認してみましょう。ほぼほぼ満点に近づきました！
GatsbyでPWA対応
最後にProgressive Web Appというのもありますね。これは何なのでしょうか？
Progressive Web Appsというのはウェブサイトをネイティブアプリと同じような形で利用することができるようになります。これはスマートフォンで、ウェブサイトをアプリのように使えるということです。
これを行うためには、マニフェストファイルの追加と、ServiceWorkerでオフライン対応をすることが必要になります。
Gatsbyにはこれを行うためのプラグインがあるので簡単です。まずはgatsby-plugin-manifestとgatsby-plugin-offlineをインストールします。
npm install gatsby-plugin-manifest gatsby-plugin-offlineインストールしてgatsby-config.jsで設定を行います。
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `好かれるマーケティング研究室`,
short_name: `好マ研`,
start_url: `/`,
background_color: `#ffffff`,
theme_color: `#feb2b2`,
display: `standalone`,
icon: `src/images/homepage/site_icon.png`,
},
},
`gatsby-plugin-offline`,gatsby-plugin-offlineより先にgatsby-plugin-manifestを書くことに注意してください。
PWAのインストール
ウェブサイトにアクセスして、アドレスバーの右側に以下のようなアイコンがつくようになりました。
この左側のアイコンをクリックすると、ウェブサイトをインストールできるようになっています。実際にインストールしてみましょう。
アプリが起動して自由に動かせるようになりました。
Lighthouseの評価がなぜかうまくいきませんが、アプリはちゃんと動いているのでよしとします。
ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ
この記事が気に入ったらサポートをしてみませんか？