當你在HubSpot建立並發佈社交貼文時,相應的社交網絡會嘗試為你的貼文產生圖片預覽。 根據你為文章輸入的連結,社交網路會掃描頁面原始程式碼中的中繼標籤,並檢索網站的robots.txt檔案。
如果你在WordPress等外部供應商上託管網站,而文章預覽並未如預期顯示,請按照以下指示操作。
Robots.txt檔案會告訴搜尋引擎如何為您的網站建立索引。 如果您未正確新增或設定robots.txt檔案,社交網路將無法解析頁面內容。 Facebook和X都提供了需要添加到robots.txt文件中的用戶代理字符串:
User-agent: facebookexternalhit
Disallow:
User-agent: Twitterbot
Disallow:
LinkedIn不提供用戶代理字符串的文檔,但您可以使用LinkedIn帖子檢查器確認LinkedIn是否可以檢索您網站的內容。
搜尋引擎和社交網路會剖析HTML的head部分,以尋找產生頁面預覽所需的中繼資料。 您應該在主要中繼標籤後加入Facebook和X的中繼資料:
< title >中繼標籤—預覽、編輯和生成
< meta name = "title" content = "中繼標籤—預覽、編輯和生成" >
< meta name = "description" content = "使用中繼標籤,您可以編輯和體驗您的內容,然後預覽您的網頁在Google、Facebook、Twitter等上的外觀!" >
< meta property = "og: type" content = "website" >
< meta property = "og: url" content = "https://example.com" >
< meta property = "og: title" content = "您的網站頁面標題" >
< meta property = "og: description" content = "您的網站頁面描述" >
< meta property = "og: image" content = "https://example.com/image.png" >
< meta property = "twitter: card" content = "summary_large_image" >
< meta property = "twitter: url" content = "https://example.com/" >
< meta property = "twitter: title" content = "您的網站頁面標題" >
< meta property = "twitter: description" content = "您的網站頁面描述" >
< meta property = "twitter: image" content = "https://example.com/image.png" >
使用頁面的相應值填寫上述每個中繼標籤的內容屬性。 您可以使用Facebook除錯工具、X卡驗證器和LinkedIn貼文檢查器驗證您的中繼標籤。
如果你插入的連結的精選圖片在社交預覽中無法正確顯示(例如,圖片被切斷或比例不正確) ,你可能需要編輯圖片,使其具有適合你要發佈的社交網絡的尺寸,然後重新發佈頁面。 如果你在Facebook上發佈文章,你可以在他們的文件中進一步了解他們的精選圖片要求。
針對每個網路上的特色圖片最佳化,建議使用以下尺寸:
請確保您在社交帖子中包含的任何媒體都遵循每個網絡的檔案大小指南。 如果HubSpot確定檔案太大而無法發佈到特定網路,則會顯示警告。 每個社羣網路的最大檔案大小如下:
嵌入式色彩設定檔可能會影響精選圖片在社交貼文中的顯示方式。 不同的系統以不同的方式處理不常見的色彩設定檔,這就是為什麼在檔案管理員中預覽影像時,顏色可能會看起來不同的原因。 您可以透過外部工具執行圖片網址,以查看圖片是否使用不常見的顏色設定檔。 如有必要,你可以在Photoshop等相片編輯工具中刪除幹擾的顏色設定檔,然後在發佈社交貼文之前重新發佈頁面。
HubSpot的檔案管理員會在JPEG和PNG上使用影像壓縮,協助優化HubSpot託管內容的載入速度。 社羣媒體網路也會在貼文中使用圖片壓縮,其品質可能會與你在HubSpot中看到的不同。 因此,建議為每個網路使用相對較高的解析度影像(以建議的長寬比)。 如果你的圖片不符合社交網絡的要求, HubSpot的社交發佈工具會顯示警告,協助你相應調整圖片。
如果連結預覽仍無法正常顯示,請參閱我們的疑難排解指南。