![見出し画像](https://assets.st-note.com/production/uploads/images/131986173/rectangle_large_type_2_8d4007f91713c429ab7d17ac4ebb785a.png?width=1200)
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はカウントしている感じなのでいいのだが…。とりあえずドキュメント通りに実装して、何かわかったら対応しよう。
とりあえずいい感じになり、満足です。引き続きサイトを充実させていきます。
リニューアルした個人サイトはこちらです。
よろしくお願いします。
この記事が気に入ったらサポートをしてみませんか?