HexoのSEO対策

投稿日 編集日 カテゴリ 、 、 Coauthor：Yuto Uehara 単語数： 4.5k 読書の時間 ≈ 22 分

こんにちは！ROOXIM株式会社COO上原です。
今回は、HexoのSEO対策について書いていこうと思います。

robots.txtの生成

hexo-generator-robotstxtを使うとrobots.txtを自動で生成してくれます。
以下セットアップ手順です。

hexo-generator-robotstxtをインストール

以下のコマンドでhexo-generator-robotstxtをインストールします。

1
npm install hexo-generator-robotstxt --save

hexo-generator-robotstxtの設定を追加

以下の設定を_config.yamlに追加します。

_config.yaml
1
2
3
4
5
6
7
8
9
10
11
12
robotstxt:
  useragent: "*"
  disallow:
    - /archives/
    - /assets/
    - /css/
    - /images/
    - /js/
    - /tags/
    - 404.html
  allow:
  sitemap: /sitemap.xml

robots.txtが生成されていることを確認

以下のコマンドでrobots.txtが生成されていることを確認しましょう。

1
hexo g

上記コマンドで生成された静的ファイルの中にrobots.txtがあることを確認します。
コマンドを実行すると、publicというフォルダが生成されるので、publicフォルダ内にrobots.txtがあることを確認してください。
またcat public/robots.txtとコマンドを実行することで生成された内容も確認しましょう。

いかが実際に生成されたrobots.txtです。

1
2
3
4
5
6
7
8
9
10
User-agent: *
Disallow: /archives/
Disallow: /assets/
Disallow: /css/
Disallow: /images/
Disallow: /js/
Disallow: /tags/
Disallow: 404.html
Sitemap: /sitemap.xml

なお設定項目にサイトマップがの記載がありますがサイトマップの生成は次の章で設定します。

sitemapの生成

hexo-generator-seo-friendly-sitemapを使うとsitemap.xmlを自動で生成してくれます。
以下セットアップ手順です。

hexo-generator-seo-friendly-sitemapをインストール

以下のコマンドでhexo-generator-seo-friendly-sitemapをインストールします。

1
npm install hexo-generator-seo-friendly-sitemap --save

hexo-generator-seo-friendly-sitemapの設定を追加

以下の設定を_config.yamlに追加します。

_config.yaml
1
2
sitemap:
  path: sitemap.xml

sitemap.xmlが生成されていることを確認

以下のコマンドでsitemap.xmlが生成されていることを確認しましょう。

1
hexo g

上記コマンドで生成された静的ファイルの中にsitemap.xmlがあることを確認します。
コマンドを実行すると、publicというフォルダが生成されるので、publicフォルダ内にsitemap.xmlがあることを確認してください。
またcat public/sitemap.xmlとコマンドを実行することで生成された内容も確認しましょう。

実際に生成されたsitemap.xml

sitemap.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="sitemap.xsl"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">


    <sitemap>
        <loc>https://blog.rooxim.com/post-sitemap.xml</loc>
        <lastmod>2024-05-31T15:06:08.723Z</lastmod>
    </sitemap>

    <sitemap>
        <loc>https://blog.rooxim.com/page-sitemap.xml</loc>
        <lastmod>2024-05-31T11:14:59.166Z</lastmod>
    </sitemap>

    <sitemap>
        <loc>https://blog.rooxim.com/category-sitemap.xml</loc>
        <lastmod>2024-05-31T15:06:08.723Z</lastmod>
    </sitemap>

    <sitemap>
        <loc>https://blog.rooxim.com/tag-sitemap.xml</loc>
        <lastmod>2024-05-31T15:06:08.723Z</lastmod>
    </sitemap>

</sitemapindex>
<!-- XML Sitemap generated by Hexo SEO Friendly Sitemap Generator -->

sitemapに載せたくないページの設定方法

sitemapに載せたくないページではFront Matterを以下の様にします。
以下は例として404.mdの例を示します。

404.md
1
2
3
4
5
6
7
8
9
---
layout: page
title: Page not found
comments: false
+ sitemap: false
---

ページが見つかりませんでした.

以上の様にsitemap: falseを設定することで、サイトマップから除外してくれます。

feedの配信

hexo-generator-feedを使うとrss2/atomを自動で生成してくれます。
以下セットアップ手順です。

hexo-generator-feedをインストール

以下のコマンドでhexo-generator-feedをインストールします。

1
npm install hexo-generator-feed --save

hexo-generator-feedの設定を追加

以下の設定を_config.yamlに追加します。
この設定では、atomとrss2の両方を生成するようにしています。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
feed:
  enable: true
  type:
    - atom
    - rss2
  path:
    - atom.xml
    - rss2.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

atom.xml,rss2.xmlが生成されていることを確認

以下のコマンドでatom.xml,rss2.xmlが生成されていることを確認しましょう。

1
hexo g

上記コマンドで生成された静的ファイルの中にatom.xml,rss2.xmlがあることを確認します。
コマンドを実行すると、publicというフォルダが生成されるので、publicフォルダ内にatom.xml,rss2.xmlがあることを確認してください。
またcat public/atom.xmlやcat public/rss2.xmlとコマンドを実行することで生成された内容も確認しましょう。

実際に生成されたatom.xml

atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>ルークシム技術ブログ</title>
  <icon>https://blog.rooxim.com/icon.png</icon>
  
  <link href="https://blog.rooxim.com/atom.xml" rel="self"/>
  
  <link href="https://blog.rooxim.com/"/>
  <updated>2024-05-31T15:06:08.723Z</updated>
  <id>https://blog.rooxim.com/</id>
  
  <author>
    <name>ROOXIM.inc</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Hexoのカスタマイズ:nexTのカスタマイズ</title>
    <link href="https://blog.rooxim.com/2024-06-01-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99-nexT%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99/"/>
    <id>https://blog.rooxim.com/2024-06-01-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99-nexT%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99/</id>
    <published>2024-05-31T15:01:19.000Z</published>
    <updated>2024-05-31T15:06:08.723Z</updated>
    
    
    <summary type="html">&lt;p&gt;こんにちは！ ROOXIM株式会社COO 上原です。&lt;br&gt;
前回はHexoのテーマであるnexTをインストールしました。&lt;br&gt;
しかしnexTをインストールしただけでは個性があまりありません。&lt;br&gt;
そこでnexTのテーマをカスタマイズしてより見た目にこだわっていきましょう。&lt;br&gt;
ここでは、設定した一部をご紹介させていただいています。&lt;/p&gt;</summary>
    
    
    
    <category term="技術" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/"/>
    
    <category term="Hexo" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/"/>
    
    <category term="nexT" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/nexT/"/>
    
    
    <category term="node" scheme="https://blog.rooxim.com/tags/node/"/>
    
    <category term="hexo" scheme="https://blog.rooxim.com/tags/hexo/"/>
    
    <category term="github" scheme="https://blog.rooxim.com/tags/github/"/>
    
    <category term="nexT" scheme="https://blog.rooxim.com/tags/nexT/"/>
    
  </entry>
  
  <entry>
    <title>Hexoのカスタマイズ:テーマインストール編</title>
    <link href="https://blog.rooxim.com/2024-05-31-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-%E3%83%86%E3%83%BC%E3%83%9E%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%B7%A8/"/>
    <id>https://blog.rooxim.com/2024-05-31-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-%E3%83%86%E3%83%BC%E3%83%9E%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%B7%A8/</id>
    <published>2024-05-31T13:59:15.000Z</published>
    <updated>2024-05-31T14:00:30.247Z</updated>
    
    
    <summary type="html">&lt;p&gt;ROOXIM株式会社COO 上原です。&lt;br&gt;
前投稿では、Hexoのセットアップが完了しました。&lt;br&gt;
Hexoではデフォルトでlandscapeというテーマが設定されています。&lt;br&gt;
landscapeのテーマでもいいのですが、もう少しいろいろカスタマイズしたい。&lt;br&gt;
そこでテーマの変更とテーマのカスタマイズをしていこうと思います。&lt;/p&gt;</summary>
    
    
    
    <category term="技術" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/"/>
    
    <category term="Hexo" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/"/>
    
    <category term="nexT" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/nexT/"/>
    
    
    <category term="node" scheme="https://blog.rooxim.com/tags/node/"/>
    
    <category term="hexo" scheme="https://blog.rooxim.com/tags/hexo/"/>
    
    <category term="github" scheme="https://blog.rooxim.com/tags/github/"/>
    
    <category term="nexT" scheme="https://blog.rooxim.com/tags/nexT/"/>
    
  </entry>
  
  <entry>
    <title>Hexoのセットアップ</title>
    <link href="https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97/"/>
    <id>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97/</id>
    <published>2024-05-30T08:08:33.000Z</published>
    <updated>2024-05-31T15:00:15.471Z</updated>
    
    
    <summary type="html">&lt;p&gt;ROOXIM株式会社COO 上原です。&lt;br&gt;
前投稿では、Hexoを選んだ理由について紹介しました。&lt;br&gt;
今回は、セットアップ手順についてご紹介します。&lt;/p&gt;</summary>
    
    
    
    <category term="技術" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/"/>
    
    <category term="Hexo" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/"/>
    
    
    <category term="node" scheme="https://blog.rooxim.com/tags/node/"/>
    
    <category term="hexo" scheme="https://blog.rooxim.com/tags/hexo/"/>
    
    <category term="github" scheme="https://blog.rooxim.com/tags/github/"/>
    
  </entry>
  
  <entry>
    <title>Hexoによるブログ開設！</title>
    <link href="https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AB%E3%82%88%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E9%96%8B%E8%A8%AD/"/>
    <id>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AB%E3%82%88%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E9%96%8B%E8%A8%AD/</id>
    <published>2024-05-30T05:43:47.000Z</published>
    <updated>2024-05-31T09:59:46.638Z</updated>
    
    
    <summary type="html">&lt;p&gt;ROOXIM株式会社COO 上原です。&lt;br&gt;
弊社では、「あなたの会社のTCO」をスローガンに&lt;br&gt;
取引のある会社様にご提案から開発までワンストップで日々開発をしております。&lt;br&gt;
このブログでは弊社の技術紹介や、課題共有など、フランクかつギークに紹介できればと思っています。&lt;/p&gt;</summary>
    
    
    
    <category term="技術" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/"/>
    
    <category term="Hexo" scheme="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/"/>
    
    
    <category term="node" scheme="https://blog.rooxim.com/tags/node/"/>
    
    <category term="hexo" scheme="https://blog.rooxim.com/tags/hexo/"/>
    
    <category term="github" scheme="https://blog.rooxim.com/tags/github/"/>
    
  </entry>
  
</feed>
rss2.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>ルークシム技術ブログ</title>
    <link>https://blog.rooxim.com/</link>
    
    <image>
      <url>https://blog.rooxim.com/icon.png</url>
      <title>ルークシム技術ブログ</title>
      <link>https://blog.rooxim.com/</link>
    </image>
    
    <atom:link href="https://blog.rooxim.com/rss2.xml" rel="self" type="application/rss+xml"/>
    
    <description>「あなたの会社のCTO」ROOXIM株式会社が運営する技術ブログです。業務や、最新の技術について紹介していきます。</description>
    <pubDate>Fri, 31 May 2024 15:06:08 GMT</pubDate>
    <generator>http://hexo.io/</generator>
    
    <item>
      <title>Hexoのカスタマイズ:nexTのカスタマイズ</title>
      <link>https://blog.rooxim.com/2024-06-01-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99-nexT%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99/</link>
      <guid>https://blog.rooxim.com/2024-06-01-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99-nexT%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99/</guid>
      <pubDate>Fri, 31 May 2024 15:01:19 GMT</pubDate>
      
      <description>&lt;p&gt;こんにちは！ ROOXIM株式会社COO 上原です。&lt;br&gt;
前回はHexoのテーマであるnexTをインストールしました。&lt;br&gt;
しかしnexTをインストールしただけでは個性があまりありません。&lt;br&gt;
そこでnexTのテーマをカスタマイズしてより見た目にこだわっていきましょう。&lt;br&gt;
ここでは、設定した一部をご紹介させていただいています。&lt;/p&gt;</description>
      
      
      
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/">技術</category>
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/">Hexo</category>
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/nexT/">nexT</category>
      
      
      <category domain="https://blog.rooxim.com/tags/node/">node</category>
      
      <category domain="https://blog.rooxim.com/tags/hexo/">hexo</category>
      
      <category domain="https://blog.rooxim.com/tags/github/">github</category>
      
      <category domain="https://blog.rooxim.com/tags/nexT/">nexT</category>
      
      
      <comments>https://blog.rooxim.com/2024-06-01-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99-nexT%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%B9%E3%82%99/#disqus_thread</comments>
      
    </item>
    
    <item>
      <title>Hexoのカスタマイズ:テーマインストール編</title>
      <link>https://blog.rooxim.com/2024-05-31-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-%E3%83%86%E3%83%BC%E3%83%9E%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%B7%A8/</link>
      <guid>https://blog.rooxim.com/2024-05-31-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-%E3%83%86%E3%83%BC%E3%83%9E%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%B7%A8/</guid>
      <pubDate>Fri, 31 May 2024 13:59:15 GMT</pubDate>
      
      <description>&lt;p&gt;ROOXIM株式会社COO 上原です。&lt;br&gt;
前投稿では、Hexoのセットアップが完了しました。&lt;br&gt;
Hexoではデフォルトでlandscapeというテーマが設定されています。&lt;br&gt;
landscapeのテーマでもいいのですが、もう少しいろいろカスタマイズしたい。&lt;br&gt;
そこでテーマの変更とテーマのカスタマイズをしていこうと思います。&lt;/p&gt;</description>
      
      
      
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/">技術</category>
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/">Hexo</category>
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/nexT/">nexT</category>
      
      
      <category domain="https://blog.rooxim.com/tags/node/">node</category>
      
      <category domain="https://blog.rooxim.com/tags/hexo/">hexo</category>
      
      <category domain="https://blog.rooxim.com/tags/github/">github</category>
      
      <category domain="https://blog.rooxim.com/tags/nexT/">nexT</category>
      
      
      <comments>https://blog.rooxim.com/2024-05-31-Hexo%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA-%E3%83%86%E3%83%BC%E3%83%9E%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%B7%A8/#disqus_thread</comments>
      
    </item>
    
    <item>
      <title>Hexoのセットアップ</title>
      <link>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97/</link>
      <guid>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97/</guid>
      <pubDate>Thu, 30 May 2024 08:08:33 GMT</pubDate>
      
      <description>&lt;p&gt;ROOXIM株式会社COO 上原です。&lt;br&gt;
前投稿では、Hexoを選んだ理由について紹介しました。&lt;br&gt;
今回は、セットアップ手順についてご紹介します。&lt;/p&gt;</description>
      
      
      
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/">技術</category>
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/">Hexo</category>
      
      
      <category domain="https://blog.rooxim.com/tags/node/">node</category>
      
      <category domain="https://blog.rooxim.com/tags/hexo/">hexo</category>
      
      <category domain="https://blog.rooxim.com/tags/github/">github</category>
      
      
      <comments>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97/#disqus_thread</comments>
      
    </item>
    
    <item>
      <title>Hexoによるブログ開設！</title>
      <link>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AB%E3%82%88%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E9%96%8B%E8%A8%AD/</link>
      <guid>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AB%E3%82%88%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E9%96%8B%E8%A8%AD/</guid>
      <pubDate>Thu, 30 May 2024 05:43:47 GMT</pubDate>
      
      <description>&lt;p&gt;ROOXIM株式会社COO 上原です。&lt;br&gt;
弊社では、「あなたの会社のTCO」をスローガンに&lt;br&gt;
取引のある会社様にご提案から開発までワンストップで日々開発をしております。&lt;br&gt;
このブログでは弊社の技術紹介や、課題共有など、フランクかつギークに紹介できればと思っています。&lt;/p&gt;</description>
      
      
      
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/">技術</category>
      
      <category domain="https://blog.rooxim.com/categories/%E6%8A%80%E8%A1%93/Hexo/">Hexo</category>
      
      
      <category domain="https://blog.rooxim.com/tags/node/">node</category>
      
      <category domain="https://blog.rooxim.com/tags/hexo/">hexo</category>
      
      <category domain="https://blog.rooxim.com/tags/github/">github</category>
      
      
      <comments>https://blog.rooxim.com/2024-05-30-Hexo%E3%81%AB%E3%82%88%E3%82%8B%E3%83%96%E3%83%AD%E3%82%B0%E9%96%8B%E8%A8%AD/#disqus_thread</comments>
      
    </item>
    
  </channel>
</rss>

GA4（Google Analytics 4)の設定

GA4はSEO対策をする上で必要な流入やユーザ行動を集計してくれます。
集計された情報を元に、ページの内容を改善してより見ていただけるサイトにしていくことができます。
今回はHexoのテーマであるnexTにGA4の設定ができるのでその方法について紹介します。

GA4のセットアップ

GA4のセットアップはこちらのの手順に沿って進めるだけです。
最終的にGoogleタグIDが取得できればOKです。
GoogleタグIDは「G-」または「AW-」で始まる IDのことです。
詳しくは様々なサイトで行っているのでここでは省略させて頂きます。

_config.next.ymlにGoogleタグIDを設定

_config.next.ymlにGoogleタグIDを設定します。

_config.next.yml
1
2
3
4
5
6
7
8
9
google_analytics:
-  tracking_id: # <app_id>
+  tracking_id: G-XXXXXXXXXX
  # By default, NexT will load an external gtag.js script on your site.
  # If you only need the pageview feature, set the following option to true to get a better performance.
  only_pageview: false
  # only needed if you are using `only_pageview` mode, https://developers.google.com/analytics/devguides/collection/protocol/ga4
  measure_protocol_api_secret:

GoogleタグIDが設定されていることを確認

以下のコマンドでGoogleタグIDが設定されていることを確認します。

1
2
hexo g
cat public/index.html | grep https://www.googletagmanager.com/gtag/

上記のコマンドで以下のような出力が得られて設定したGoogleタグIDが記載されていれば設定完了です。

1
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

google search consoleの設定

google search consoleはサイトの検索トラフィックや掲載順位を測定でき、問題を修正することでGoogle検索結果でのサイトの注目度を高めることができます。
google search consoleを使う上でサイト側の設定は登録時の認証を通す為であり、認証は、ドメインのTXTレコードの追加などでも行うことは可能です。
しかし、CNAMEレコードを設定してしまっているとTXTレコードの設定ができないため、metaタグによる認証が必要となる場合があります。
今回はHexoのテーマであるnexTがこのmetaタグによるGoogleの認証に対応していたのでご紹介します。

google search consoleでプロパティの追加をする。

プロパティの追加を選択して、URLプレフィックスでサイトのURLを入力します。
img

次に所有権の確認の画面が出てくるのでその他の確認方法のHTMLタグを選択します。
img
コピーを選択して以下のタグを取得します。

1
<meta name="google-site-verification" content="hImGsrd7TJG98SatqCiN6Yyh9kKXJLVDrF0IFIlhK60" />

このタグのcontentの値であるhImGsrd7TJG98SatqCiN6Yyh9kKXJLVDrF0IFIlhK60をコピーしておきます。

_config.next.ymlにgoogle-site-verificationを設定

_config.next.ymlにgoogle-site-verificationを設定します。

_config.next.yml
1
2
3
4
# Google Webmaster tools verification.
# See: https://developers.google.com/search
- google_site_verification:
+ google_site_verification: hImGsrd7TJG98SatqCiN6Yyh9kKXJLVDrF0IFIlhK60

サイトを公開

このサイトではgithubPagesでホスティングしているのでPushしてサイトを公開します。
公開されたらgoogle search consoleの所有権の確認の画面から確認ボタンをおして確認を完了すれば設定完了です。

最後に

以上でSEO対策の基本的な設定が完了しました。
実際のSEOはこれからが本番ですが、まずはこれらの設定をして状況を確認して 対応、対策していきましょう。