在您的網站上安裝 Twitter 卡的 5 種簡單方法

所以你知道在 Twitter 上，當有人發佈到他們網站的鏈接時，Twitter 會創建一個包含縮略圖、標題、描述和目標頁面 URL 的框？ 這真的很常見。 它使標準鏈接帖子在時間線上更加明顯，它展示了一些關於鏈接目的地的信息，並鼓勵更多的用戶交互。

那是一張推特卡。 具體來說，它是網站摘要卡，是可以集成到網站中的幾種類型的 Twitter 卡之一。 還有哪些其他類型？

• 如前所述，摘要卡是網站的預覽。 這是從元信息中提取的自定義圖像和文本，可確保用戶在單擊您的鏈接時看到的內容的良好預覽。
• 摘要卡（帶有大圖）……與摘要卡相同。 老實說，我不知道為什麼會有差異。 單擊每個鏈接並查看預覽的推文，看看我的意思。 我想在 Twitter 最新的重新設計之前，它們可能看起來有所不同，但今天一切看起來都像是一張大圖像卡。
• 球員卡不應與棒球卡或其他運動卡混淆。 它們本質上是大型圖像卡，除了圖像是某種形式的動畫媒體。 根據它們的顯示方式，它們可能是擴展為媒體的小型預覽和描述框，或者只是準備播放的媒體本身。 通常這些是嵌入式視頻，例如 YouTube 視頻，儘管 webms 越來越受歡迎。
• 應用卡片是從應用商店頁面提取數據以創建自定義應用推廣窗口的框。 它顯示了推文中鏈接的應用程序的重要細節，以及一個 CTA 按鈕，讓用戶立即安裝該應用程序。

Twitter卡過去要復雜得多。 曾經有用於圖片庫、產品和其他一些選項的特定類型的卡片，但 Twitter 已經刪除了它們。 如果你想留戀，你可以在這裡看到他們的樣子，只是不要太執著； 你今天不能做。

Twitter卡片的基礎知識

如果您想為每個頁面指定單獨的代碼，則每個網站或至少每個網頁只能擁有一種 Twitter 卡。 大多數人選擇基本的大圖像摘要卡並將代碼放在他們網站模板的標題中，因此它會顯示在每個頁面上。 某些網站（例如 YouTube）會將播放器卡片放在其標題中。 這裡的主要內容是，您在給定頁面上的標題元數據中只能有一組卡片信息。

卡片在它們可以傳達的數據方面非常強大。 您可以讓卡片自動知道誰創建了內容以及誰擁有該頁面，即使兩者不同，也可以同時知道。 您可以指定要加載的媒體，可以指定名稱和跟踪代碼等等。 事實上，你可以閱讀這個頁面來了解你可以專門用於卡片的屬性。 您還可以綁定 Open Graph 屬性以獲得更可靠的數據。

我今天要在這裡做的是告訴您如何將 Twitter 卡片添加到您的網站。 我不會介紹每一個屬性——Twitter 文檔已經足夠好了——我只會給你簡要介紹如何為各種 CMS 做這件事。

在我們開始之前； 對於每種安裝方法，您都需要驗證。 為確保您做對了，一旦您啟用了卡片，請將 URL 複製到此驗證器。 這將告訴您該卡是否真的有效。

1：WordPress

WordPress 可能是實現 Twitter 卡片的最簡單平台，因為有很多不同的方法可以做到這一點，包括幾乎內置的方法。

推薦的實現 Twitter 卡片的方法是使用官方的 Twitter 插件。 您可以像安裝任何其他插件一樣安裝它，然後您可以從那裡自動生成您的 Twitter 卡片。 它還支持共享和推文/關注按鈕、嵌入式推文處理和用於分析跟踪的簡碼。 您可以在此處閱讀文檔並在此處下載插件本身。

如果您不想使用官方 Twitter 插件，或者您在託管 WordPress.com 上，則可以使用 Jetpack。 在 Jetpack 中，您希望找到共享部分並對其進行配置。 將有一個 Twitter 部分，您可以在其中授權您的 Twitter 帳戶訪問您的網站。

第三種選擇是使用 JM Twitter Cards 插件。 這個插件由 Julien Maury 開發，增加了 Twitter 卡與一些基本設置的兼容性。 您可以選擇讓它使用您頁面上的第一張圖片而不是特色圖片，您可以預覽您的 Twitter 卡片渲染，並且您可以在創建帖子時為每個帖子自定義卡片。 要配置插件，請導航到側邊欄並單擊管理儀表板中的插件面板。 選擇卡片類型，然後用您的 Twitter 帳戶、您的網站帳戶、描述長度以及您想要添加的任何其他內容填寫其餘的框。

如果這些都不符合您的需求，或者您已經碰巧擁有它，Yoast 的 WordPress SEO 也可以處理 Twitter 卡片。 在您的管理面板中，導航到 SEO 並單擊“社交”部分。 那裡有一個 Twitter 選項卡，您可以在其中將您的 Twitter 用戶名添加到框中。 不幸的是，我上次讀到，Yoast 只支持摘要卡； 如果您想要其他類型的卡片，則需要更高級的插件。

2：棒棒糖

Tumblr 是一個非常受歡迎的博客平台，許多人沒有意識到它已經變得如此多產。 Tumblr 網絡不僅限於標有 .tumblr.com 的博客； 事實上，一些大牌網站正在使用 Tumblr 作為基礎架構。 一旦你有一個自定義域，它就像任何其他後端架構一樣。 或者是嗎？

事實上，Tumblr 的架構不像 WordPress 那樣可擴展或可定制。 您必須使用一些自定義代碼才能在您的博客上實現特定的自定義 Twitter 卡片。 您可以在 Quora 上 Dan Leveille 給出的答案中閱讀代碼及其背後的描述。

這裡值得注意的是，此代碼是手動自定義卡片所必需的； 不需要簡單地有摘要卡。 Twitter 已經將 Tumblr.com 列入白名單，以便在鏈接發佈時自動生成卡片，因此除非您想要具有特定數據的特定卡片，或者您使用的是自定義域，否則您可以使用默認實現的內容。 如果您的 Tumblr 網站有自定義域，或者您想要 Twitter 無法自然獲取的數據，我只會求助於他的代碼。

3：博主

在 Blogger 博客上安裝 Twitter 卡片歸結為您的模板。 我會給你一般的說明，但如果你的網站模板與規範相差太大，你必鬚根據我給你的線索自己弄清楚。

始終建議您在篡改模板之前備份模板，以防萬一。 轉到您的儀表板，單擊模板，然後單擊備份按鈕以保存其副本以供以後恢復。

接下來，單擊博客模板實時預覽下方的“編輯 HTML”按鈕。 在該代碼中，運行搜索“<b:includable id='post' var='post'>”。 將該行保留在原處，但將以下內容直接粘貼到其下方：


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


顯然，您需要自己編輯上面的數據。 將@yourname 更改為您的 Twitter 用戶名，將 www.yoursite.com 更改為您的站點 URL，並確保其準確無誤。

當然，您可以根據需要自定義此代碼。 如果您更喜歡不同類型的卡片，請將第一行更改為“摘要”以外的內容，並將其餘代碼調整為您需要的數據。

如果我上面粘貼的代碼不起作用，這是我從中獲取的頁面。 您可以仔細檢查以確保我正確複製了它，或者您確實複製了它，並且您可以在那裡檢查以防它已更新並且我的帖子未反映更新。 說起來，如果它不起作用，請告訴我。 我會盡力修復它。

4：Joomla

Joomla 與 WordPress 有很多共同點，因為它是一個強調通過擴展進行定制的 CMS，而不是像 Tumblr 或 Blogger 這樣具有美容增強功能的有限平台。 因此，您可以通過多種不同的方式使用不同的Joomla 擴展來實現 Twitter 卡片。

Tweet Cards 是大多數人可能更喜歡的一種擴展。 它可以免費下載和使用，它可以將 Twitter 卡片添加到您基於 Joomla 的網站中。 而已; 配置沒有什麼花哨的，它的功能或實現沒有什麼特別之處，它只是按照它在錫上說的做。

第二個選項是專業擴展 Open Graph 和 Twitter Card Tags。 這是一個更強大的擴展，可以為 Twitter 和 Facebook 添加標籤。 它有很多自定義選項來選擇您想要的帖子的特定圖像和數據。 Facebook 與 Open Graph 的集成非常棒，此外，它還為 Twitter 和 Google 在敲門時添加了額外的元數據。 唯一的缺點是，作為專業擴展，這個會花費你。 不過，它很便宜； 許可證只需 7 歐元。 如果願意，您可以購買額外的支持，但說實話； 這只是元數據，對於害怕代碼的人來說，這是一項美化的複制和粘貼工作。 你不需要支持。

我為您提供的第三個選項是使用 TEXTman，這是一個前端帖子編輯器，用於在 Joomla 網站上創建和發布您的文章。 您無需為 Twitter 卡進行任何配置即可工作； 只需使用 TEXTman 作為您的編輯器，它就會自動帶來該功能。 這裡的缺點是它也是一種專業工具，而且價格昂貴得多。 由於它是一個完整的文本編輯器和相關工具，因此它是一個添加了多個擴展的大許可證。 訂閱所有內容的費用為 99 美元，或者僅 TEXTman 本身以及有限的支持和更新許可證費用為 40 美元。 如果你想要的只是 Twitter 卡，那就太貴了。

最後，當然，您可以使用下面或本文中描述的方法手動實現它們。

5：自定義內容管理系統

我已經在上面的代碼中發布了元數據的示例。 無論您使用什麼架構，這基本上與您粘貼到站點標題中的代碼相同。 根據您的站點需要調整內容並將代碼複製到您的站點標題中。 它在哪裡並不重要，只要它位於站點頂部的 <head> 和 </head> 標記之間。

不要忘記自定義標籤。 您需要注意的主要是卡片、站點、創建者和域標籤。 這些應該填寫您想要的卡片類型、您的網站和內容創建者的 Twitter 句柄以及您的域的 URL。 然後在實施更改後驗證卡。

如果您的卡在驗證後仍然無法使用，您應該閱讀 Twitter 的故障排除指南。 您可能會在幾秒鐘內修復某個簡單的錯誤。