如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介
如何讓網站在分享時看起來漂亮和有吸引力？Open Graph (OG) 簡介
如何讓網站在分享時看起來漂亮和有吸引力？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> 標籤去設定：
比如下面是字节系的coze的示例：
xml:
<title>扣子</title>
<meta property="og:type" content="website">
<meta property="og:title" content="扣子-AI 智能体开发平台">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="扣子-AI 智能体开发平台">
<meta property="og:description" content="扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力，扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体，并发布到豆包、飞书等各个平台。">
<meta name="description" content="扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力，扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体，并发布到豆包、飞书等各个平台。">
<meta name="twitter:description" content="扣子是新一代 AI 大模型智能体开发平台。整合了插件、长短期记忆、工作流、卡片等丰富能力，扣子能帮你低门槛、快速搭建个性化或具备商业价值的智能体，并发布到豆包、飞书等各个平台。">
有沒有發現上面的例子有出現新的標籤，就是 og:description 為網頁的描述或是簡短說明
社群軟體的特別標籤
除了一般的用 og 開頭的 OG 標籤之外，你可能會看到 fb 或 twitter 開頭的標籤，用途就是該社群軟體可以拿到更詳細的資訊而比較豐富的呈現方式喔～
Facebook 標籤
其實 Facebook 只有一個比較特別的標籤，也就是 fb:app_id。如果你有 Facebook 到粉專或 Facebook Page，可以用你的 App ID 來分析有幾個觀看者來自你的 Facebook 粉專。
Twitter 標籤
Twitter 提供比較多的 OG 標籤，雖然他們也可以用一般 OG 標籤的資訊去顯示內容，可是 Twitter 支援比較多客製化的內容～
在 Next.js 中加 OG 標籤,在seo.js中
因為 OG 標籤需要加在 <head> 裡，所以我們可以用 Next.js 的 next/head 提供的 Head 元件來加我們所需要的 OG tags ～
javascript:
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 標籤有沒有正常運作可以看看下面這些工具：
小結
今天會講到 Open Graph 的原因是因為如果之後要做個人網頁，一定會需要設定 OG 標籤，不然在分享的時候，看不到網頁的任何資訊感覺很可惜。尤其是如果有做部落格，通常每篇文章會有不同的縮圖、標題、描述，這些都需要特別去設喔，像這樣～