Zenn
Open1

【技】metadata.tsファイルとは？

aiaiosaruaiaiosaru

metadata.tsファイルとは？

metadata.tsファイルは、Astroや他のフロントエンドプロジェクトで、主にページやコンポーネントのメタデータ（情報）を管理するために使われるTypeScriptファイルです。このファイルは、特定のページやサイト全体のSEOやページ情報を簡潔に整理・管理するためのものとして役立ちます。

主な用途

  • SEO情報の管理
    サイトのタイトル、説明、キーワードなどを一元管理し、ページごとに異なるメタデータを設定します。

  • 再利用性の向上
    メタデータを一箇所に集約し、他のページやコンポーネントで簡単に読み込み、使い回せるようにします。

  • TypeScriptの型定義
    型定義を活用することで、データの一貫性を保ち、エラーチェックや補完機能も強化します。

基本構成の例

以下に、metadata.tsの基本的な構成例を示します。

// metadata.ts

// 型定義
export interface PageMetadata {
  title: string;
  description: string;
  keywords?: string[];
}

// サイト全体のメタデータ
export const siteMetadata: PageMetadata = {
  title: "My Awesome Site",
  description: "This is an amazing website created with Astro.",
  keywords: ["Astro", "TypeScript", "Static Site", "Web Development"],
};

// ページごとのメタデータ
export const homePageMetadata: PageMetadata = {
  title: "ホームページ",
  description: "Astroで作成されたホームページです。",
};

export const aboutPageMetadata: PageMetadata = {
  title: "About Us",
  description: "会社概要やチーム紹介ページです。",
};

metadata.tsの使用例（index.astroファイル内）

---
import { homePageMetadata } from '../metadata';

<title>{homePageMetadata.title}</title>
<meta name="description" content={homePageMetadata.description} />
<meta name="keywords" content={homePageMetadata.keywords?.join(", ")} />
---