up
1
date
‣
vip
slug
0812095149
type
Post
CreatedTime
Aug 12, 2023 01:51 AM
status
Published
tags
Code
summary
如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
Link
category
Notion
password
IP
Email
如何讓網站在分享時看起來漂亮和有吸引力?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
,必須要有的標籤,內容有四種選擇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://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 標籤有沒有正常運作可以看看下面這些工具:
- Free Open Graph Generator and Preview,這工具除了能看到 Facebook、Twitter、LinkedIn、Discord 上的結果,還可以幫產生 OG 標籤~
小結
今天會講到 Open Graph 的原因是因為如果之後要做個人網頁,一定會需要設定 OG 標籤,不然在分享的時候,看不到網頁的任何資訊感覺很可惜。尤其是如果有做部落格,通常每篇文章會有不同的縮圖、標題、描述,這些都需要特別去設喔,像這樣~