「自分のブログ名」でググってみた。何も出てこなかった。
ブログを公開して数日。ふと思った。
「自分のブログ、Googleで検索したら出てくるのかな?」
「invest-at-13」で検索。結果——
何も出てこない。
……え?公開してるのに?URLを打てば見られるのに?Googleさん、うちのブログの存在知らないの?
そう、Googleは勝手にブログを見つけてくれるわけじゃなかった。 こっちから「ここにブログあるよ!」って教えてあげないといけない。
Google Search Consoleに登録した
やり方はこう:
- Google Search Consoleにアクセス
- ブログのURLを入力(
https://invest-at-13.pages.dev) - 所有権の確認 — Googleが「このサイト本当にあなたの?」って聞いてくる
- HTMLファイルをダウンロードして、ブログのフォルダに置く
- GitHubにプッシュして、Cloudflareが自動デプロイ
- 確認ボタンを押す → 「所有権を確認しました」 🎉
ここまではスムーズだった。
サイトマップの送信で問題発生
次に「サイトマップ」っていう、ブログの地図みたいなものをGoogleに送る。これを送ると、Googleがブログの全ページを効率よく見つけてくれる。
sitemap-index.xml と sitemap-0.xml を送信したんだけど……
「取得できませんでした」
は???
URLを直接開くとちゃんと表示されるのに、Googleが読み取ってくれない。
調べたら、新しいサイトだと数時間〜数日かかることがあるらしい。焦って何回もリロードしても意味なかった。
教訓:Googleは急いでくれない。気長に待とう。
LINEで自分のブログを送ったら悲劇が起きた
Google Search Consoleの設定が終わって、友達にブログを見せようと思った。LINEでURLを送ってみた。
そしたらプレビュー画像が……
「Build the web you want」
は???
Astroのデフォルト画像がドーンと表示されてる。せっかく作ったアニメ風のOGP画像が全く表示されてない。
原因を調べたら、画像の置き場所が悪かった。Astroが処理するフォルダに置いてたから、URLがビルドのたびに変わっちゃってた。public/フォルダに移して、固定のURLで読み込めるように修正。
教訓:シェアする前にプレビューを確認しよう。 恥ずかしいところを人に見せるところだった。
いいねボタン、魂を吹き込む
前回の記事でいいねボタンのコードを書いた。でもあの時点ではまだガワだけ。押しても何も保存されない、ハリボテ状態だった。
今日やったのは、Cloudflare KV(キーバリューストア)っていうデータベースみたいなものをセットアップすること。
手順はこう:
- Cloudflareのダッシュボードで「KV」を作成
- 名前を「LIKES」にする
- ブログのプロジェクトに紐付ける(バインディング)
これで、誰かがいいねボタンを押すと、ちゃんとサーバーに保存される。 ページをリロードしても数字が残る。本物のいいねボタンの完成。
……まだ誰も押してないけど。最初の1いいね、待ってます。
おにぎりカウンター、爆誕
ブログに来てくれた人の数を表示したいと思った。
でも普通のカウンターじゃつまらない。おにぎりのデザインにしたい。
なぜおにぎりかって?僕のニックネームが「もぐもぐ投資家」だから。食べ物系で統一したかった。
CSSで描いたおにぎり🍙がぴょこぴょこ跳ねながら、「○人が遊びに来たよ!」って表示してくれる。数字がカウントアップするアニメーション付き。
しかも、同じブラウザからは1回しかカウントされないようにした。リロード連打でもカウントは増えない仕組み。
今日の作業まとめ
| やったこと | 難易度 | 達成感 |
|---|---|---|
| Google Search Console登録 | ★★★☆☆ | Googleに認知された! |
| OGP画像の修正 | ★★★☆☆ | LINEで確認して感動 |
| いいねボタンのKV設定 | ★★★★☆ | 本物になった! |
| おにぎりカウンター | ★★★★☆ | かわいい |
思ったこと
ブログって、記事を書くだけじゃない。
Googleに登録して、シェアの見た目を整えて、機能を追加して——やることが無限にある。
でも、1個ずつ良くなっていくのが目に見えるから、ゲームのレベル上げみたいで楽しい。
明日はどんな機能を追加しようかな。
#GoogleSearchConsole #ブログ運営 #AI活用 #ClaudeCode #中学生 #いいねボタン #おにぎりカウンター