Next.js

メタデータの設定

https://nextjs.org/docs/app/getting-started/metadata-and-og-images

<title> や <meta name="description" content="..." /> など、ページのメタデータをNext.jsで設定する方法。

<link rel="canonical" href="..."> などの設定も含む。

3つ方法がある。

• 静的な metadata オブジェクトで指定する
• 動的な generateMetadata 関数で指定する
• メタデータ用の特殊なファイルを設置する（faviconやOGPの設定がメイン）

meta タグの charset と viewport は設定しなくてもデフォルトで追加される。

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

metadata オブジェクトを使用した方法

layout.tsx または page.tsx で metadata オブジェクトをエクスポートする。

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Blog',
  description: '...',
}

静的に指定できる場合はこの方法を使う。

generateMetadata 関数を使用した方法

layout.tsx または page.tsx で generateMetadata 関数をエクスポートする。

type Props = {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = (await params).slug
 
  // fetch post information
  const post = await fetch(`https://api.vercel.app/blog/${slug}`).then((res) =>
    res.json()
  )
 
  return {
    title: post.title,
    description: post.description,
  }
}

戻り値は metadata オブジェクトと同じ型。

動的に指定したい場合はこの方法を使う。

generateMetadata 関数はページコンポーネントと同じように params と searchParams を引数として受け取る。さらに親で解決されたメタデータも受け取る。

generateMetadata 内でfetchを行う場合はそのページ内で行われるfetchと同じURL、同じオプションにした方がいい。URLやオプションが異なるとfetch結果がキャッシュされないので、メタデータ用のfetchとページ用のfetchがそれぞれ別々に実行されてしまう。（ちょっと自信ない）

公式ページの説明では React.cache を使うべき、と書かれているが fetch の場合は Request Memoization が効くはず。

動的レンダリングの場合、メタデータもストリーミングで配信される。が、それだとSEO的に意味をなさないため、ユーザーエージェントを基にメタデータのストリーミングを無効化できる機能が備わっている。ユーザーエージェントの指定は next.config.js の htmlLimitedBots から行える。デフォルトですでにGoogleクローラーなどが指定されているためそこまで意識する必要はない。

特殊ファイルの設置

• favicon.ico, apple-icon.jpg, and icon.jpg （ファビコン系）
• opengraph-image.jpg and twitter-image.jpg （OGP）
• robots.txt
• sitemap.xml

これらを app ディレクトリ内に配置すると自動的に meta タグとして使用される。

ChatGPT Atlas

https://openai.com/index/introducing-chatgpt-atlas/

ChatGPT を搭載したWebブラウザ。Chromium ベース。

• サイドバーで ChatGPT を使用できる
• ブラウザの履歴も遡る（オプトイン方式）
• エージェントモードでタスクの遂行が可能

他のAIブラウザを使ったことがないので何が優れているのかはよくわからないが、エージェントモードが評判いいらしい。

エージェントモード

サイトに対しての操作を自然言語でChatGPTに依頼できる。

使用には ChatGPT Plus 以上のアカウントが必要。

実際に使ってみるとなかなか面白い。

サイトの操作方法（どこをクリックするべきかなど）から考えてくれるみたいで、ChatGPTが試行錯誤しているのをリアルタイムで見ていると少し心が温まる。

試しに「エージェントモードを使ってnotionのこのページを複製して適切に添削して。複製したページは「20251024（複製）」でお願いします。」みたいな適当な依頼でもちゃんと複製、タイトル修正、内容の添削まで行ってくれた。

どこまでできるのか気になるので色々試してみた

エージェントモードを使って直近でAmazonで買った商品の領収書ダウンロードして。

途中でAmazonのログインを促されるのでそれは手作業で行う。

その後自動的にページ遷移が進み、無事直近の領収書が表示された。

現時点のエージェントモードではファイルのダウンロード機能がないみたいなのでPDFの表示まで。

夕飯にニンジンと肉を使った料理を作りたい。
cookpadにあるレシピで評価が高くて簡単なやつ。
エージェントモードでなんとかして。

一応ChatGPT上でレシピが返ってきた。

よく考えたらこれはChatGPT AtlasでやらずにChatGPTで直接聞くので十分だな。

返ってきたレシピはこちら。

https://cookpad.com/jp/recipes/18979665