如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
up
1
date
vip
slug
0812095149
status
Published
tags
Code
type
Post
summary
如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
category
Notion
password

如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介

如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
大家有沒有發現當有人在社群軟體分享網址的時候,通常除了網址本身還會看到一張縮圖加上網站的標題和描述?這就是用 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://xxxx" /> <meta property="og:type" content="article" /> <meta property="og:title" content="XXX" /> <meta property="og:description" content="XXX" /> <meta property="og:image" content="https://XXX.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,必須要有的標籤,內容有四種選擇 summarysummary_large_imageappplayer
  • twitter:site,網頁歸屬 (@username),例如 nytimes.com 會設定 @nytimes
  • twitter:creator,網頁內容的創作者歸屬 (@username)
以 iT 邦幫忙 為例子:
<meta name="twitter:card" content="summary_large_image"> <meta property="og:url" content="https://XXX/"> <meta property="og:type" content="website"> <meta property="og:title" content="XXX"> <meta property="og:description" content="XXX"> <meta property="og:image" content="XXX.jpg">

在 Next.js 中加 OG 標籤,在seo.js中

因為 OG 標籤需要加在 <head> 裡,所以我們可以用 Next.js 的 next/head 提供的 Head 元件來加我們所需要的 OG tags ~
import BLOG from '@/blog.config' import Head from 'next/head' import { useRouter } from 'next/router' const SEO = ({ meta }) => { const router = useRouter() const url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link return ( <Head> <title>{meta.title}</title> <meta name='robots' content='follow, index' /> <meta charSet='UTF-8' /> {BLOG.seo.googleSiteVerification && ( <meta name='google-site-verification' content={BLOG.seo.googleSiteVerification} /> )} {BLOG.seo.keywords && ( <meta name='keywords' content={BLOG.seo.keywords.join(', ')} /> )} <meta name='description' content={meta.description} /> <meta property='og:locale' content={BLOG.lang} /> <meta property='og:title' content={meta.title} /> <meta property='og:description' content={meta.description} /> <meta property='og:url' content={meta.slug ? `${url}/${meta.slug}` : `${url}${router.asPath}`} /> <meta property='og:image' content={meta.ogimage ||`${url}{BLOG.defaultIcon}`} /> <meta property="og:site_name" content={BLOG.title} /> <meta property='og:type' content={meta.type} /> <meta name='twitter:card' content="summary_large_image" /> <meta name='twitter:description' content={meta.description} /> <meta name='twitter:title' content={meta.title} /> <meta name='twitter:image' content={meta.ogimage || BLOG.defaultCover} /> {meta.type === 'article' && ( <> <meta property='article:published_time' content={meta.date} /> <meta property='article:author' content={BLOG.author} /> </> )} </Head> ) } export default SEO
 

測試

最後,想要測試或是預覽我們的 OG 標籤有沒有正常運作可以看看下面這些工具:
 
 
notion imagenotion image

小結

今天會講到 Open Graph 的原因是因為如果之後要做個人網頁,一定會需要設定 OG 標籤,不然在分享的時候,看不到網頁的任何資訊感覺很可惜。尤其是如果有做部落格,通常每篇文章會有不同的縮圖、標題、描述,這些都需要特別去設喔,像這樣~
꧁不要咖啡,来个鸡蛋灌饼吧꧂