🕌
GatsbyJsでSEO対策するなら「gatsby-plugin-next-seo」
こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。
今回は、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にも足を運んでみてください!
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion