結論

• config/_default/permalinks.toml でpostsのURLの設定を変更する
• 各ポストにslugプロパティを追加する

前書き

この記事は以下の記事の続きです。

前回、NotionとHugoを使ってブログを構築する方法を解説しました。

今回は各ポストにslugを設定する方法を解説しようと思います。

slugとは、URLの末尾の部分になります。例えば以下の記事であれば、yoast-api の部分がslugになります。特定のグループ(今回であればposts)内での識別子のようなものだと思っていただければいいと思います。

https://blog.code-del.com/posts/yoast-api/

前回のブログに沿って設定をした状態では、slugはタイトルになってしまいます。(以下のような感じ)

今回の記事ではNotionのプロパティからslugを設定することで、記事のslug(URL)を変更できるようにすることを目標にします。

Hugoでslugはどのように決まるの?

Hugo公式のURL管理について記載されているページを確認してみます。

https://gohugo.io/content-management/urls/#permalinks-configuration-example

上記ページを見ると、以下のことがわかります。

• サイト設定のpermalinks という項目に則ってURLが決められる
• slugは各ページのフロントマターに記載される

これをもとに、slugを設定する方法を見ていきましょう。

方法

1. permalinks設定を変更する

手元のソースコードを確認すると、config/_default/permalinks.toml というファイルが存在し、以下のような記載になっていました。

1
2

'/' = ":title"
posts = ":sections/:title"

なるほど。この設定によって、

• ページ直下のファイルは、タイトルがそのままURLになる　(e.g. about)
• posts以下のファイルは、posts/<タイトル>がURLになる

のように動いていたのですね。このファイルを以下のように変更します。

1
2

'/' = ":title"
posts = ":sections/:slug"

これで、posts以下のページに対しては、slugがURLに使われるようになりました。

また公式ページを確認したところ、slugフロントマターが設定されていない場合、記事タイトルが:slug の箇所に入るようなので、変更前後で過去の記事にアクセスできなくなるようなこともなさそうですね。

2. 各記事にslugプロパティを設定する

以下の画像のように、各記事にslugプロパティを追加していきます。重複しないように注意してください。

これで無事、各記事が/posts/<slug> で表示されるようになりました。

SEO対策

Page Indexingへの影響を考える

今回スラッグを作成した主な理由に、ページタイトルをURLにそのまま利用しているとタイトルを書き換えたときにURLが新しくなってしまうという問題がありました。

例えば「便利なツール4選」のようなタイトルのブログを書いたときに、のちに「便利なツール5選」に更新した場合、URLが変わってしまいます。

するとGoogle Search ConsoleのPage Indexingを再度行う必要があり、またアクセス解析も0からになってしまいます。

そのため、今回作成したスラッグを用いてURLを一意に決めてしまうのが最適でした。

URLデコードを考える

SEO対策の観点から述べると、スラッグは日本語でも英語でも問題ありません。

ただし日本語はUTF-8にエンコードする必要があり、使用した外部ツールがURLデコードを行ってくれない場合、URLが読めなくなってしまいます。

実際にアクセス解析にLooker Studioを使用したところURLデコードされず困っていました。

やはりURLは英語にした方が何かと便利です。

1
2
3
4
5

# エンコード前のURLの見栄え
https://blog.code-del.com/posts/notion-hugoで寝転びながらブログを書く/

# エンコード後
https://blog.code-del.com/posts/notion-hugo%E3%81%A7%E5%AF%9D%E8%BB%A2%E3%81%B3%E3%81%AA%E3%81%8C%E3%82%89%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92%E6%9B%B8%E3%81%8F/)/notion-hugo%E3%81%A7%E5%AF%9D%E8%BB%A2%E3%81%B3%E3%81%AA%E3%81%8C%E3%82%89%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92%E6%9B%B8%E3%81%8F%2F

スラッグの書き方

またスラッグを設定する際の注意点は以下です。

• 簡潔に書くこと
• 記事内容に関連する単語にすること
• 単語を区切ること
  • OK例：notion-hugo-blog
  • NG例：notionhugoblog
• 単語の区切りはアンダースコアではなくハイフンを使用すること
  • OK例：notion-hugo-blog
  • NG例：notion_hugo_blog

Google検索セントラルに詳しく書かれていますのでご参照ください。

https://developers.google.com/search/docs/crawling-indexing/url-structure?hl=ja

まとめ

今回はNotion+Hugoで構築したブログについて、各ポストにslugを設定する方法を解説しました。

URLの見栄えがすっきりするうえSEO対策に優れているので、今後は設定するようにしていきたいとおもいます！