---
# System prepended metadata

title: 關於 Metadata
tags: [Next.Js 14 with APP Router]

---

關於 Metadata (靜態版)
===

###### With Next.js App Router
:::info
:radio_button: [回到目錄攻略](https://hackmd.io/@hJJ8etrATgudRfKA1gryew/BJiplPwMC)
:::

0.啥是Metada?
---
就ChatGPT的解釋，我覺得非常精闢：
- `Metadata` 是描述資料的資料，它提供有關資料的資訊，例如資料的類型、結構、內容或其他屬性。
- 在網頁開發中，`Metadata` 通常用於**描述網頁的信息**，例如標題、描述、關鍵字等。
- 這些信息可以**幫助搜索引擎理解和索引網頁內容**，同時也可能影響網頁在搜索結果中的排名和展示方式。
- `Metadata` 還可以用於描述文件、圖片、視頻等各種類型的資料。

1.網標產生器
---
<font color="#F7A004">**先看最後成果**</font>
- 主頁網標：

![image](https://hackmd.io/_uploads/rkGWTeMmA.png)

- 子頁標題：

![image](https://hackmd.io/_uploads/rylVlWfQ0.png)

- 子頁副主題 | 子頁標題：

![image](https://hackmd.io/_uploads/H1uSpezm0.png)

<font color="#F7A004">**怎麼寫**</font>

要跟以上例子一樣，主頁與子頁各一自己的標題，而進入到各自的副主題後，又能夠加入前綴或後綴，可以醬子寫：

> @locale/ ${AREA} /layout.tsx

```typescript=
import type { Metadata } from "next";
...
// 在主題建立網標模板
export const metadata: Metadata = {
  title: {
    template: "%s | ${Your Own Title}",
    default: "${Your Own Title}",
  },
};
```

> @locale/ ${AREA} / ${CITY} /page.tsx

```typescript=
// 副標即能使用模板
export const metadata: Metadata = {
  title: ${CITY},
  },
}
```

2.openGraph
---
:round_pushpin:openGraph是什麼？詳細請參考：
[Open Graph 介紹：讓網站在社群上被漂亮分享，就靠 OG 標籤！](https://frankchiu.io/seo-open-graph/)

簡要來說，就是將一網站分享至社群時，其預覽顯示的縮圖、標題、描述，都會跟你在`<head></head>`裡所設定的`openGraph`有關。

<font color="#F7A004">**先看最後成果**</font>
這是在網頁HTML中的`<head></head>`裡，最後所包含`openGraph`呈現的程式碼：
![image](https://hackmd.io/_uploads/ByfDykQXC.png)
（還有很多項目，這邊先只舉例`title`和`description`）

<font color="#F7A004">**怎麼寫**</font>
`Next.App14`的`APP Router`超貼心，已寫好MetaBase的語法，協助自動生成瀏覽器看得懂的HTML。

> @locale/ ${AREA} /layout.tsx

```typescript=
import type { Metadata } from "next";
...
export const metadata: Metadata = {
  title: {
    template: `%s | ${Your Own Title}`,
    default: `${Your Own Title}`,
  },
  // +
  openGraph: {
    title: `${Your Title}`,
    description:
      `${Your Description}`,
  },
};
```

3.hreflang 標籤
---
想做好跨國網站SEO，即可以在網頁內埋設`hreflang`標籤，告訴搜尋引擎該頁面的主要語系或國家地區為何。

:round_pushpin:文章補充：
[想要產品外銷國際？awoo教你多語系網站外銷SEO必做的四件事](https://www.awoo.ai/zh-hant/blog/international-and-multilingual-website-seo/)

<font color="#F7A004">**先看最後成果**</font>
這是在網頁HTML中的`<head></head>`裡，最後所包含`hreflang`呈現的程式碼：

![image](https://hackmd.io/_uploads/r13RSeMmC.png)

<font color="#F7A004">**怎麼寫**</font>
`Next.App14`的`APP Router`超貼心，已寫好MetaBase的語法，讓你無痛生成瀏覽器看得懂的HTML。

> @locale/${AREA}/layout.tsx

```typescript=
export const metadata: Metadata = {
  title: {
    template: `%s | ${Your Own Title}`,
    default: `${Your Own Title}`,
  },
  openGraph: {
    title: `${Your Title}`,
    description:
      `${Your Description}`,
  },
  // (+)
  metadataBase: new URL("http://localhost:3000"),
  alternates: {
    languages: {
      en: "/en/${AREA}",
      zh: "/zh/${AREA}",
    },
  },
};
```

參考
---
- [Next.Js: Metadata Object and generateMetadata Options](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)

