Gatsby: SEO対策（最低限やっておくこと）
最低限必要なものを備忘録です。
サイトマップ作成
方法
まずプラグインをインストール
$ yarn add gatsby-plugin-sitemap
gatsby-config.jsで以下のように編集。
module.exports = {
siteMetadata: {
title: `exampleサイト`,
description: `説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明`,
author: `T.Walker`,
siteUrl: `https://example.site`, // 追加
},
plugins: [
`gatsby-plugin-sitemap`, // 追加
`gatsby-plugin-twitter`,
`gatsby-transformer-json`,
・・・略・・・
これだけで良い。なんと簡単な。試しにビルドしてみると…
$ gatsby build
publicフォルダにsitemap.xmlが生成されてて、動的ページまですべて羅列されている。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url> <loc>https://example.site/medias-article/10</loc> <changefreq>daily</changefreq> <priority>0.7</priority> </url>
<url> <loc>https://example.site/medias-article/9</loc> <changefreq>daily</changefreq> <priority>0.7</priority> </url>
<url> <loc>https://example.site/medias-article/8</loc> <changefreq>daily</changefreq> <priority>0.7</priority>
・・・略・・・
</urlset>
URL正規化
URL正規化・canonical属性とは？
のための対処。
方法
gatsby-plugin-canonical-urlsをインストール
$ yarn add gatsby-plugin-canonical-urls
gatsby-config.jsで
module.exports = {
siteMetadata: {
title: `exampleサイト`,
description: `説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明`,
author: `T.Walker`,
siteUrl: `https://example.site`,
},
plugins: [
{
resolve: `gatsby-plugin-canonical-urls`, // 追加
options: {
siteUrl: `https://example.site`,
stripQueryString: true,
},
},
・・・略・・・
これだけですべてのHTMLページに以下のようなタグが＜head＞＜/head＞内に挿入される。
<link rel="canonical" href="https://example.site/about/" data-baseprotocol="https:" data-basehost="example.site/" />
動的ページ全てにも。すごいな。
robot.txt生成
検索エンジン最適化ファイル。こんな感じのファイル。
User-agent: *
Disallow: /admin/
Allow: /*
# allow google image bot to search all images
User-agent: Googlebot-Image
Disallow:
Allow: /*
# allow Google adsense bot on entire site
User-agent: Mediapartners-Google*
Disallow:
Allow: /*
User-agent: Twitterbot
Disallow:
Allow: /*
Sitemap: https://example.site/sitemap.xml
###方法
gatsby-plugin-robots-txtをインストール
$ yarn add gatsby-plugin-robots-txt
gatsby-config.jsで
module.exports = {
siteMetadata: {
title: `exampleサイト`,
description: `説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明`,
author: `T.Walker`,
siteUrl: `https://example.site`,
},
plugins: [
{
resolve: 'gatsby-plugin-robots-txt', // 追加
options: {
host: 'https://www.example.site',
sitemap: 'https://www.example.site/sitemap.xml',
policy: [{ userAgent: '*', allow: '/' }]
}
},
・・・略・・・
]
試しにビルドしてみると、publicフォルダにrobot.txtあった。
User-agent: *
Allow: /
Sitemap: https://example.site/sitemap.xml
Host: https://example.site
Disallowオプションなどもある。公式サイト参照。
gatsby-plugin-robots-txt
マニフェスト設定
アプリをPWA対応にする（manifest.webmanifestを生成する）ため。
マニフェストコードとアイコンの作成方法
gatsby-plugin-manifestをインストール。default-starterには最初から入ってる。
まず512 x 512 サイズのアイコンを作る。
例えばこんな。
Visioで作成。VisioのエクスポートからPNGで保存。その際白色を透過に。
Manifest Generator（https://app-manifest.firebaseapp.com/ ）で各サイズのアイコンとmanifest.jsonを生成。
例えば以下の設定でGenerate .ZIPボタンをクリックすると自動生成してくれて、ZIPファイルでダウンロードできる。
マニフェストコードとアイコンの設置方法
アイコンは全部でサイズ別に８個。
プロジェクトルートにstaticフォルダを作成（srcの直下ではない。注意！）。その下にiconsフォルダを作成。そこにコピー。
そしてgatsby-config-jsで以下のように。
・・・略・・・
resolve: `gatsby-plugin-manifest`,
options: {
name: `Example Site`,
short_name: `hoge`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`,
icons: [
{
src: `icons/icon-72x72.png`,
sizes: `72x72`,
type: `image/png`
},
{
src: `icons/icon-96x96.png`,
sizes: `96x96`,
type: `image/png`
},
{
src: `icons/icon-128x128.png`,
sizes: `128x128`,
type: `image/png`
},
{
src: `icons/icon-144x144.png`,
sizes: `144x144`,
type: `image/png`
},
{
src: `icons/icon-152x152.png`,
sizes: `152x152`,
type: `image/png`
},
{
src: `icons/icon-192x192.png`,
sizes: `192x192`,
type: `image/png`
},
{
src: `icons/icon-384x384.png`,
sizes: `384x384`,
type: `image/png`
},
{
src: `icons/icon-512x512.png`,
sizes: `512x512`,
type: `image/png`
},
]
},
・・・略・・・
いちおう公式マニュアルのとおりにバックティック（`）を使った。ダウンロードしたmanifest.jsonは以下のように普通にダブルクォーテーションを使ってるがこれでも良いのかわからない。
・・・略・・・
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
・・・略・・
],
動作確認はプロダクションサイトにアップしないとできないが（参考：GatsbyでPWA対応）いちおうgatsby buildとgatsby serveして、http://localhost:9000 でもNameとShort Name、およびアイコンの割り当ては確認できる。
##（必要なら）Google Analytics
gatsby-plugin-google-analyticsをインストール
$ yarn add gatsby-plugin-google-analytics
gatsby-config.jsを編集
// gatsby-config.js
module.exports = {
},
plugins: [
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: "UA-xxxxxxxx-x",
},
},
],
}
トラックコード"UA-xxxxxxxx-x"は、アナリティクス管理画面（https://analytics.google.com/analytics/） 左下の歯車アイコンから、
プロパティ設定
トラッキングコード
ここに。
本の宣伝
Gatsbyバージョン５>>>>改訂２版
前編の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と後編の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ https://yah-space.work
静的サイトジェネレーターGatsby最新バージョン５の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《Slicy API》《Script API》《Head API》を紹介、実装方法も。《Gatsby Functions》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！
Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）
最新Gatsby５とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《サイト内検索機能》をGatsbyバージョン４からの新機能《Gatsby Functions》と《microCMSのqパラメータ》で実装。また、SEOコンポーネントをカスタマイズしてmicroCMS APIをツイッターカードに表示させるOGPタグ実装方法も解説。
Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）
参考：
[gatsby-plugin-sitemap]
(https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/)
Gatsbyプラグイン45選
gatsby-plugin-canonical-urls
GatsbyでPWA対応