當你第一次釋出一個新的網站或部落格時,你可能想馬上和你的朋友和家人分享。但如果你沒有設定好,他們只會看到一個無聊的連結。
即使預覽載入了影象,也可能不是您想要看到的影象。但你可以解決這個問題。
元標記是不在網頁上顯示任何內容的HTML標記。它們位於HTML中的<;head>;<;/head>;標記中。當搜尋引擎和其他服務,比如Facebook,閱讀你的頁面時,他們會從meta標籤中獲取目標資訊。
元標籤是你所需要的,讓社會媒體和簡訊處理你的連結正確。例如,當你透過Facebook共享一個連結時,Facebook會跟隨該頁面的連結。然後,它閱讀網頁,試圖找出什麼是一切。
最重要的是,它試圖找到標題、描述和影象。如果找不到這些,它只會顯示一個簡單的連結,沒有任何裝飾。為了讓Facebook顯示特定的標題、描述和影象,您需要新增特定的meta標記來告訴它要查詢什麼。
如果像Facebook和Twitter這樣的社交媒體網站從你的網站上獲得他們需要的資訊,他們會建立一張卡片。如果一切都按計劃進行,它應該像你所期望的那樣。
相關:如何使用Python構建Twitter、Instagram和Reddit機器人程式
如果你用純HTML或者前端框架構建網站,新增meta標籤應該很簡單。它們與標題、樣式和指令碼標記位於同一區域,如下例所示:
您可以看到已經有一些元標記。這些並不是讓你的網站在連結中正確顯示所需要的——它們只是一些低階的預設設定。
在WordPress中更改元標記更為重要。完整的說明將採取一個完整的指導。因此,下面有幾個提示可以幫助您開始:
如果你有興趣在這個平臺上釋出一個站點,那麼看看最好的WordPress主機提供商吧。
現在你已經知道如何訪問你的元標籤,你可以開始編輯它們。以下是Facebook希望看到的最小標籤:
<meta property="og:title" content="Lee Nathan - Personal Development Writer"><meta property="og:description" content="Personal development is..."><meta property="og:image" content="<https://leenathan.com/soshe.jpg>"><meta property="og:url" content="<https://leenathan.com>">title和description屬性告訴Facebook要顯示什麼文字。URL屬性可以連結到子頁以進行特殊促銷或a/B測試。
image屬性應該是一個完整的地址,而不是相對於索引頁/檔案段. 使用的最佳影象大小是1200x628,因為這種大小在社交媒體網站和裝置中是最相容的。
Twitter卡與Facebook卡幾乎相同,但有不同的meta標籤。這就是Twitter元標記的樣子:
<meta name="twitter:title" content="Lee Nathan - Personal Development Writer"><meta name="twitter:description" content="Personal development is..."><meta name="twitter:image" content="<https://leenathan.com/soshe.jpg>"><meta name="twitter:card" content="summary_large_image">title和description屬性與Facebook的相同;image屬性也遵循相同的規則。1200x628是一個很好的尺寸開始。
主要區別在於卡片的屬性。本例使用“summary\u large\u image”建立一張看起來與Facebook的卡片大致相同的卡片。不過,Twitter還有其他選擇。
你可以釋出一條微博,並迅速刪除它六次,直到你的卡正確。你也可以給自己發一條Facebook資訊。但是這些方法有點笨拙。幸運的是,這兩個服務都提供了一個方便的工具,使檢查卡更容易。
Facebook有一個共享偵錯程式。Twitter有一個卡片驗證器。這兩個工具的任務是讓您看到連結是如何工作的;它們只是使用不同的名稱。
現在你的網站連結在兩大社交網路上看起來很棒。很可能它在任何地方都很好看,但你應該仔細檢查它是否好看。例如,如果您在影象的底部或頂部有資訊,它可能會在移動裝置上被剪輯。
在你進一步研究之前,最好確保你的連結在**上看起來還不錯。如前所述,您的影象可能會被剪輯在較小的螢幕上。前面顯示的示例的影象太低,因此只能看到頭部的上半部分。
這是一個簡單的問題,就是用連結向自己傳送一個文字(或者透過WhatsApp這樣的服務傳送訊息)。您不必擔心驗證工具。很可能,如果在社交媒體應用程式中看起來不錯,它在這裡會很好看。
如果你在個人網站上工作,你肯定希望它在LinkedIn上看起來不錯。幸運的是,LinkedIn還提供了一個名為post inspector的驗證工具。此外,你不必擔心更多的元標籤,因為LinkedIn使用Facebook的標籤。
我們介紹的資訊應該足以讓你開始。但如果你想了解更多,請檢視Facebook的標籤指南或Twitter的標籤頁面。
...自由職業者頁面,或者任何你能想到的東西。理解HTML會讓你受益匪淺,但如果你是一個初學者,你可能會發現你需要什麼。 ...
...。下次你要知道香草還是巧克力更受歡迎的時候,以下是如何收集最親近的人的想法。 ...
...釋出為一箇中間帖子。開發人員的這個示例展示了它們是如何格式化的——作為一系列可嵌入的tweet,使其看起來非常整潔且易於閱讀。 ...
...鬆找到播客推薦。網站會定期釋出一份列表或一份綜述,讓你有多種選擇。但除此之外,這一切都是一次回顧一個播客。但嘿,至少你能確定這是否符合你的口味。 ...
...該網站是公關專業人士使用的,你可以提供資訊,你喜歡如何推銷。你可以指定哪些主題你做和不涵蓋,使你收到的投球更相關的你。 ...
...開始,下面是建立WordPress網站的終極指南。或者,下面是如何安裝你的WordPress主題。 ...