【個人開発】Next.jsでSEO対策を実装する!!
はじめに
こんにちは!
最近、個人開発を嗜んでいる、ねこじゃらしさんです(@nekozyarasisan)。
今回はSEOを意識したサイトにするため、やってみたことをまとめたいと思います。
ことの経緯
最近、こんなサービスを作りました。
Mewnという、プロフィールカードを作成・交換できるサービスです(使ってみてください!!)
個人開発なら避けては通れない道である、初期ユーザー獲得の壁。
それを、打開しようと今回、SEO対策を色々施してみようということから始まりました。
実践!!
まず最初に、MewnはNext.jsを使ってます。
そこまでやることは変わらないと思いますが、まず最初にしたいことは
Metadataの設定ですよね！
Metadataを設定してみる
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "",
description: "",
keywords: [""],
openGraph: {
title: "",
description: "",
url: "",
siteName: "",
images: [
{
url: "",
width: 1200,
height: 630,
alt: "",
},
],
locale: "ja_JP",
type: "website",
},
twitter: {
card: "summary_large_image",
site: "",
creator: "",
images: [""],
},
}
流用しやすいように中身を抜いときましたが、こんな感じにしてみました。
これを、各ページやレイアウトファイルに設定していく形で設定していきました。
構造化データ（JSON-LD）
この二つを参考にして、頑張ってみました。ここは、トライアンドエラーの根性で乗り越えていきました!!
ここは、Googleさんのドキュメントを読んでいけばできました。
キーワード設定!!
検索にヒットするためのキーワードを選定することは、大切ですよね。
今回活用してみたのは、ラッコキーワードです。無料で使える範囲がせまいですが、競合サイトを調べてキーワードを把握するのには役立ちます。
あとは、Google検索でサジェストを参考にしてキーワードを詰めていきました。
next-sitemap
next-sitemap の導入
これは、サイトマップとrobots.txtをビルドする時に生成してくれるライブラリです。
手順
npm i next-sitemap
next-sitemap.config
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: "https://your-domain.com",
generateRobotsTxt: true,
robotsTxtOptions: {
policies: [
{
userAgent: "*",
disallow: [""], // 除外
},
],
},
};
package.json
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"postbuild": "next-sitemap" # 追加
},
検証とモニタリング
ここは、特に変わったアプローチはせず(方法を知らない)
Google Search ConsoleのLighthouseやPageSpeed Insightsで
テストしながら、改善をしていきました。
まとめ
やってみたのは、これくらいです。気長にデータを見て効果を判断してみたいと思います。
何か、データが変わり次第、お伝えしたいと思います。
ここまで読んでいただきありがとうございました。
宣伝
プロフィールカードを簡単に作成・共有できるサービス「Mewn」をぜひ使ってみてください!!
⇩作成したカードはこのように共有できます⇩
いろんな機能をどんどん開発していますのでよろしくお願いします。
いいねやコメント、SNSでの共有をしていただけると嬉しいです!!
⇩Mewn - プロフィール交換⇩
⇩個人のサイト⇩
Discussion