iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0
Modern Web

手刻部落格,從設計到部署的實戰攻略系列 第 22

網站能見度(一):淺談 SEO 及 Open Graph

  • 分享至 

  • xImage
  •  

這講我們來聊聊,網站上線後需要考慮的兩件事:搜尋及分享。

大家在談論網路行銷的時候,一個繞不開的名詞叫做 SEO,全稱為 Search Engine Optimization(搜尋引擎優化),其目的是讓你網站能被搜尋引擎更好地理解、索引,最後評分,才能夠更容易被搜尋引擎放在好的位置。

而另外一個名詞 Open Graph(OG) 則是和分享有關,這是由 Facebook 提出的社群分享預覽協定。當我們的文章連結被分享到 FB、Line 等平台時,平台會抓取 og:* 的標籤來產生縮圖、標題、描述等卡片預覽,好看與否會影響到 CTR(Click-Through Rate,點閱率)。

簡單來說,SEO 是爭取在搜尋結果中被更好的看見,而 Open Graph 則是被分享時讓人更想點進來,我們接著聊聊這兩個話題。

SEO

說到搜尋,即便在 AI 也能搜尋的現在(2025-09),Google 依舊是絕對的王者,長年佔據 9 成左右的搜尋流量,所以可以說,要做 SEO,只要能提高在 Google 的搜尋排名即可。
Statcounter Global Stats

*Statcounter Global Stats 統計數據(2009-01 - 2025-08)

Google 也有提供官方文件 SEO Starter Guide,來介紹一個網站該怎麼做,能夠提高在 Google SEO 中的評分。

一個搜尋引擎的原理簡單來說,就是定期透過爬蟲程式把網站的所有可見內容抓下來,儲存並分析,因此 SEO 的基礎就是讓網站的架構更清楚,能更容易被分析。

根據 Google SEO Starter 的建議,以下介紹基本的 SEO 策略:

  1. 確保能被收錄:正規的爬蟲程式會讀取網站中 robots.txt,我們可以在這個檔案中告訴爬蟲哪些頁面可以爬、哪些不行,確保爬蟲程式不會錯過重要的頁面
  2. 清晰的層級和網址:頁面 URL 要可以預測,例如主題(/topic)、子主題(/topic/sub-topic)、文章(/topic/sub-topic/some-article
  3. 內容聚焦主題:主題清晰,首段可以先講結論再補充細節,這對於搜尋引擎來說可以更容易產出「摘錄」
  4. Sitemap:提供 XML Sitemap,並在 robots.txt 中指出,這可以讓搜尋引擎更了解整個網站架構
  5. 速度及體驗:我們曾在衡量網站效能談過的 CWV(Core Web Vitals),會在爬蟲程式抓取頁面時被計算,能夠載入夠快、版面不會跑掉,就能提高評分
  6. 連結策略:盡量放高品質的 References(如官方文件、原始資料等),若是廣告則可以在連結中加入 rel="nofollow sponsored ugc" 來降低權重

上面所說的策略都是在建構網站時的 SEO 基本題,長期來看,還是要看內容是否能吸引讀者閱讀。

Open Graph

而針對 Open Graph,就比較沒有像 SEO 這麼博大精深的學問了,我們需要聚焦的就僅僅是提供社群平台精確的資料,讓其呈現一個清晰、好看的卡片。

在分享連結給這些平台時,他們會抓取頁面 <head /> 中的 og:* 資訊,例如以下的 og:titleog:image 等等。

<head>
  <title>The Rock (1996)</title>
  <meta property="og:title" content="The Rock" />
  <meta property="og:type" content="video.movie" />
  <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
  <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
</head>

在填入 Open Graph 的資訊時,有一些策略可以參考:

  1. og:title:包含主題的關鍵字,以及避免標題黨
  2. og:type:文章使用 article、其他頁面使用 website
  3. og:urlog:site_name:絕對 URL 和網站名稱也是必填的
  4. og:image:這是 CTR 的關鍵,好的選圖能夠吸引點擊。而每個平台會對大小需求有點差異,參照 Facebook 的官方建議,可以使用 1200 x 630 px
  5. 其他可以加分的還包含:og:description,用簡單幾句話把價值講清楚,並且和內文表達一致; og:localeog:locale:alternate 則標記我們部落格的語言、地區,有其他什麼語系可選
  6. 如果是文章的話,也可以加上 article:published_timearticle_modified_timearticle:tag

上述提到的 og:* 雖然已經覆蓋蠻多常用的平台,但如果需要支援 X(Twitter)的話,就要用他們自己的 twitter:cardtwitter:titletwitter:description 等等標籤。

參考資料

  1. Google Search Central - Search Engine Optimization (SEO) Starter Guide
  2. The Open Graph protocol
  3. Statcounter - Search Engine Market Share Worldwide
  4. Cloudeflare - What is robots.txt
  5. Facebook Developers - Images in Link Shares

上一篇
瀏覽計數器(三):實作計數器,Astro 整合 API
下一篇
網站能見度(二):實戰 SEO in Astro,Sitemap 及 robots.txt
系列文
手刻部落格,從設計到部署的實戰攻略23
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言