自分で作ったブログ実装についてのメモ (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リクエストしてみた。

１日ほど待ってみる。。すると。。

リクエストした記事はインデックスされるものの

言い換えれば、リクエストしていない記事はインデックスされていない。なるほど、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検索結果に登場するだろう！めでたしめでたし！