Next.jsで個人サイトをリニューアルする（その3：メタタグとGA4の設定）
前回の続きです。前回の記事はこちらです。
以下の2つが未解決のままでした。
メタタグをきちんと設定する。
Google Analytics（GA4）やSearch Consoleを連携させる。
Search Cosnoleの設定はNext.jsは関係ないのでいいのだが、メタタグとかGA4は設定できないと良くないので、調べながら設定する。
Next.jsの使い方についてはChatGPTで質問したらいい感じに答えてくれたけど、メタタグとかGA4のことはうまいこと行きませんでした。今回のリニューアルでは、Next.jsの（オススメされるがまま）App Routerを使ったのですが、この辺りの情報は新しいからChatGPTはまだ学習していないかもしれません（と、勝手に推測していますが、実際はよくわかりません）。
ということで今回は公式ドキュメントを調べて、実装します。
1.メタタグについて
Next.jsのMetadataを各page.tsxに書きます。今回の個人サイトはページ数は少ないので、簡単そうなStatic Metadataを使って、各ページごとにメタタグを設定します。
Next.jsのMetaについてはこちら。
これでページが変わったら、タイトルタグも変わり、いい感じになりました。
2.GA4について
ライブラリを追加するのは少し抵抗があるのですが、公式ドキュメントに記載されているので記載通りに設定しました。
Next.jsのGA4についてはこちら。
公式ドキュメントを確認すると、
return (
<html lang="en">
<body>{children}</body>
<GoogleAnalytics gaId="G-XYZ" />
</html>
)と実装例を紹介してくれていますが、<head>タグの中には入れられないのかなぁ。まぁ、GA4はカウントしている感じなのでいいのだが…。とりあえずドキュメント通りに実装して、何かわかったら対応しよう。
とりあえずいい感じになり、満足です。引き続きサイトを充実させていきます。
リニューアルした個人サイトはこちらです。
よろしくお願いします。
この記事が気に入ったらサポートをしてみませんか？