xyz-log.
BACK TO TOP
Info / 2025-07-20 / 2 min ...

xyz-log v5.0 リリース - 多言語対応 & Astro v5

ZOLXA

ZOLXA

Mastermind

xyz-log v5.0 リリース - 多言語対応 & Astro v5

Sponsored

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 をよろしくお願いします。