ブログにremarkとrehypeのプラグインを追加して、それに合わせた開発を終えた後、ブログに設置したGoogle GAを見たところ、ほぼ自分だけがアクセスしているようでした（訪問者数1〜2人 🥲）。そこでSEOを通じて検索に表示されるよう、Next.jsが提供する方法を追加しました。
sitemapを生成する#
NEXT.js - sitemap.xmlに説明されている中からGenerating a sitemap using code (.js, .ts)を使って作りました。最初はGenerating multiple sitemapsも適用しましたが、詳細ページを持つposts、booksメニューにsitemap.tsを作ったものの、うまく動作しませんでした。そこで方法を探し、app/sitemap.tsファイルを変更しました。
import { allBooks, allPosts } from '@/.contentlayer/generated'
import { BASE_URL } from '@/app/lib/definitions'
import { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: `${BASE_URL}/`,
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 1,
},
{
url: `${BASE_URL}/about`,
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
{
url: `${BASE_URL}/tags`,
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 0.5,
},
{
url: `${BASE_URL}/get912000won`,
lastModified: new Date(),
},
...allPosts.map((post) => ({
url: `${BASE_URL}/posts/${post.slug}`,
lastModified: post.date,
})),
...allBooks.map((book) => ({
url: `${BASE_URL}/books/${book.slug}`,
lastModified:
book.start_read_date === book.finish_read_date
? book.start_read_date
: book.finish_read_date,
})),
]
}Contentlayerを使用しているので、マークダウンで作成した記事の情報を持つオブジェクトがすでにあります。そのためallPostsとallBooksを読み込んで簡単に記事データを追加できました。
robotsを生成する#
NEXT.js - robots.txtに説明されている中からGenerate a Robots fileを使用しました。sitemapの設定よりさらに簡単です。
app/robots.tsファイルに以下のように作りました。
import { MetadataRoute } from 'next'
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
},
sitemap: 'https://get6.github.io/sitemap.xml',
}
}検索エンジンサイトに登録する#
AIの回答で分かったのは、これだけで終わりではなく、クロールされるように検索エンジンサイトに追加する必要があるということでした。
そのため、複数の検索エンジンサイトに直接登録する必要があります。自動で多数の検索エンジンに登録してくれるサービスもあるようですが、きちんと機能するかはテストしていません。それでも、有名なサイトに登録できるリンクを以下に載せておきます！
- Google - Google Search Console
- NAVER - Search Advisor
- Bing - Webmasters Tools
- Baidu - 百度站长工具
- Yandex - Webmaster
とりあえずGoogleとNAVERだけ追加しました。すべてのサイトはログイン後に進める形になっています。希望のサイトがあれば会員登録をして進めてください！
GoogleとNAVERの両方でHTMLタグを追加する方式を選びました。HTMLファイルをアップロードする方式はNGINXのようなWebサーバー向けだと思います。
一般的にはタグをheaderタグの間に追加すれば良いのですが、Next.jsを使用しているため別途設定が必要でした。
export const metadata: Metadata = {
// ...他の設定は省略
verification: {
google: 'コピーするよう案内されたタグのcontent部分',
other: {
// コピーするよう案内されたタグのname部分を左側に記入してください。
'naver-site-verification': 'コピーするよう案内されたタグのcontent部分',
},
},
}ホスティング先にタグがデプロイされた後、所有者確認ボタンを押せば完了です！
その後、各サイトが提供するウェブマスターツールを見ながら収集されるデータでどの記事が人気なのかチェックしてみるのも良いでしょう。
God gave us the gift of life; it is up to us to give ourselves the gift of living well.
— Voltaire
