如何讓你的主頁連結在社交媒體上看起來很棒

下面是如何控制當你透過社交媒體連結到你的主頁時人們看到的內容。...

當你第一次釋出一個新的網站或部落格時，你可能想馬上和你的朋友和家人分享。但如果你沒有設定好，他們只會看到一個無聊的連結。

即使預覽載入了影象，也可能不是您想要看到的影象。但你可以解決這個問題。

一切都從元標記開始

元標記是不在網頁上顯示任何內容的HTML標記。它們位於HTML中的&lt；head&gt；&lt；/head&gt；標記中。當搜尋引擎和其他服務，比如Facebook，閱讀你的頁面時，他們會從meta標籤中獲取目標資訊。

社交媒體如何使用元標籤？

元標籤是你所需要的，讓社會媒體和簡訊處理你的連結正確。例如，當你透過Facebook共享一個連結時，Facebook會跟隨該頁面的連結。然後，它閱讀網頁，試圖找出什麼是一切。

最重要的是，它試圖找到標題、描述和影象。如果找不到這些，它只會顯示一個簡單的連結，沒有任何裝飾。為了讓Facebook顯示特定的標題、描述和影象，您需要新增特定的meta標記來告訴它要查詢什麼。

如果像Facebook和Twitter這樣的社交媒體網站從你的網站上獲得他們需要的資訊，他們會建立一張卡片。如果一切都按計劃進行，它應該像你所期望的那樣。

相關：如何使用Python構建Twitter、Instagram和Reddit機器人程式

以純html更改元標記

如果你用純HTML或者前端框架構建網站，新增meta標籤應該很簡單。它們與標題、樣式和指令碼標記位於同一區域，如下例所示：

Lee Nathan - Personal Development Writer...

您可以看到已經有一些元標記。這些並不是讓你的網站在連結中正確顯示所需要的——它們只是一些低階的預設設定。

在wordpress中更改元標記

在WordPress中更改元標記更為重要。完整的說明將採取一個完整的指導。因此，下面有幾個提示可以幫助您開始：

如果你願意編輯你的主題，meta標籤應該位於標題.php當前主題的檔案。
如果你不能訪問你的主題或者不想處理它，你可以用一個外掛來改變你的元標籤，比如高階元標籤管理。

如果你有興趣在這個平臺上釋出一個站點，那麼看看最好的WordPress主機提供商吧。

如何建立facebook卡

現在你已經知道如何訪問你的元標籤，你可以開始編輯它們。以下是Facebook希望看到的最小標籤：

title和description屬性告訴Facebook要顯示什麼文字。URL屬性可以連結到子頁以進行特殊促銷或a/B測試。

image屬性應該是一個完整的地址，而不是相對於索引頁/檔案段. 使用的最佳影象大小是1200x628，因為這種大小在社交媒體網站和裝置中是最相容的。

如何建立twitter卡

Twitter卡與Facebook卡幾乎相同，但有不同的meta標籤。這就是Twitter元標記的樣子：

title和description屬性與Facebook的相同；image屬性也遵循相同的規則。1200x628是一個很好的尺寸開始。

主要區別在於卡片的屬性。本例使用“summary\u large\u image”建立一張看起來與Facebook的卡片大致相同的卡片。不過，Twitter還有其他選擇。

如何確保預覽看起來正確

你可以釋出一條微博，並迅速刪除它六次，直到你的卡正確。你也可以給自己發一條Facebook資訊。但是這些方法有點笨拙。幸運的是，這兩個服務都提供了一個方便的工具，使檢查卡更容易。

Facebook有一個共享偵錯程式。Twitter有一個卡片驗證器。這兩個工具的任務是讓您看到連結是如何工作的；它們只是使用不同的名稱。

你應該測試的其他方面

現在你的網站連結在兩大社交網路上看起來很棒。很可能它在任何地方都很好看，但你應該仔細檢查它是否好看。例如，如果您在影象的底部或頂部有資訊，它可能會在移動裝置上被剪輯。

可移動的

在你進一步研究之前，最好確保你的連結在**上看起來還不錯。如前所述，您的影象可能會被剪輯在較小的螢幕上。前面顯示的示例的影象太低，因此只能看到頭部的上半部分。

簡訊和信使

這是一個簡單的問題，就是用連結向自己傳送一個文字（或者透過WhatsApp這樣的服務傳送訊息）。您不必擔心驗證工具。很可能，如果在社交媒體應用程式中看起來不錯，它在這裡會很好看。

領英

如果你在個人網站上工作，你肯定希望它在LinkedIn上看起來不錯。幸運的是，LinkedIn還提供了一個名為post inspector的驗證工具。此外，你不必擔心更多的元標籤，因為LinkedIn使用Facebook的標籤。

下一步要做什麼

我們介紹的資訊應該足以讓你開始。但如果你想了解更多，請檢視Facebook的標籤指南或Twitter的標籤頁面。

發表於 2021-03-30 08:46
閱讀 ( 95 )
分類：程式設計

你可能感興趣的文章

你應該使用12個很棒的html5模板

...自由職業者頁面，或者任何你能想到的東西。理解HTML會讓你受益匪淺，但如果你是一個初學者，你可能會發現你需要什麼。 ...

發佈於 2021-03-14 00:18
閲讀 ( 50 )

如何在facebook和社交媒體上真正建立聯絡

...回到基本點了。以下是為什麼你應該努力重新連線，以及如何開始的實用技巧。 ...

發佈於 2021-03-14 06:12
閲讀 ( 46 )

如何在社交媒體上進行民意調查，並對你的朋友進行測驗

...。下次你要知道香草還是巧克力更受歡迎的時候，以下是如何收集最親近的人的想法。 ...

發佈於 2021-03-14 11:47
閲讀 ( 48 )

7個很棒的工具如果你喜歡中型的話一定要試試

...釋出為一箇中間帖子。開發人員的這個示例展示了它們是如何格式化的——作為一系列可嵌入的tweet，使其看起來非常整潔且易於閱讀。 ...

發佈於 2021-03-17 09:48
閲讀 ( 52 )

6個應用程式可以找到很棒的播客推薦

...鬆找到播客推薦。網站會定期釋出一份列表或一份綜述，讓你有多種選擇。但除此之外，這一切都是一次回顧一個播客。但嘿，至少你能確定這是否符合你的口味。 ...

發佈於 2021-03-17 22:25
閲讀 ( 63 )

讓家庭影片看起來專業的10個簡單技巧

...但很少對結果感到滿意，你並不孤單。大多數人都想知道如何**更好的影片。 ...

發佈於 2021-03-19 10:16
閲讀 ( 46 )

駭客在社交媒體上竊取你身份的7種方式

... 以下是一些騙子的操作方法和如何打擊他們的伎倆。 ...

發佈於 2021-03-20 13:46
閲讀 ( 55 )

提供暗模式支援的15款流行iphone應用

...的訊息，任何人誰發現自己的白色背景介面時，周圍滾動你的**在深夜失明。 ...

發佈於 2021-03-20 18:39
閲讀 ( 43 )

5個超級簡單的網站來建立你的線上投資組合

...該網站是公關專業人士使用的，你可以提供資訊，你喜歡如何推銷。你可以指定哪些主題你做和不涵蓋，使你收到的投球更相關的你。 ...

發佈於 2021-03-20 20:24
閲讀 ( 55 )

攝影作品組合的10個最佳wordpress主題

...開始，下面是建立WordPress網站的終極指南。或者，下面是如何安裝你的WordPress主題。 ...

發佈於 2021-03-21 13:31
閲讀 ( 53 )