つくる - 検索とSNSに強く

仕上げの回です

第7章で覚えたのは、metadata と generateMetadata と openGraph、それに next/image と next/font でした。今日は新しいことを覚えず、これを fleama にまとめて入れます。

どれも画面の見た目はほとんど変わりません。変わるのは、検索から来た人が最初に見る文字と、リンクを貼られたときのカードと、写真が出るまでの速さです。作っている本人には見えにくいところなので、最後にまとめて手を入れる回を置いています。

どこに何を書くか

置き場所を整理します。

全ページで同じもの はルートレイアウトに書きます。サイト名のタイトル、サイトの説明文、共通の OGP 画像、それに書体です。1か所書けば下のページ全部に効きます。

ページごとに変わるもの はそのページに書きます。商品詳細のタイトルと OGP は商品名や商品 ID から作るので、generateMetadata を使います。ここで openGraph を書いたら、レイアウト側とは入れ替わることを思い出してください。ページ側に出したいものを全部書きます。

画像 は書いてある場所で置き換えます。img を Image にして、width と height と alt を付けます。

見落としやすいところ

書体の呼び出しを関数の中に入れてしまうと動きません。ファイルの外側に1回だけ書きます。

images を配列にし忘れるのもよくある間違いです。1枚でも角かっこで囲みます。

generateMetadata は params を await してから使います。第2章のページ本体と同じ書き方です。

演習

fleama の3ファイルに、第7章の内容をまとめて入れます。