xyz-log v5.0 リリースノート

開設4周年を迎え、v5.0をリリースしました。

今回のテーマはグローバル展開とSEO強化です。

アップデートの背景

v4.0でデザインを刷新し、国内の読者からは好評をいただきました。しかし、技術記事は言語を超えて価値があるはず。英語圏の読者にも届けたいという思いから、多言語対応に踏み切りました。

また、Google検索からの流入を増やすため、構造化データの整備にも力を入れました。

v5.0 の新機能

多言語対応（日本語/英語）

すべてのページを日本語・英語で閲覧できるようにしました。

• 言語切り替え: ヘッダーのグローブアイコンから切り替え
• URLの分離: / (日本語) と /en/ (英語)
• hreflang対応: 検索エンジンに言語バリエーションを通知
• UIの翻訳: ボタン、ラベル、メッセージをすべて多言語化

技術記事は日本語で書いた後、英語版も順次追加していく予定です。

Astro v5 へのアップグレード

Astroの最新メジャーバージョンに対応しました。

• Content Layer API: コンテンツ管理がより柔軟に
• Server Islands: 動的コンテンツの部分的なSSR
• ビルド速度向上: 約20%の高速化

シリーズ記事ナビゲーション

連載記事を順番に読み進められるナビゲーションを追加しました。

• 「React Hooks入門」などのシリーズを定義
• 前後の記事へのリンクを自動表示
• シリーズ全体の進捗を可視化

長編の技術チュートリアルが読みやすくなりました。

構造化データの自動生成

検索結果でのリッチな表示を実現するため、JSON-LDを自動生成するようにしました。

• Article: 記事のメタデータ
• BreadcrumbList: パンくずリスト
• FAQ: よくある質問形式のコンテンツ
• HowTo: 手順を説明するコンテンツ

記事の内容から自動的に適切な構造化データを出力します。

閲覧数カウンター

各記事のPV数をリアルタイムで表示するようにしました。

• Upstash Redisでカウント
• 記事ヘッダーに表示
• 人気記事の把握に活用

PWAインストール促進

PWAとしてのインストールを促すUIを追加しました。

• インストール案内バナー
• アップデート通知
• ホーム画面追加の誘導

技術スタック

• フレームワーク: Astro 5
• UIコンポーネント: React 19
• スタイリング: Tailwind CSS v4
• ホスティング: Cloudflare Pages
• データストア: Upstash Redis
• アニメーション: Framer Motion

多言語対応で学んだこと

• i18nルーティングの設計: URLをどう分けるか
• 翻訳ワークフロー: 効率的に翻訳を管理する方法
• 文化的な配慮: 日本語特有の表現をどう英訳するか

次のステップ

• キーボードショートカット
• オフライン閲覧の強化
• コメント機能

これからも xyz-log をよろしくお願いします。