本文と、繰り返し使う部分を分ける
記事の文章はMarkdownで書き、タイトル、要約、日付、タグ、OGP画像はfrontmatterへまとめています。ヘッダー、フッター、記事の見出し、関連リンクはAstroの共通レイアウトから出力します。同じHTMLを記事ごとに複製せず、原稿の更新と共通UIの変更を分けるためです。
MDXでは文章の途中にAstroコンポーネントを挿入できます。構成図はHTMLのラベルとSVGの接続線で表現し、理解に役立つ場合だけ操作や動きを加えています。短い説明まで、すべてを図へ変える必要はありません。
Content architecture
原稿から日英の公開ページへ
原稿は言語別に持ち、ページ情報とレイアウトを共通化。公開対象だけを静的HTMLへ変換します。
日英の原稿を、それぞれのURLで読む
日本語と英語は同じ記事の識別子を使い、本文は別のMDXで管理します。日本語はルート配下、英語は /en/ 配下に生成します。公開する原稿に対応する対訳がない場合や、日付に不整合がある場合はビルドを止めます。
言語メニューは閲覧中の記事の対応ページへ移動します。ブラウザ言語による自動転送はせず、本文と言語リンクはJavaScriptなしでも利用できます。英語は文字数を日本語へ合わせるのではなく、条件や注意を保ったうえで自然な語順へ組み直します。
記事の情報を、一覧とSEOにも使う
frontmatterのタイトルと要約を、記事一覧、ページのtitleとdescription、構造化データに使います。公開する記事からサイトマップを生成し、下書きは一覧にも公開成果物にも含めません。
各言語に自己canonicalを持たせ、対応する日英ページをhreflangで関連付けます。OGP画像は記事冒頭と一覧にも表示し、共有先の見出しと読んだ記事の内容が対応するようにしています。メタ情報を整えても、検索への登録や順位が保証されるわけではありません。
探す操作は、ブラウザ内で完結させる
一覧ではタイトル、要約、タグをキーワードで検索し、タグで絞り込めます。検索用の外部APIへ問い合わせず、入力した言葉も送信しません。日本語・英語の両方で利用でき、言語を切り替える際は絞り込みの状態を引き継ぎます。
全記事のリンクは最初からHTMLへ含めています。検索が動かない環境でも一覧を読め、検索やタグごとの空ページを増やさない構成です。記事数や全文検索の必要性が増えた段階で、索引の作り方を再検討します。
公開するファイルを、最後に確認する
Astroの生成結果をそのまま全部公開せず、公開ルートと許可したアセットだけを配信用ディレクトリへ集めます。原稿、内部文書、設定、認証情報は配信しません。ビルド後はリンク、画像、言語、ページ情報を検証し、Previewで実際の表示を確認します。
Gitでの更新は原稿とコードを一緒にレビューできる一方、編集にも開発環境が必要です。複数の編集者がブラウザから更新する運用になった場合は、CMSの利用を改めて検討します。ページをどのクラウドへ配信するかは、クラウド基盤の構成で説明しています。
