VuepressにSEO対策を実施します

2021年10月4日 10:56

VuepressのSEO関係の設定を実装します．本稿では，Google Search Console・サイトマップ・Googleアナリティクス・SEO・RSSの設定を実施します．

こちらでも閲覧できますし，まだnoteにしていない記事もあります．https://www.hamlet-engineer.com/posts/vuepress_0004.html
有料枠設定にしていますが，youtubeの投げ銭的な物として，お考えください．

ファイル構成

ファイル構成は以下通りです．

hamlet_engineer
├── src
│   ├── _posts
│   │   └── 20190803.md
│   │   └── 20210118.md
│   ├── custom-pages
│   │   └── index.md
│   └── .vuepress
│       ├── public
│       │    ├── img
│       │    │     └── hirasu.jpg
│       │    └── robots.txt <-新規
│       ├── styles
│       │    └── index.styl
│       ├── components
│       │    └── CustomLayout.vue
│       └── config.js
├── package.json
├── yarn.lock
├── /.git
└── docs
   ├── /assets
   ├── /img
   ├── /posts
   ├── 404.html
   ├── index.html
   ├── /custom-pages
   ├── sitemap.xml <-新規(自動生成)
   └── robots.txt <-新規(自動生成)

Google Search Console

Google Search Consoleとは

Google Search Consoleは、Webサイトの掲載順位を測定したり、サイト内部の問題をいち早く把握することができるサービスです．

Google Search Consoleの登録

Googleサーチコンソールの登録・設定方法を参考に，Google Search Consoleに登録してサイト認証タグを確認します．

config.jsの設定

VuePressに GoogleSearchConsole のメタタグを埋め込むを参考に追記します．

// サイト認証タグ: <meta name="google-site-verification" content="XXXXXXX" />
module.exports = {
 head: [['meta', { name: 'google-site-verification', content: 'XXXXXXX' }]]
}

vuepress-plugin-sitemap

以下のコードでインストールできます．

yarn add vuepress-plugin-sitemap

vuepress-plugin-sitemapとは

vuepress-plugin-sitemapはサイトマップの設定をできるプラグインです．
調べた結果，検索されやすいように自分のHPの案内図をGoogle様に送るという理解です．
下記の引用元から，サイトマップとはクローラーがGoogleに報告しやすいように自分のHPの案内図という理解です．

サイトマップとはサイト上の各ファイルの情報/関係を伝えるファイルです．
Google などの検索エンジンはサイトマップを読み込むことで、より高度なクロールを行います．
引用元：VuePress でサイトマップを設定する(opens new window)

サイトマップとはサイトにどのようなコンテンツがあるのかを一覧でまとめてみれるページのことだ。
サイトマップにはユーザーや検索エンジンにサイトの内容をわかりやすく伝える役割がある。
引用元：SEO効果アップ！サイトマップの仕組みと理想的な作成方法を紹介

下記の引用元から，クロールとは自分のサイトを調べ尽くしてくれるロボット(クローラー)を招待して，Googleに検索されやすいように報告してもらえるようにするという理解です．

クロールとは、“crawler（クローラー）と呼ばれるインターネットの上にあるWeb サイトやホームページの情報をかき集めるロボットが、自分のサイトに来ること”です。
引用元：Google検索の仕組み「クロール」と「インデックス」の違い(opens new window)

config.jsの設定

vuepress-plugin-sitemap でサイトマップ自動生成 (opens new window)を参考にしています．

//.vuepress/config.jsに追記してください 
module.exports = {
   // プラグイン
   plugins: {
       // サイトマップ(案内図)
       //hostnameは自身のサイトのトップページです．
       'sitemap': {
         hostname: 'https://hirasu1231.github.io/hamlet_engineer/',
         //excludeはいらんところを案内図からはずす
         exclude: ["/404.html"],
         //dateFormatterは更新の度にサイトマップも更新
         dateFormatter: val => {
             return new Date().toISOString()
           }
       },
     }
}

robots.txt

src/.vuepress/public/robots.txtを設置することで、クローラーを制御できます．

# src/.vuepress/public/robots.txt
User-agent : *
Disallow :
Sitemap : https://hirasu1231.github.io/hamlet_engineer/sitemap.xml

Google Search Consoleへの登録

上記の設定をした上でビルドすると，docs/sitemap.xmlとdocs/robots.txtが生成されます．

yarn build

そして，VuePress でサイトマップを設定する (opens new window)を参考にGoogle Search Console (opens new window)にサイトマップを登録します．

plugin-google-analytics

以下のコードでインストールできます．

yarn add -D @vuepress/plugin-google-analytics

plugin-google-analyticsとは

Google Analyticsのセットアップを行うことができるようになります．
最新のGA4で発行されるG-00000000のIDは未対応のため，必ずUA-00000000-0も発行されるように，Googleアナリティクスの登録・設置方法【2021年版】 (opens new window)を参考に登録してください．

config.jsの設定

【VuePress】Google Analyticsを導入する (opens new window)を参考にしています．

module.exports = {
   plugins: {
       // Google Analytics
       // gaは．Google Analytics登録時に発行されるトラッキングID
       // 最新のGA4で発行されるG-00000000のIDは未対応
       '@vuepress/google-analytics': {
           'ga': 'UA-00000000-0'
       }
   },
}

vuepress-plugin-seo

本章については，参考サイト，ドキュメントを見てもOGP画像の設定が実装できなかったので，また後日挑戦します．
プラグインは以下のコードでインストールできます．

yarn add -D vuepress-plugin-seo

vuepress-plugin-seoとは

metaタグという記事コンテンツの情報を検索エンジンやブラウザに伝えるための情報を生成してくれるプラグインと、SNSでリンクした際などにプレビュー表示を自動で生成してくれるプラグインです．

config.jsの設定

VuePressでOGP自動設定 (seoプラグイン＆placehold.jp編) (opens new window)を参考にしています．

module.exports = {
   plugins: {
     // seo(metaタグ)
     'seo': {
       // descriptionは検索時に表示されるサイトの説明
       description: ($page, $site) => $page.frontmatter.description || ($page.excerpt && $page.excerpt.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, "")) || $site.description || "",
       // titleは検索時に表示されるサイトのタイトル
       title: ($page, $site) => $page.title || $site.title,
       // imageはSNSでリンクした際などにプレビュー表示される画像
       twitterCard: _ => 'summary',
       // 画像が反映されなかったので，ここではしません
       // image: ($page, $site) => $page.frontmatter.image && (($site.themeConfig.domain || '') + $page.frontmatter.image) || 'https://placehold.jp/40//fff/600x315.png?css=%7B"padding"%3A"%200%2080px"%2C"background-image"%3A"%20url(https%3A%2F%2Fplacehold.jp%2F057%2F333%2F130x40.png%3Ftext%3Dhamlet_engineer)"%7D&text='+encodeURIComponent($page.title||$site.title),
     },
   },
   themeConfig: {
     domain: 'https://hirasu1231.github.io/hamlet_engineer',
     }
   }

僕は参考サイトの通りでやってもできませんでしたが，一応下記にまとめました．

# 1.プレビュー表示の背景となる画像の設定
# 背景色・文字色はRGBの16進数表記
# http://placehold.jp/{背景色}/{文字色}/{幅}x{高さ}.png?text={テキスト}
https://placehold.jp/057/333/150x40.png?text=Hamlet_engineer

# 2.プレビュー表示の画像(1.を使う)
# https://placehold.jp/{文字の大きさ}//{文字色}/{幅}x{高さ}.png?css={%22padding%22:%22%200%2080px%22,%22background-image%22:%22%20url({背景画像のURL})%22}&text={テキスト}
https://placehold.jp/40//fff/600x315.png?css=%7B"padding"%3A"%200%2080px"%2C"background-image"%3A"%20url(https%3A%2F%2Fplacehold.jp%2F057%2F333%2F130x40.png%3Ftext%3Dhamlet_engineer)"%7D&text=600x315ピクセルの画像として、ページのタイトルを使って画像生成

vuepress-plugin-feed

以下のコードでインストールできます．

yarn add -D vuepress-plugin-feed

vuepress-plugin-feedとは

サイトの見出しや要約・更新情報などを記述するRSSというファイルを生成するプラグインです．

config.jsの設定

VuePressのブログテーマ使ってみた。 (opens new window)を参考にしています．

module.exports = {
 themeConfig: {
   // RSSの設置
   feed: {
     canonical_base: 'https://hirasu1231.github.io/hamlet_engineer',
   }
 }
}

まとめ

vuepressのSEOの設定を実施しました．思ったよりもかなり時間がかかりました．
OPGについては，また後日挑戦します．

参考サイト

下記のサイトの文末で確認してください．
https://www.hamlet-engineer.com/posts/vuepress_0004.html

ここから先は

0字

¥ 100

ログイン

この記事が気に入ったらサポートをしてみませんか？