ちょっと株式会社 社員ブログ
BlogGatsbyJsでSEO対策するなら「gatsby-plugin-next-seo」

SHARE
こんにちわ、ちょっと株式会社 エンジニアのたっちーです。
今回は、GatsbyJSを利用する上でおすすめのプラグインを紹介したいと思います。
それは、「gatsby-plugin-next-seo」です!
このプラグインは、next-seo を元に作られたプラグインなのですが、このパッケージがとても優秀なんです!!
元々、Next.jsで利用するのを目的として作成されたものなのですが、このプラグインによりGatsbyJSでも利用できるようになったので個人的にはとても感極まります。
基本の使い方
それでは、このプラグインの導入方法について少し、解説します。
インストール
メインのプラグインとその依存関係を追加します。
yarn add gatsby-plugin-next-seo react-helmet-async
GatsbyConfigにプラグインを追加する
gatsby.config.js(ts)にプラグインを追加します。
module.exports {
// ...
plugins: [
// ...
'gatsby-plugin-next-seo'
],
}
デフォルト設定をする場合
optionsに値を渡してあげることで、ページ全体のデフォルト値を設定することができます。
詳しい値の内容は、こちらを参照ください
module.exports {
plugins: [
{
resolve: 'gatsby-plugin-next-seo',
options: {
openGraph: {
type: 'website',
locale: 'en_IE',
url: 'https://www.url.ie/',
site_name: 'SiteName',
},
twitter: {
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
},
},
},
],
}
ページにSEO情報を追加する
各ページ毎にtitle
やdescription
などを設定する際はGatsbySeoタグを用いて設定していきます。
import React from 'react';
import { GatsbySeo } from 'gatsby-plugin-next-seo';
export default () => (
<>
<GatsbySeo
title='Simple Usage Example'
description='A short description goes here.'
/>
<p>Simple Usage</p>
</>
);
以上で基本的な利用方法の解説になります。
今まで、SEOコンポーネントを自作していたりとしていましたが、こういったプラグインで、解決できることが増えていくといいなと思ってます。
基本的な使い方以外にも構造化マークアップのためのタグなど、このプラグインやnext-seoには、SEOに関する様々なサポートが含まれています。
是非、公式のREADMEにも足を運んでみてください!
1995年生まれ。2018年にweb業界に足を突っ込んだ同人イラストレーター。
現在ではフロントエンド領域を生業としながら幅広くwebをカバーしてます。
コーヒーとジャパンサブカルと技術のお話が大好きです。
ちょっと社では「たっちー」の愛称で呼ばれ、SNSでは「hanetsuki」と言う名前で活動しています。