Zenn
Closed5

Next.jsの理解を深める！Chapter 16-17

Next.js
metadata
App Router
nakamotonakamoto

Chapter 16（first）

What is metadata?
In web development, metadata provides additional details about a webpage. Metadata is not visible to the users visiting the page. Instead, it works behind the scenes, embedded within the page's HTML, usually within the <head> element. This hidden information is crucial for search engines and other systems that need to understand your webpage's content better.

  • メタデータとはWeb開発においてWebページに関する追加の詳細情報を提供する。メタデータはWebページを訪れるユーザーには直接見えず、WebページのHTML、通常は <head> 要素に埋め込まれ、裏で機能する。この隠された情報は、Webページの内容をよりよく理解する必要がある検索エンジンやその他のシステムにとって重要である。

Why is metadata important?
Metadata plays a significant role in enhancing a webpage's SEO, making it more accessible and understandable for search engines and social media platforms. Proper metadata helps search engines effectively index webpages, improving their ranking in search results. Additionally, metadata like Open Graph improves the appearance of shared links on social media, making the content more appealing and informative for users.

  • メタデータは、WebページのSEOを強化する上で重要な役割を果たす。これにより検索エンジンやソーシャルメディアプラットフォームがWebページをよりアクセスしやすく、理解しやすくなる。適切なメタデータは検索エンジンがWebページを効果的にインデックス化するのを助け、検索結果でのランキングを改善する。さらに、オープングラフのようなメタデータは、ソーシャルメディアで共有されるリンクの見栄えを改善し、ユーザーに対しコンテンツをより魅力的で情報豊富に見せる効果がある。

Types of metadata

Title Metadata: Responsible for the title of a webpage that is displayed on the browser tab. It's crucial for SEO as it helps search engines understand what the webpage is about.

<title>Page Title</title>

Description Metadata: This metadata provides a brief overview of the webpage content and is often displayed in search engine results.

<meta name="description" content="A brief description of the page content." />

Keyword Metadata: This metadata includes the keywords related to the webpage content, helping search engines index the page.

<meta name="keywords" content="keyword1, keyword2, keyword3" />

Open Graph Metadata: This metadata enhances the way a webpage is represented when shared on social media platforms, providing information such as the title, description, and preview image.

<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />

Favicon Metadata: This metadata links the favicon (a small icon) to the webpage, displayed in the browser's address bar or tab.

<link rel="icon" href="path/to/favicon.ico" />
nakamotonakamoto

Chapter 16（second）

Adding metadata
Next.js has a Metadata API that can be used to define your application metadata. There are two ways you can add metadata to your application:

Config-based: Export a static metadata object or a dynamic generateMetadata function in a layout.js or page.js file.

File-based: Next.js has a range of special files that are specifically used for metadata purposes:

favicon.ico, apple-icon.jpg, and icon.jpg: Utilized for favicons and icons
opengraph-image.jpg and twitter-image.jpg: Employed for social media images
robots.txt: Provides instructions for search engine crawling
sitemap.xml: Offers information about the website's structure
You have the flexibility to use these files for static metadata, or you can generate them programmatically within your project.

With both these options, Next.js will automatically generate the relevant <head> elements for your pages.

  • Next.jsには、アプリケーションのメタデータを定義するためのメタデータAPIがある。
    アプリケーションにメタデータを追加する方法は2つある。
    設定ベース：layout.js や page.js ファイルで、静的なメタデータオブジェクトまたは動的な generateMetadata 関数をエクスポートします。
    ファイルベース：Next.jsにはメタデータ目的の為に特別に使用されるさまざまな特別なファイルがある。
    favicon.ico apple-icon.jpg icon.jpg：ファビコンやアイコンとして利用される。
    opengraph-image.jpg twitter-image.jpg：ソーシャルメディアの画像として使用される。
    robots.txt：検索エンジンのクローリングに関する指示を提供する。
    sitemap.xml：ウェブサイトの構造に関する情報を提供する。
    これらのファイルを静的なメタデータとして使用することもプロジェクト内でプログラム的に生成することもできる。これらの両方のオプションを使用するとNext.jsはページのための関連する<head>要素を自動的に生成する。

Favicon and Open Graph image
In your /public folder, you'll notice you have two images: favicon.ico and opengraph-image.jpg.

Move these images to the root of your /app folder.

After doing this, Next.js will automatically identify and use these files as your favicon and OG image. You can verify this by checking the <head> element of your application in dev tools.

  • /publicフォルダのfavicon.icoとopengraph-image.jpgの2つの画像を/appフォルダのルートに移動する。これを行うとNext.jsは自動的にこれらのファイルをファビコンとOGイメージ（Open Graphイメージ）として識別し使用する。

Page title and descriptions
You can also include a metadata object from any layout.js or page.js file to add additional page information like title and description. Any metadata in layout.js will be inherited by all pages that use it.

In your root layout, create a new metadata object with the following fields:

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}
  • layout.jsまたはpage.jsからメタデータオブジェクトを含めることで、タイトルや説明などの追加ページ情報を指定できる。layout.js内のメタデータはそれを使用するすべてのページに継承される。

Next.js will automatically add the title and metadata to your application.

But what if you want to add a custom title for a specific page? You can do this by adding a metadata object to the page itself. Metadata in nested pages will override the metadata in the parent.

For example, in the /dashboard/invoices page, you can update the page title:

/app/dashboard/invoices/page.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};
  • 特定のページにカスタムタイトルを追加したい場合はページ自体にメタデータオブジェクトを追加する。ネストされたページ内のメタデータは、親ページのメタデータを上書きする。
nakamotonakamoto

Chapter 16（third）

you can use the title.template field in the metadata object to define a template for your page titles. This template can include the page title, and any other information you want to include.

In your root layout, update the metadata object to include a template:

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
/app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
  title: 'Invoices',
};
  • メタデータオブジェクトのtitle.templateを使うとページタイトルのためのテンプレートを定義できる。このテンプレートにはページタイトルや、含めたいその他の情報を含むことができる。

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function

  • generateMetadataを使用することによって動的にメタデータを設定できる。
このスクラップは2024/01/26にクローズされました