關於 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>
- 主頁網標：
- 子頁標題：
- 子頁副主題 | 子頁標題：
<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`呈現的程式碼：
（還有很多項目，這邊先只舉例`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`呈現的程式碼：
<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)
Sign in with Wallet
Connect another wallet