火燒的Gmail
No Result
View All Result
  • 全部文章
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 品牌故事
    • 娛樂新聞
  • 純文學
  • 日記
  • 手錶
  • 大人
  • 抖內支持
火燒的Gmail
  • 全部文章
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 品牌故事
    • 娛樂新聞
  • 純文學
  • 日記
  • 手錶
  • 大人
  • 抖內支持
No Result
View All Result
No Result
View All Result

分享Webflow網址URL給別人,卻顯示錯誤縮圖Thumbnail,語法Bug完整教學

2020/06/07
in Webflow, 網站技術
0
SHARES
386
VIEWS

新手剛開始使用Webflow架設網站,在透過LINE或Facebook分享網址URL給朋友時,常常會發現網址附帶的縮圖Thumbnail(WordPress把它叫做精選圖片Feature Image)顯示錯誤,這種狀況特別容易發生在購買付費模板(Template)或使用免費範例樣板來架站的時候,也有可能是Webflow自動抓取頁面中最上面的圖片,而不是抓取你想要的照片。

面對這種情況,只要依照以下詳細介紹,就能透過修改語法Custom Code輕鬆調整,方法如同這篇官方英文教學。關於Webflow的完整介紹、優缺點分析,可以參見我這篇完整文章,我也會在部落格中,陸續和大家分享繁體中文圈最齊全的Webflow教學。

文章結構

  • 如何調整Webflow的URL縮圖?
    • 1. 先購買Site plans單一網站方案
    • 2. 修改Custom Code客製程式碼
    • 3. (額外)Facebook必須多一個步驟,用分享偵錯工具清除Facebook縮圖快取

如何調整Webflow的URL縮圖?

1. 先購買Site plans單一網站方案

至少要買到Basic方案,才能修改網頁語法Custom Code

2. 修改Custom Code客製程式碼

到Custom Code中的<head>區域,輸入:

<meta property=”og:image url:width” content=”1200″ />
<meta property=”og:image url:height” content=”630″ />

並且把image url改成你想要的縮圖的圖片網址,再把網站發佈Publish,這樣就大功告成了!

3. (額外)Facebook必須多一個步驟,用分享偵錯工具清除Facebook縮圖快取

Facbook的縮圖修改邏輯和LINE不同,LINE在每次分享連結給朋友的時候,都會重新抓一次網頁的縮圖;然而Facebook非常麻煩,它抓取的圖片、文字,經常是變更前的舊資料、之前的Cookie。這時候只要透過分享偵錯工具,重新提交一次網址,Facebook就會重新抓圖、自動更新成最新版本的資料了!

Tags: FacebookLINEWebflow
Previous Post

寫工作日誌超煩!PM專案規劃必備的時間管理工具Apploye,限時免費中

Next Post

用Webflow直接購買網域Domain,透過Google域名提供商註冊你的網址

Related Posts

網站技術

Caps lock 常常按了沒反應?調整 Macbook 按鍵靈敏度,快速切換輸入法

2020/12/31
147
PTT/Dcard

Zuvio 校園新興大學生社群網站介紹,Dcard、PTT 的競爭者來了

2020/10/24
920
PTT/Dcard

Alexa 無法監測 PTT 用戶活躍程度,PTT 網頁版瀏覽者多為站外人士

2020/10/23
200
PTT/Dcard

Dcard 各看板的活躍大學排行榜!哪所大學的學生最愛逛西斯板?

2020/10/16
1.7k
網站技術

YouTube 直播分析工具,收視率、抖內金額及主播收入一覽

2020/09/23
3.6k
Twitter

如何用手機下載 Twitter 影片?用手機瀏覽器下載推特高畫質 HD 影片

2020/09/19
849
  • 數位行銷
    • Webflow
    • WordPress
    • 線上工具
    • PTT/Dcard
    • Twitter
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 飲食
    • 外在
    • 科技
      • 硬體
      • 軟體
    • 交通
    • 日用品
  • 品牌故事

隨選文章・局妹吐信😛

迪卡儂Decathlon便宜的秘密,五步驟打造自行車品牌B’twin的競爭優勢

2020/01/01
2.1k

寫工作日誌超煩!PM專案規劃必備的時間管理工具Apploye,限時免費中

2020/06/06
639

柯達Kodak:香港1987 底片廣告

2018/10/30
165

WordPress網站搬家到Webflow,比官網還齊全的搬家教學,Move from WordPress to Webflow

2020/03/14
371

保力達啤兒綠茶&古道燕麥奶茶

2018/08/09
346

肯德基六塊炸雞桶:懇親會

2018/09/09
186

Bulk Delete功能釋出,圖片多選、全選、批次大量刪除!|Webflow完整教學

2020/05/21
150

UX設計師必用的網站架站工具Webflow,設計系學生必備工具!比Behance更好用,哭了

2020/05/11
354
  • 如何用 Twitter 搜尋18禁成人內容?推特搜尋功能教學

    0 shares
    Share 0 Tweet 0
  • SWAG.live 是什麼網站?商業模式及競品分析,AV素人寫真、付費色情影音市場簡介

    0 shares
    Share 0 Tweet 0
  • 偷看限動神器Saveig.org,偷窺別人IG不留痕跡,渣男壞閨蜜剋星

    0 shares
    Share 0 Tweet 0
  • 健身網紅咻咻Ashlee與男友Tao分手

    0 shares
    Share 0 Tweet 0
  • SWAG 廠商模式A片看到飽,Logo 按七下長片免費看(官方已取消)

    0 shares
    Share 0 Tweet 0
  • PTT帳號肉搜教學,用專業搜尋工具人肉搜索鄉民的真面目

    0 shares
    Share 0 Tweet 0
  • Dcard 查詢被刪掉的文章和照片,用深卡和 PTT Brain 搜尋原文備份

    0 shares
    Share 0 Tweet 0
  • 關於我
  • 抖內支持
  • LinkedIn 履歷
  • 數位行銷
  • PTT/Dcard
  • 線上工具
  • 工作術
  • Webflow
  • WordPress
  • Google AD
  • Google Search Console
  • SEO
  • 廣告分析
  • 品牌故事
  • 飲食
  • 外在
  • 科技
  • 交通
  • 創意
  • 日記
  • 路人趣味
  • 迷幻文學
  • 普通文學

有事燒紙:[email protected]

版權是我的,不要幹走

No Result
View All Result
  • 全部文章
  • 數位行銷
    • PTT/Dcard
    • 線上工具
    • 工作術
    • Webflow
    • WordPress
    • Google AD
    • Google Search Console
    • SEO
  • 廣告分析
    • 品牌故事
    • 娛樂新聞
  • 純文學
  • 日記
  • 手錶
  • 大人
  • 抖內支持

版權是我的,不要幹走