VuepressにSEO対策を実施します

Vuepress
/
Vuepress SEO

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

全国630店舗以上！もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】

# ファイル構成

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

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サーチコンソールの登録・設定方法 (opens new window)を参考に，Google Search Consoleに登録してサイト認証タグを確認します．

# config.jsの設定

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

// サイト認証タグ: <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効果アップ！サイトマップの仕組みと理想的な作成方法を紹介 (opens new window)

下記の引用元から，クロールとは自分のサイトを調べ尽くしてくれるロボット(クローラー)を招待して，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については，また後日挑戦します．


# 参考サイト

Vuepress で ブログを作る (opens new window)

# 参考サイト(Google Search Console)

Google Search Console (opens new window)
VuePressに GoogleSearchConsole のメタタグを埋め込む (opens new window)
新規サイトが検索に出てこない！まずやるべき7つのSEO対策 (opens new window)
Googleサーチコンソールの登録・設定方法 (opens new window)

# 参考サイト(vuepress-plugin-sitemap)

vuepress-plugin-sitemap (opens new window)
VuePress でサイトマップを設定する (opens new window)
Google検索の仕組み「クロール」と「インデックス」の違い (opens new window)
SEO効果アップ！サイトマップの仕組みと理想的な作成方法を紹介 (opens new window)
【VuePress・SEO】サイトマップの作り方【2つ送るだけ】 (opens new window)
vuepress-plugin-sitemap でサイトマップ自動生成 (opens new window)
VuePress に Google Analytics を追加する (opens new window)

# 参考サイト(plugin-google-analytic)

plugin-google-analytics (opens new window)
【VuePress】Google Analyticsを導入する (opens new window)
GoogleアナリティクスのトラッキングIDの基本【確認・設置方法】 (opens new window)
Googleアナリティクスの登録・設置方法【2021年版 (opens new window)

# 参考サイト(vuepress-plugin-seo)

vuepress-plugin-seo (opens new window)
VuePressでOGP自動設定 (seoプラグイン＆placehold.jp編) (opens new window)
metaタグ（メタタグ）とは？SEO効果のある記述箇所とポイントを紹介 (opens new window)
meta description（要約タグ）の使い方 (opens new window)
Placehold.jp (opens new window) イラストダウンロード (opens new window)

# 参考サイト(vuepress-plugin-feed)

vuepress-plugin-feed (opens new window)
VuePressのブログテーマ使ってみた。 (opens new window)
RSSとは？基本の仕組みと便利な使い方 (opens new window)

全国630店舗以上！もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】

Nimが対応したJupyterLabをDockerでインストールする

Nimが対応したJupyterLabをDockerでインストールする

Nimが扱えるJupyterLabをDockerにインストールします．
Python＋Selenium＋ChromeでウェブスクレイピングしてYouTubeの動画をダウンロードする

Python＋Selenium＋ChromeでウェブスクレイピングしてYouTubeの動画をダウンロードする

Python＋Selenium＋ChromeでウェブスクレイピングしてYouTubeの動画をダウンロードします．本稿では，OfflibertyをSeleniumでダウンロードします