自分で作ったブログ実装についてのメモ (1st April, 2022)
Abstract
DYI--Do it yourself--- is awesome. But one ugly part of it is that you should take care of many issues yourself due to another level of flexiblity. This article provides some issues I faced or I am facing to develop this blog. Hope it will help those who create own blogs with Google Domains, Nuxt, nuxt/content, and Firebase Hosting.
種々の問題と、それに対する対処などをまとめておきます。 これは、将来同じような構成でブログを作る誰かに役立つはずです。
検索エンジンへの反映させるのに手間取った
Google Domainsでドメインを取った後、Google Search Consoleに自分のドメインが自動登録されていた。
なので、クロールも自動でおこなってくれてると思っていた。しかし、いつまで経っても「データを処理しています」というメッセージしかSearch Consoleから見ることができない。
Twitter, LinkedIn, Instagram等に https://kanta-yamaoka.earth/ を登録していたので、それをGoogleがクロールしてくれるかと思った。しかし、これらはどうやらGoogle Botには届かなかったようだ。
Nuxtが生成しているURLの問題か?レンダリングの問題か?とも思ったが、SSR/SSGとかその辺はややこしいので、一旦考えないことにした。
とりあえず、Search ConsoleのURL検査を開き、記事やトップページのURLを入れてみた。
トップページのURLでさえ、URL が Google に登録されていませんと表示されている。
ということで、トップページのURLをインデックス登録リクエストをした。
トップページさえクロールされれば、そこに乗ってる記事リストから更なるクロールが行われることを信じて!
トップページはインデックスされたものの、記事はされない
先ほどのトップページURLはインデックスされたが、nuxt/content
の各記事はされていない。各記事は_slug.vue
で生成されているので、それが問題なのだろうか。というわけで、各記事のうち、一つだけピックアップして、それをサーチコンソールでURLリクエストしてみた。
1日ほど待ってみる。。すると。。
リクエストした記事はインデックスされるものの
言い換えれば、リクエストしていない記事はインデックスされていない。なるほど、nuxt/content同士でリンクしても、GoogleBotはリンクを認識しないようだ。これがなぜなのかはわからないが、おそらくレンダリングの問題なのだろう。VueやNuxtがSEO的には発展途上であることはしばし聞く。Wordpress等はある意味でノウハウが溜まっているし、SEO向けのプラグインがあるようだが、Nuxtではその辺はDIYしなければならないようだ。
Nuxt/contentでサイトマップを生成する
ならば、nuxt/content
の記事のサイトマップを作って、サーチコンソールに知らせてみよう。
https://redfern.dev/articles/adding-a-sitemap-using-nuxt-content/
上のチュートリアルを参考にして、@nuxtjs/sitemap
というパッケージを導入した。その後、npm run generate
でビルドし、sitemap.xml
を見てみると、しっかり前記事のリンクがリストアップされている。
というわけで、サーチコンソールにsitemap.xml
のパスを登録した。これからはデプロイのたびに、新しい記事がGoogle検索結果に登場するだろう!めでたしめでたし!