如何讓FB貼文中出現頁面縮圖?讓OGP標籤指定顯示圖片!

閱讀時間約 3 分鐘

<link rel="canonical" href="https://jikensitu.com/seo-knowledge//" />

原文出處:如何讓FB貼文中出現頁面縮圖?讓OGP標籤指定顯示圖片! - 己見室JiKenSitu

同時經營社群媒體及網站的各位,想必經常也會在社群中貼上網站的文章、頁面諮詢,增加網站在社群媒體中的曝光機會。然而你知道,其實只要在頁面中設定OGP(Open Graph Tags),就可以指定顯示的縮圖嗎?跟著以下步驟,帶你了解該如何設定這項功能。

OGP(Open Graph Tags)是什麼?

OGP(Open Graph Tags) 最初是由 Facebook 提出的一個協議,透過在網頁中插入 OGP 標籤,社群媒體在分享頁面時,就可以根據頁面中OGP資訊顯示對應的資訊。而後其他社交媒體平台如 Twitter、LinkedIn 也相繼採用協議,因此OGP漸漸成為建設網佔時,必定會注重的功能之一。

詳細介紹可見OGP官方文件:https://ogp.me/

OGP常見屬性:

OGP有許多屬性可以利用,建議網站管理員可以先記住以下項目:

  • og:title:網頁的標題,建議字數最多只設定到50字(100字元),超過則會被系統省略
  • og:description:網頁的描述,此處建議最多設定80字(16字元),超過則會被系統省略
  • og:type:網頁的類型,如 "article"、"website"、"video" 等。
  • og:url:網頁的網址,照實貼上頁面
  • og:image:網頁的預覽圖片 URL,但必須遵守以下規範
    • 可接受的圖像尺寸下限是 200 x 200 像素
    • 圖像檔案大小不可超過 8 MB。
    • 建議使用至少 1200 x 630 像素的圖像,在高解析度裝置時才能呈現最佳顯示效果
    • 至少應使用 600 x 315 像素的圖像,才能顯示圖像較大的連結粉絲專頁貼文

OGP該如何設定?

OGP標籤作為網站建設的基本項目,各位可以參考以下方法修改OGP設定

在網站後台欄位中修改OGP

以wordpress作為範例,你可以在後台中安裝Yoast外掛,該外掛除了一般的SEO設定之外,編輯文章時,編輯頁面的最下方會出現Yoast的設定區塊,而其中的「社交網路服務」則是控制OPG的欄位。
網站管理者只需要依照提示填入訊息及照片,即可以完成OPG的設定!

raw-image

直接修改原始碼

若後臺無法修改,則必須從原始碼中下手才可以。你可能需要麻煩工程師,請他們在頁面的<head>中加入OGP標籤才能完成。
而實際上需要加入的代碼非常直覺,如同下圖範例一樣
在<meta>中新增property="",輸入需要指定的OPG標;
並在後方新增content="",輸入對應的資料即可完成。

raw-image

如何確認網站已加入OGP標籤?

最簡單的方法就是直接按下F12,並且搜尋對應的OGP標籤。但這次,已見室另外分享Meta for Developers偵錯工具,確認網站在FB分享連結時會如何被顯示出來的同時,直接讓你確認那些代碼有遺漏!


看完了這麼多,我想你對OGP標籤已經有了一定的了解,如果喜歡我的文章,或是未來想要了解更多關於SEO的消息,請持續關注己見室,我會努力將各種知識分享給各位:)


留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
在這篇文章中,K教練將分享兩個簡單有效的方法,幫助你提升Pinterest的曝光度。首先,利用產品關鍵字來增強搜索相關性;其次,提供清晰具體的描述,並使用長尾關鍵字。這些方法只需花10分鐘學習,便能有效提高你Pin的可見性。
Thumbnail
这篇文章主要介绍了ok欧意怎么注册?ok欧意okx中国站官方注册教程的相关资料,需要的朋友可以参考下本文详细内容介绍 🚀 币安 - 全球最大加密货币交易所 💥 独家优惠 💥 💰 注册即享 20% 手续费返佣 🔑 专属邀请码: R851UX3N 欧易怎么注册、okex中国站okx官方
Thumbnail
Facebook廣告過審攻略及限制處理,以及如何在Facebook上尋找客戶的7種方法。透過避開一些雷區,並連結產品關鍵字、FB粉專及群組,以及找到中小企業的FB粉專聯絡方式,幫助你在Facebook上拓展業務。
Thumbnail
眾多網路工具下,部落格和FB粉專是常見的兩個選擇。本文釐清部落格與FB粉專的差異,以及它們的使用方式和特點,讓讀者可以更好地選擇適合自己的數位平台,進行個人或品牌推廣,以達到更好的獲利變現。
Thumbnail
Facebook直播是一個強大的工具,可以讓您與您的觀眾即時互動和分享內容。如果您想在您的網站上舉辦一個直播活動,將Facebook直播嵌入到您的網站中是一個很好的選擇。在本文中,我們將向您介紹如何在Facebook上開啟直播並將其嵌入到您的網站中。
Thumbnail
本文介紹瞭如何寫 HTML 標籤,製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例,讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
Thumbnail
HTML 標籤是網頁內容的基礎,透過學習不同的標籤,你可以設計出各式各樣的內容。本文介紹了各種基本的標籤,如標題、段落、修飾樣式、超連結以及區塊等,讓你對 HTML 標籤有更深入的瞭解。
Thumbnail
HTML 語意化標籤,不僅可以使網頁結構更加清晰、易於理解,也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
Thumbnail
現在加入@BagsApp是 OG的意思吧! 很簡單,只需要綁定推特 #X 2/25@BagsApp就會有APP囉! 可以期待一下,應該可以挑戰 #friendtech 立刻開始👉 https://bags.fm/$novel152001 #BagsApp #bagsGet ready fo
Thumbnail
在現今數位時代,學習編寫引人入勝的META描述標籤成為網站優化的重要一環。透過SEO(搜尋引擎優化)技術,提升網站在搜尋引擎中的排名,而META描述標籤則是影響點擊率的關鍵元素。以下是有關如何編寫META描述標籤的一些建議。 首先,了解SEO的基礎原理是必要的。SEO公司和Google SEO教學
Thumbnail
在這篇文章中,K教練將分享兩個簡單有效的方法,幫助你提升Pinterest的曝光度。首先,利用產品關鍵字來增強搜索相關性;其次,提供清晰具體的描述,並使用長尾關鍵字。這些方法只需花10分鐘學習,便能有效提高你Pin的可見性。
Thumbnail
这篇文章主要介绍了ok欧意怎么注册?ok欧意okx中国站官方注册教程的相关资料,需要的朋友可以参考下本文详细内容介绍 🚀 币安 - 全球最大加密货币交易所 💥 独家优惠 💥 💰 注册即享 20% 手续费返佣 🔑 专属邀请码: R851UX3N 欧易怎么注册、okex中国站okx官方
Thumbnail
Facebook廣告過審攻略及限制處理,以及如何在Facebook上尋找客戶的7種方法。透過避開一些雷區,並連結產品關鍵字、FB粉專及群組,以及找到中小企業的FB粉專聯絡方式,幫助你在Facebook上拓展業務。
Thumbnail
眾多網路工具下,部落格和FB粉專是常見的兩個選擇。本文釐清部落格與FB粉專的差異,以及它們的使用方式和特點,讓讀者可以更好地選擇適合自己的數位平台,進行個人或品牌推廣,以達到更好的獲利變現。
Thumbnail
Facebook直播是一個強大的工具,可以讓您與您的觀眾即時互動和分享內容。如果您想在您的網站上舉辦一個直播活動,將Facebook直播嵌入到您的網站中是一個很好的選擇。在本文中,我們將向您介紹如何在Facebook上開啟直播並將其嵌入到您的網站中。
Thumbnail
本文介紹瞭如何寫 HTML 標籤,製作一個簡單的自我介紹網頁。透過介紹寫標籤的實例,讓讀者能夠更瞭解如何在 HTML 中使用不同的標籤。
Thumbnail
HTML 標籤是網頁內容的基礎,透過學習不同的標籤,你可以設計出各式各樣的內容。本文介紹了各種基本的標籤,如標題、段落、修飾樣式、超連結以及區塊等,讓你對 HTML 標籤有更深入的瞭解。
Thumbnail
HTML 語意化標籤,不僅可以使網頁結構更加清晰、易於理解,也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
Thumbnail
現在加入@BagsApp是 OG的意思吧! 很簡單,只需要綁定推特 #X 2/25@BagsApp就會有APP囉! 可以期待一下,應該可以挑戰 #friendtech 立刻開始👉 https://bags.fm/$novel152001 #BagsApp #bagsGet ready fo
Thumbnail
在現今數位時代,學習編寫引人入勝的META描述標籤成為網站優化的重要一環。透過SEO(搜尋引擎優化)技術,提升網站在搜尋引擎中的排名,而META描述標籤則是影響點擊率的關鍵元素。以下是有關如何編寫META描述標籤的一些建議。 首先,了解SEO的基礎原理是必要的。SEO公司和Google SEO教學