#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介

2021 iThome 鐵人賽

DAY 21

Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 21 篇

#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介

13th鐵人賽 react javascript nextjs open graph

Jade

2021-10-06 22:33:33

15015 瀏覽

大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (標籤)，加上怎麼在 Next.js 專案中設定 OG 標籤～

Open Graph (OG) 簡介

OG 的全名是 Open Graph Protocol，中文為 “開放社交關係圖”。OG 的目標是讓網頁在社交關係圖可以豐富的呈現出來。這協定讓我們分享任何網頁在社群軟體或其他地方時，不只用網址呈現，而用比較漂亮吸引人的方式呈現，例如縮圖、標題、描述等。這些資訊都跟 OG 有關，在做網站專案時我們要特別去做設定喔～
沒有設定其實也完全不影響功能，只是分享網頁的時候可能顯示的資訊並不是你想要的或是除了網址以外什麼都沒有。

基本的 OG 標籤

OG 標籤都會放在 <head> 裡，用 <meta> 標籤去設定：

og:title - 網頁標題
og:type - 內容的媒體類型，預設為 website
og:image - 分享網頁時會顯示的縮圖
og:url - 網頁的標準網址，也就是這網頁在社交關係圖中的 ID

來寫個例子，如果用這篇文章當範例：

<!-- property 是標籤名稱，content 是標籤的值 -->
<meta property="og:url" content="https://ithelp.ithome.com.tw/articles/10278469" />
<meta property="og:type" content="article" />
<meta property="og:title" content="#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介" />
<meta property="og:description" content="大家有沒有發現當有人在社群軟體分享網址的時候，通常除了網址本身還會看到一張縮圖加上網站的標題和描述？這就是用 Open Graph (OG) 設定出來的！今天會解釋一點點什麼是 OG tag (標籤)，加上怎麼在 Next.js 專案中設定 OG 標籤～" />
<meta property="og:image" content="https://i.imgur.com/D9cZHL7.png" />

有沒有發現上面的例子有出現新的標籤，就是 og:description 為網頁的描述或是簡短說明

社群軟體的特別標籤

除了一般的用 og 開頭的 OG 標籤之外，你可能會看到 fb 或 twitter 開頭的標籤，用途就是該社群軟體可以拿到更詳細的資訊而比較豐富的呈現方式喔～

Facebook 標籤

其實 Facebook 只有一個比較特別的標籤，也就是 fb:app_id。如果你有 Facebook 到粉專或 Facebook Page，可以用你的 App ID 來分析有幾個觀看者來自你的 Facebook 粉專。

Twitter 標籤

Twitter 提供比較多的 OG 標籤，雖然他們也可以用一般 OG 標籤的資訊去顯示內容，可是 Twitter 支援比較多客製化的內容～

twitter:card，必須要有的標籤，內容有四種選擇 summary，summary_large_image，app，player
twitter:site，網頁歸屬 (@username)，例如 nytimes.com 會設定 @nytimes
twitter:creator，網頁內容的創作者歸屬 (@username)

以 iT 邦幫忙 為例子：

<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://ithelp.ithome.com.tw/">
<meta property="og:type" content="website">
<meta property="og:title" content="iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天">
<meta property="og:description" content="iT 邦幫忙是 IT 領域的技術問答與分享社群，透過 IT 人互相幫忙，一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧，拯救下一個卡關的 IT 人">
<meta property="og:image" content="https://ithelp.ithome.com.tw/storage/image/fbpic.jpg">

在 Next.js 專案中加 OG 標籤

因為 OG 標籤需要加在 <head> 裡，所以我們可以用 Next.js 的 next/head 提供的 Head 元件來加我們所需要的 OG tags ～

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>2021 iTHome Day 07</title>
        <meta name="description" content="2021 iTHome Day 07 by Jade" />
        // OG TAGS～～～
        <meta property="og:title" content="2021 iTHome Day 07" />
        <meta property="og:description" content="2021 iTHome Day 07 by Jade" />
        ...
      </Head>
      <p>Hello world!</p>
      ...
    </div>
  )
}

export default IndexPage

如果有些標籤會重複出現在不同的頁面呢？我們也可以放在 pages/_app.js 裡！而且 Next.js 保證不會重複 render 一樣的標籤，前提是我們要給每個標籤一個 key：

<!-- pages/_app.js 裡 -->
<Head>
  <title>2021 iTHome Day 07</title>
  <meta property="og:title" content="2021 iTHome Day 07" key="title" />
</Head>

<!-- pages/rss.js 裡 -->
<Head>
  <meta property="og:title" content="RSS | 2021 iTHome Day 07" key="title" />
</Head>

上面出現了兩個 og:title 的標籤，可是因為給了 key="title" 讓 Next.js 知道這個指同一個標籤，Next.js 只會 render 最後一個標籤喔！

還有一件事，OG 標籤需要寫在伺服器回傳的 HTML 檔案裡面。如果是動態資料，然後伺服器回傳的 HTML 檔案裡沒有包含這些，而是等到瀏覽器去抓取動態資料再把 <head> 補齊，這麼做是沒有辦法正常顯示 OG 內容～