chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • GatsbyJsでSEO対策するなら「gatsby-plugin-next-seo」

GatsbyJsでSEO対策するなら「gatsby-plugin-next-seo」

ナレッジ・ノウハウ
GatsbyJsで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情報を追加する

各ページ毎にtitledescriptionなどを設定する際は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」と言う名前で活動しています。

関連記事

Copyright © 2022, chot inc.