こんにちは。まなてぃです。
WordPressからNotion×Astroのブログ(astro-notion-blog)に移行するにあたり、いちばん心配だったのが「SEOや収益化はどうなるの?」ということでした。
💡
先に結論です。astro-notion-blogでも、Google AdSenseやアフィリエイトは問題なくできています。
AdSenseのコードも、A8.netなどのアフィリエイトの広告タグも、Notionで書いた記事に設置できました。
ただし、WordPressから移行する場合は、次の点に注意する必要がありました。
- ドメイン:wwwあり・なしの転送や、DNSの設定
- URLの構造:記事のURLをWordPress時代と同じにする
- SEOの設定:サイトマップや構造化データなどを自分で用意する
WordPressなら、テーマに付属している機能や、プラグインを入れるだけでできたことも、Astroのブログでは自分で用意する必要があります。この記事では、それぞれどう対応したかをまとめます。
⚠️
■ご注意
WordPressからastro-notion-blogへの移行にあたり、本ブログではClaude Codeを用いて実施しています。ご参考にされる際はご注意ください。
SEOの対応
記事のURLを変えずに移行した
SEOでいちばん大事なのは、これまでの検索エンジンからの評価を引き継ぐことだと思います。そのために、記事のURLはWordPress時代とまったく同じにしました。
- 記事のURLは、WordPress時代と同じ「ドメイン/スラッグ(%postname%)」の形にした
- Astro-Notion-Blog のデフォルトの設定では
https://sample-domain/posts/%postname% になる - WordPressの設定は
https://sample-domain/%postname% だった
カテゴリーページなど、URLの形が変わったページは、新しいURLに転送(301リダイレクト)しています。
旧サーバーを削除したら、www付きのURLが表示されなくなった
移行してしばらくしてから気づいたのですが、WordPressのサーバーを削除したあと、「www.manateedon-blog.com」のようにwww付きのURLを開くと、旧サーバーの「無効なURLです」というページが表示されるようになっていました。
原因は、www付きのURLをwwwなしのURLに転送していたのが、実は旧WordPressのサーバーだったからです。サーバーを削除したことで、転送する役がいなくなってしまいました。
Claude Codeに設定方法を聞きながら、Cloudflareで次の設定をしました。
- DNSのwwwのレコードを、ブログのドメインを指すように変更
- 「リダイレクトルール」で、www付きのURLをwwwなしのURLに転送(301)
- 「常に HTTPS を使用」をオンにして、httpで始まるURLもhttpsに切り替える
- 旧サーバーを指していた不要なDNSレコードを削除
そのほかのSEO対策
- サイトマップ:検索エンジンにページの一覧を伝えるファイルを自動で作成
- 構造化データ(JSON-LD):記事のタイトルや日付などを検索エンジンに伝える
- 記事タイトルをh1に:ページのいちばん大事な見出しとして記事タイトルを設定
- canonical:正しいURLを検索エンジンに伝える
- 404ページ:存在しないページにアクセスされたときの専用ページ
なにから何まで、Claude Codeにお願いして、やり方を教えてもらいました。本当にありがたい時代になりました。
SNSでシェアされたときの表示(OGP)
Xなどでシェアされたときに表示される画像やタイトルも設定しました。
- 記事ごとに、アイキャッチ画像をシェア用の画像に
- トップページ用のシェア画像を用意
- アイキャッチ画像がない記事には「No Image」の画像を表示
SNSなどにシェアされたときに画像が出るようにした
Google Search Console
本番公開したあと、Search Consoleにサイトマップを送信しました。
ドメインは同じままなので、Search Consoleのプロパティはそのまま使えています。
Search Consoleでは問題なく計測が継続できていそうだった
もともと弱小ブログなので、クリック数や表示回数がすごく増えるなどの変化はありませんでした。
Google Analytics
Google Analyticsは、ソースコードを変更せずに設定できました。astro-notion-blogには、もともとGoogle Analyticsの計測タグを入れる仕組みが用意されていて、測定IDを「環境変数」として登録するだけで、全ページに計測タグが入ります。
Claude Codeに測定IDのことを伝えて、どこに設定すればいいかを教えてもらいました。やったことは次のとおりです。
- Google Analyticsの管理画面で、測定ID(「G-」で始まる文字列)を確認する
- Cloudflareの管理画面で、「Workers & Pages」→ ブログのプロジェクト →「設定」→「変数とシークレット」を開く
- 名前に「PUBLIC_GA_TRACKING_ID」、値に測定IDを入れて追加する
- サイトを再ビルドする(変数はビルドのときに読み込まれるので、登録しただけでは反映されません)
- Google Analyticsの「リアルタイム」のレポートで、アクセスが計測されているか確認する
本番公開したあとに、リアルタイムのレポートでアクセスが計測されていることを確認できました。
Google AdSense
AdSenseは、Google Analyticsと違って、元のテンプレートには仕組みがありませんでした。そのため、Claude Codeにお願いして、広告を表示する仕組みを作ってもらいました。
私がやったのはドメインの設定くらいで、ほとんどClaude Codeにやってもらいました。
【TODO:自分でやったことを具体的に(AdSenseの管理画面で確認したこと、Claude Codeに伝えたIDなど)】
Claude Codeに作ってもらった仕組み
- AdSenseのコードを全ページに読み込む:ソースコードの設定ファイル(
src/server-constants.ts)にパブリッシャーID(「ca-pub-」で始まるID)を1か所書くだけで、全ページにAdSenseのコードが入ります - ads.txtを自動で作成:同じパブリッシャーIDから、ads.txt(広告の販売者を示すファイル)が自動で作られます
- 広告を表示する場所を2か所に固定:記事の最初の見出しの前と、記事の最後に、広告ユニットが自動で入ります。記事ごとに広告タグを貼る必要はありません(見出しがない記事では、記事の最後だけに表示されます)
- 「スポンサーリンク」の表記:広告の上に「スポンサーリンク」と表示されます
自動広告はオフにした
AdSenseの管理画面で、自動広告はオフにしています。
自動広告をオフにして場所を固定したのは、読んでいる途中に広告がたくさん出てくると読みにくいと思ったからです。
記事を読んでいる途中に、どうやって閉じるのかよくわからないポップアップ広告や、追従する広告などがあると読みにくいですよね…
本ブログでは、恐れ入りますがブログ記事の最初の方と、最後の方の2個所にGoogleからの広告を挿入させていただいております。
(読んでくださるだけでありがたいです。ありがとうございます)
A8.netなどのアフィリエイト
HTMLをそのまま貼れるようにした
A8.netなどのアフィリエイトの広告は、HTMLのコード(広告タグ)を貼り付けて使います。
Notionの「コード」ブロックで言語を「HTML」にし、キャプションに「埋め込み」「広告」(または embed / ad)とだけ書いたときに、中身をそのままHTMLとしてブログに表示するようにしました。それ以外のHTMLコードブロックは、ふつうのコードとして表示されます。
Blueskyなどの埋め込みもキャプションに「embed」などの埋め込みキーワードを設定すると埋め込める仕様にした
商品紹介のボックスやボタン
カエレバ・ヨメレバのような商品紹介のボックスや、グラデーションのボタンのデザインも用意しました。
(このブログでは、もしもアフィリエイトさんの「かんたんリンク」を設置することが多いので、あまり使わない設定になってしまいました。)
PR表記(ステマ規制への対応)
2023年10月から、広告であることを隠して宣伝する「ステルスマーケティング」が規制されています。
このブログでは、Notionで記事の「PR」にチェックを入れると、記事の上に「当ページのリンクにはプロモーションが含まれています。」という表記が出るようにしました。チェックを入れるだけなので、つけ忘れを防げます。
記事の上に「当ページのリンクにはプロモーションが含まれています。」という表記が出る
移行のときのチェックリスト
同じように移行する人のために、私が確認したことをまとめておきます。
まとめ
astro-notion-blogでも、AdSenseやアフィリエイトは問題なくできています。SEOやアナリティクスにも対応できました。
ただし、WordPressから移行する場合は、ドメイン・URLの構造・SEOの設定に注意が必要でした。プラグインほど手軽ではありませんが、一度作ってしまえば、あとはNotionで書くだけになります。