フロントエンド Next.js 13 アプリディレクトリ:メタデータの適用

App Directory では、従来の Head タグの代わりにメタデータを利用して<head> HTML 要素を変更することができます。メタデータはlayout.jsまたはpage.jsファイルでexport const metadataとして定義することができます。

説明

layout.js

export const metadata = {
  title: { default: 'KAKAO.GG', template: '%s | KAKAO.GG' },
  description: 'KAKAO.GG! Tech Blog',
  keywords: ['IT', 'Coding'],
}

様々なオプション

様々なオプションが存在するため、メタデータを作成する際に使用してください。

  • Name
    generator
    Type
    オプション
    Description

    使用されたソフトウェアの名前を示します

    <meta name="generator" content="Next.js">
    
  • Name
    applicationName
    Type
    オプション
    Description

    ウェブアプリケーションの名前を示します。

    <meta name="application-name" content="Next.js">
    
  • Name
    referrer
    Type
    オプション
    Description

    ブラウザがHTTPリファラヘッダーをどのように送信するかを指示します

    <meta name="referrer" content="origin-when-cross-origin">
    
  • Name
    keywords
    Type
    オプション
    Description

    ウェブページのキーワードを定義します

    <meta name="keywords" content="Next.js,React,JavaScript">
    
  • Name
    authors
    Type
    オプション
    Description

    ウェブページの作成者情報

    <meta name="author" content="cptkuk91"/>
    
  • Name
    colorScheme
    Type
    オプション
    Description

    ブラウザのUIに関連する基本的なカラースキーム

    <meta name="color-scheme" content="dark">
    
  • Name
    creator
    Type
    Description
    <meta name="creator" content="cptkuk91">
    
  • Name
    publisher
    Type
    オプション
    Description

    アプリの発行者や所有者情報

    <meta name="publisher" content="cptkuk91">
    
nextjs13

Dynamic Metadata?

動的なメタデータを活用するには、単にメタデータを使用するだけでは十分ではありません。したがって、generateMetadataを活用する必要があります。

様々なタイトルとコンテンツの投稿が存在するため、動的なメタデータを適用する必要があります。

generateMetadataを使用して適用できます。

レイアウトに適用するのではなく、 post/[id]/page.tsxに適用します。

下記のコードを使用してメタデータを生成すると、各投稿のタイトルをメタデータのタイトルと説明として活用できます。

/app/post/[id]/page.tsx

const getPost = async (id: string) => {
const post: PostType | null = await prisma.post.findUnique({
    where: { id },
});
export const generateMetadata = async ({ params }: any): Promise<Metadata> =>
{
    const data = await getData(params.id)
    return {
        title: data.title,
        description: post?.snippet,
    }
}