#21 No-code 之旅 — 如何让网站在分享时看起来漂亮和有吸引力？Open Graph (OG) 简介

大家有没有发现当有人在社群软件分享网址的时候，通常除了网址本身还会看到一张缩图加上网站的标题和描述？这就是用 Open Graph (OG) 设定出来的！今天会解释一点点什麽是 OG tag (标签)，加上怎麽在 Next.js 专案中设定 OG 标签～

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 内容～

测试

最後，想要测试或是预览我们的 OG 标签有没有正常运作可以看看下面这些工具：

小结

今天会讲到 Open Graph 的原因是因为如果之後要做个人网页，一定会需要设定 OG 标签，不然在分享的时候，看不到网页的任何资讯感觉很可惜。尤其是如果有做部落格，通常每篇文章会有不同的缩图、标题、描述，这些都需要特别去设喔，像这样～

RSS

大家想要看看之前的网站可以看这里，或是直接到首页～ 有任何问题可以问我，或是也可以讨论未来要开发的 No-code 专案喔。

祝大家明天上班上课愉快！

晚安 <3

看更多


<<:  DAY21 - 网页可以操作电脑里的档案？！本地端档案覆写 - The File System Access API

>>:  自动化 End-End 测试 Nightwatch.js 之踩雷笔记：Timezone

DAY28 欸你Git来一下

自从国高中我的房间出现了电脑，虽然是很废的文书机，但它还是在夜深人静的凌晨抚慰我睡不着的心情。方形的...

【Day17-音讯】浅谈声音资料的基本分析方式——时间域与频率域

如同我们在Day14的时候提到的最常出现的四种资料类型，而前两天我们稍微谈了一下文字资料的基本处理，...

卡夫卡的藏书阁【Book21】- Kafka - KafkaJS 消费者 3

“Now I can look at you in peace; I don't eat you ...

Day 27 : Github Actions实作自动化推上Azure

在前一些日子的铁人赛中，我曾经写过关於Docker in Azure的文章，今天我们接续昨天的Git...

Day02-制作Line Bot 前置作业(注册Line Developers帐号

要将自己的聊天机器人发布在Line这个平台之前，我们需要有Line开发者(Line Develope...