NotionNext Facebook Open Graph url, image 優化, Vercel 衝突解決！

English Title

简体标题

type

Post

status

Published

date

Apr 4, 2022

slug

notionnext-fix-facebook-open-graph-url-image-vercel-env-conflict

summary

問題描述什麼是 NotionNext? NotionNext 是一個很棒的 Next.js Blog 系統，它可以讓我使用 Notion 當作寫作的 cms，而網站只要架在 Vercel 上即可，十分方便！ 什麼是 OpenGraph? 遇到什麼問題? 不過當我們要分享我寫好的文章給 Facebook 上的朋友，我們便會遇到 NotionNext 對於 Meta ( Facebook ) OpenGraph 比較支援不足的部分，主要是 url 沒有把 slug 整合好，以及 og:image 沒有整合 Notion 的 coverPhoto 發佈到 Vercel 上，跟 Facebook Open Graph 出現了什麼衝突？ 再來，後面又遇到一個問題，NotionNext 使用 PATH 這個 .env 環境變數，不過這個變數使用 Vercel 發布的時候，Vercel 使用這個環境變數來存 linux 的路徑(👇圖)，造成 og:url 會抓到機器內部的檔案位置！ 解決方法拆分主題與元件 Meta 參數 我在 NotionNext 2.8.1 的時候，拆分了內建的 hexo 主題，後來 @tanley1024 作者在 2.9.1 版本做了滿多的改動，主要把 meta 這個 props 從主題內的元件拆分到通用的 components，所以我先把主題內的 meta 通通清掉，再把 slug 與 url 整合進去 meta 內，即可修正好這個問題！ 處理衝突的 PATH 參數 正當我把所有問題都解掉的時候，發佈到 Vercel 上，跑出奇怪的 Linux 路徑，看來是 PATH 這個換境變數出錯了，沒關係，我們換個名稱把 PATH 換成 SUB_PATH 即可，這樣路徑就不衝突了！結論把 Code 修一修，發 PR 啦！ <aside> 🤣 Vercel PATH env 會被讀出來會不會有點危險啊！ </aside> <aside> 🤩 寫 Code 寫得好開心啊！越來越順手了！ </aside>

問題描述

什麼是 NotionNext?

NotionNext 是一個很棒的 Next.js Blog 系統，它可以讓我使用 Notion 當作寫作的 cms，而網站只要架在 Vercel 上即可，十分方便！

什麼是 OpenGraph? 遇到什麼問題?

不過當我們要分享我寫好的文章給 Facebook 上的朋友，我們便會遇到 NotionNext 對於 Meta ( Facebook ) OpenGraph 比較支援不足的部分，主要是 url 沒有把 slug 整合好，以及 og:image 沒有整合 Notion 的 coverPhoto

Vercel 跟 Facebook Open Graph 出現了什麼衝突？

再來，後面又遇到一個問題，NotionNext 使用 PATH 這個 .env 環境變數，不過這個變數使用 Vercel 發布的時候，Vercel 使用這個環境變數來存 linux 的路徑(👇圖)，造成 og:url 會抓到機器內部的檔案位置！

解決方法

拆分主題與元件 Meta 參數

加入正確的 slug，抓取封面 image

我在 NotionNext 2.8.1 的時候，拆分了內建的 hexo 主題，後來 @tanley1024 作者在 2.9.1 版本做了滿多的改動，主要把 meta 這個 props 從主題內的元件拆分到通用的 components，所以我先把主題內的 meta 通通清掉，再把 slug 與 url 整合進去 meta 內，即可修正好這個問題！

處理衝突的 `PATH` 參數

`PATH` → `SUB_PATH`

正當我把所有問題都解掉的時候，發佈到 Vercel 上，跑出奇怪的 Linux 路徑，看來是 PATH 這個換境變數出錯了，沒關係，我們換個名稱把 PATH 換成 SUB_PATH 即可，這樣路徑就不衝突了！

結論

把 `Code` 修一修，發 PR 啦！

🤣

Vercel PATH env 會被讀出來會不會有點危險啊！

🤩

寫 Code 寫得好開心啊！越來越順手了！