Skip to content

社交卡片設定

Social Cards（社交卡片）是在社交媒體（如 Twitter、Facebook、LinkedIn）分享你的網站時，自動生成 預覽圖片（OG Image） 的功能。這可以讓你的 MkDocs Material 網站 在分享時 更具吸引力！ 🚀

🔹 1. 啟用 Social Cards

在 mkdocs.yml 啟用 Social Cards：

plugins:
  - social

📌 這會自動為每個網頁生成 Open Graph（OG）圖片，適用於社交媒體分享時顯示預覽圖！

注意：如果要使用social card，mkdocs.yml裡面一定要設定site_url，不然沒有辦法正確連結到生成的圖片。

🔹 2. 使用方式

主要是要在 .md 檔最前面的 front matter 中，加入title跟description兩個屬性。或使用cards_layout_options.title以及cards_layout_options.description。

範例:

index.md
---
title: 我的首頁
description: 這是我用mkdocs做出來的網頁
---

# page title
...

🔹 3. 設定字型

我是用繁體中文，所以我設成Noto Sans TC。

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans SC

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans TC

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans JP

plugins:
  - social:
      cards_layout_options:
        font_family: Noto Sans KR

🔹 4. 設定卡片顏色及背景圖案

針對每一個網頁，我們都可以在對應的.md檔的front matter中，設定背景顏色跟背景圖片。

---
social:
  cards_layout_options:
    background_color: blue # Change background color
    background_image: null # Remove background image
---

# Page title
...

🔹 5. 關閉Social Card

如果要針對特定的網頁關閉其social card，可以在對應的.md檔的front matter中，關閉social card功能。

---
social:
  cards: false
---

# Page title
...

客製化 Social Card

關於其他客製化的方式，請參考官網Customization的章節！

🔹 6. 手動測試 Social Cards

你可以使用以下工具來測試：

📌 複製你的網頁連結，貼到這些工具來測試社交卡片是否正確顯示！

📝 總結

設定項目 設定方式
啟用 Social Cards plugins: - social
設定網頁社交圖片 請設定title及description屬性
關閉網頁社交圖片 請設定social.cards:false
測試預覽 用 Facebook、Twitter、LinkedIn 測試工具

📌 這樣你的 MkDocs Material 網站在社群分享時，就能擁有美觀的預覽圖片！ 🚀🔥