我以令人尷尬的方式了解了元標籤的價值。幾年前,我發布了一個令我感到自豪的登陸頁面,在幾個地方發布了鏈接,並看到它以裸 URL 的形式隨處可見,沒有標題、沒有描述和損壞的圖像圖標。頁面本身很好 - 但我從未添加過 打開圖 標籤,所以每個社交平台都回過頭來猜測,每個人都猜錯了。內容很好,連結的呈現是垃圾,這實際上意味著點擊次數比頁面應得的要少得多。
元標籤是 HTML 的一小塊,它決定您的頁面在頁面本身之外的所有地方的外觀:在 Google' 中;在 Slack 展開、Facebook 或 LinkedIn 卡、推文中的結果。它們很容易出錯,因為有三個重疊的標準 - 標準 SEO 標籤、Open Graph 和 Twitter 卡 - 每個標準都希望通常相同的資訊有略有不同的屬性名稱。我建造 工具。dev 並圍繞它編寫大量內容,所以我不斷設定元數據,並且我建立了 元標記產生器 要從一組輸入產生正確、完整、可複製的標籤區塊 - 帶有長度警告,因此我永遠不會發布再次被截斷的標題。
TL;DR: 元標籤控制您的搜尋片段和社交連結預覽。您需要三組重疊的集合 - 標準 SEO 標籤、大多數平台的開放圖譜和 Twitter 卡 - 它們共享大部分內容,但使用不同的屬性名稱。這 元標記產生器 從一種表單建立所有三個表單,當您的標題超過約60 個字元或描述超過約160 個字元時向您發出警告,安全逃脫文本,並且可以發出匹配的JSON-LD 區塊,所有這些都在您的瀏覽器中。
什麼是元標籤以及它們為何重要?
元標籤是存在於頁面內的元素's <head> 並攜帶有關頁面的信息,而不是頁面上顯示的內容。這 <title> 標籤和 <meta name="description"> 標籤是最古老和最重要的兩個:它們通常一起形成 Google 搜尋結果中的可點擊標題和灰色摘要行。把它們做好,你的結果讀起來就會很好,就會獲得點擊;把它們排除在外,搜尋引擎會從你的頁面文字中合成一些東西,這通常是尷尬的。
除了這些基礎知識之外,還有兩個社會標準。 Open Graph 最初來自 Facebook,但現在受到 LinkedIn、Slack、Discord、Pinterest、WhatsApp 等的認可,使用諸如此類的標籤 og:title, og:description, 和 og:image 控制共享連結如何顯示為卡片。 Twitter 卡對 Twitter/X 執行相同的工作 twitter: 標籤。存在嚴重重疊 - 所有三個平台的標題和描述通常都是相同的 - 但每個平台都讀取自己的命名空間,因此您必須提供所有三個以覆蓋您的連結可能共享的任何地方。
這重要的原因是槓桿作用。當連結預覽完整且有吸引力時,與裸露內容相比,相同的內容會獲得更多的參與度。好的標題和描述可以提升搜尋中的點擊率;正確的開放圖形卡可以提升每個社交分享的點擊率。元標籤是每頁的一次性設置,每次找到或共享頁面時都會獲得回報,這正是值得仔細做的工作。這 元標記產生器 存在使得設定是一項填入表單的任務,而不是從記憶體複製貼上任務。
元標籤產生器如何建立標籤?
生成器採用一組結構化的輸入 - 標題、描述、圖像、URL、網站名稱和少數選項 - 並將它們扇出為三個協調的 HTML 區塊。了解扇出可以解釋為什麼一種表單會產生如此多的標籤。
它首先從您的核心欄位寫入 主要標籤: 的 <title>,元描述和可選關鍵字、作者、機器人、語言、主題顏色和規範連結。然後重複使用相同的標題、描述和圖像來編寫 打開圖塊 與 og: 屬性名稱,新增 og:type, og:url, 和 og:site_name. 最後它寫了 推特卡區塊 與 twitter: 名稱,包括卡片樣式和對應的手柄 twitter:site 和 twitter:creator. 因為這三者都來自相同的輸入,所以它們會自動保持同步 - 您不會意外地給 Facebook 一個標題,給 Twitter 另一個標題。
有兩個細節使輸出可以安全貼上。首先,只有您實際填寫的欄位才會產生標籤,因此您永遠不會空送 content="" 屬性。其次,每個值都是 HTML 轉義的:描述中的引號、& 或尖括號都會轉換為其實體,因此它無法突破屬性並損壞您的標記。這 元標記產生器 還可以選擇發出匹配的 JSON-LD 結構化資料塊,這是向搜尋引擎描述頁面的單獨但互補的方式。
標題和元描述應該持續多久?
這是讓大多數人感到困擾的問題,答案是關於顯示寬度,而不是硬字元上限。搜尋引擎會截斷超出其分配空間的標題和描述,因此實際限制是文字開始被省略號切斷的點。
對於標題,目標是大約 50 到 60 個字元。 Google 渲染的標題寬度可達約 600 像素,對於典型文字來說,該寬度約為 60 個字符,並且超過了該字元即可消除結尾。對於元描述,目標是大約 120 到 160 個字元;描述在桌面截斷之前可以運行到大約 160 個,而行動裝置有時會更短。這兩個限制都不準確,因為兩者都是以像素而不是字元來測量的--充滿寬字母的標題比充滿窄字母的標題截斷得早--但字元指南足夠接近,可以圍繞它進行設計。
的 元標記產生器 即時計數角色並在您跨越閾值時向您發出警告:超過 60 的標題或超過 160 的描述會被標記,以便您可以在發布之前對其進行修剪。當標題非常短時,它也會推動您,因為 20 個字元的標題會浪費您用於關鍵字的空間。這些是指導方針而不是規則--稍長的標題並不是一場災難--但在寫作時看到計數會讓你保持誠實。如果你經常調整標題和描述,那麼 字計數器 對於需要達到長度目標的較長副本來說非常方便。
SEO 標籤、Open Graph 和 Twitter 卡有什麼不同?
它們為不同的消費者提供服務,並且知道哪一個可以阻止您認為自己只覆蓋了一個消費者就完成了。以下是三組如何排列它們共享的欄位。
| 目的 | 搜尋引擎優化標籤 | 打開圖 | 推特卡 |
|---|---|---|---|
| 頁面標題 | <title> |
og:title |
twitter:title |
| 總結 | meta name="description" |
og:description |
twitter:description |
| 預覽圖像 | - | og:image |
twitter:image |
| 規範地址 | link rel="canonical" |
og:url |
twitter:url |
| 卡片樣式 | - | og:type |
twitter:card |
| 歸因 | meta name="author" |
og:site_name |
twitter:site |
SEO 欄是 Google 為搜尋結果讀取的內容。 Open Graph 欄是大多數社交和聊天平台為其連結卡讀取的內容。 Twitter 欄就是 Twitter/X 讀的內容。重疊是顯而易見的--標題和描述在所有三個平台上重複出現--但由於每個平台只查看自己的命名空間,省略一欄意味著平台又會陷入猜測。這 元標記產生器 精確地填滿一種形式的所有三列,這樣您就永遠不會離開平台猜測。
我還需要 JSON-LD 結構化資料嗎?
元標籤和結構化資料回答不同的問題,因此有用的問題相互補充而不是替換。元標籤告訴平台如何顯示您的頁面; JSON-LD 以機器可讀的方式告訴搜尋引擎您的頁面內容,從而解鎖豐富的結果。
JSON-LD 是 JSON 的一個區塊,包裹在 a 中 <script type="application/ld+json"> 標籤,將您的頁面描述為一個類型實體 - 網站、文章、產品、食譜等 - 具有命名屬性。搜尋引擎使用它來理解關係,並在正確的情況下,直接在搜尋中顯示增強的結果,例如文章署名、星級或常見問題手風琴。它不會像標題和描述那樣控制您的片段;它在頂部添加了一層含義。
的 元標記產生器 在元標籤旁邊發出起始 JSON-LD 區塊,根據您的開放圖類型鍵入為網站或文章,並從相同欄位填充。它是一個堅實的基礎,您可以使用特定於類型的屬性進行擴展。只要您想獲得豐富的結果,結構化資料就值得添加,儘管它不是一個神奇的排名槓桿 - 它啟用功能,它不會強制它們。為了更了解這些部件如何組合在一起, web 開發人員工具包 綜述涵蓋了我使用的周圍工具。
元標籤產生器的常見用例
啟動新頁面或網站
顯而易見的一個。每個新頁面都需要一個標題、一個描述和一張社交卡,並且手動輸入全套 SEO、Open Graph 和 Twitter 標籤既乏味又容易出錯。填寫一次表格並複製一個完整的、正確的區塊會將一項繁瑣的任務變成三十秒的任務,長度警告意味著頁面啟動時會顯示一個完全顯示的片段,而不是在第一天被截斷。
修復錯誤或遺失的連結預覽
當出現沒有圖像或錯誤文字的共用連結時,原因幾乎總是遺失或格式錯誤的 Open Graph 標籤。使用生成器重建標籤 - 確保 og:image, og:title, 和 og:description 全部存在且正確 - 修復預覽。更新後,相關平台'有時需要透過其調試工具刷新緩存,但標籤本身是正確的。
標準化整個團隊的元資料
在一個有多個貢獻者的專案中,元標籤會漂移:一個頁面有 Twitter 標籤,另一個頁面沒有,第三個頁面的描述是建議長度的兩倍。使用單一產生器作為完整標籤集的參考,可以使每個人都產生相同形狀的元資料。輸出兼作項目期望的標籤的文件。
為框架準備元資料
在 Next。js、Nuxt、React 或類似內容中,您不會生貼 <meta> 標籤 - 您將值輸入頭部或元資料 API。生成器仍然有用,作為您需要哪些標籤和值的真值來源:填寫表格,讀出完整的集合,並將其翻譯成您的框架'元資料物件。它消除了對哪個的猜測 og: 和 twitter: 要包含的欄位。
為什麼要在瀏覽器中產生元標籤?
的 元標記產生器 完全以客戶端運作。您輸入的標題、描述、URL 和圖像連結將保留在瀏覽器中,永遠不會上傳,並且該工具一旦加載即可離線工作。隱私很重要,因為您經常為尚未公開的頁面準備元資料 - 未發布的產品、客戶端和#39;徵兵活動,一個內部工具。將其貼上到伺服器端產生器中意味著將您未宣布的計劃交給其他人'日誌;在瀏覽器中執行此操作意味著它永遠不會離開您的機器。這 線上工具中的資料隱私 指南解釋了為什麼我認為這是不容談判的。
元資料工作也連接到一些相鄰的任務。這 蛞蝓發電機 建立規範的乾淨 URL og:url 標籤指向。這 HTML 實體編碼器 當您需要親手逃離頑固的性格時,它很有用。和 URL 編碼器/解碼器 處理有時掛在規範 URL 上的查詢參數的編碼。它們共同涵蓋了正確運送頁面周圍的小型、嚴格的作業。
問號
生成器建立哪些元標籤?
它創建標準 SEO 標籤 - 標題、描述、關鍵字、作者、機器人、語言、主題顏色和規範 - 加上開放圖標籤,例如 og:title、og:description、og:image 和 og:url,以及匹配的Twitter 卡標籤。它還可以發出 JSON-LD 結構化資料塊。只有您填寫的欄位才會產生標籤,因此輸出保持乾淨。
我的標題和元描述應該多久？
目標標題約為 50 至 60 個字符,描述約 120 至 160 個字符。 Google 會截斷經過這些點的文本,因為它測量的寬度以像素為單位,而不是精確的字元。生成器在您鍵入時進行計數,並在搜尋結果中標題或描述可能被切斷時向您發出警告。
什麼是開放圖標籤，我需要它們嗎？
Open Graph 標籤控制您在 Facebook、LinkedIn、Slack、Discord 和許多其他平台上分享時的頁面外觀。如果沒有它們,共享連結可能不會顯示任何圖像或尷尬的後備文字。如果您想要在任何共享內容的地方進行有吸引力的、可預測的連結預覽,強烈建議使用 Open Graph 標籤,生成器會為您建立它們。
兩種 Twitter 卡類型有什麼不同？
摘要卡在標題和描述旁邊顯示一個小方形縮圖,而摘要_large_image 在其上方顯示一個大橫幅圖像。當您擁有想要主導預覽的寬大、高品質共享圖像時,請使用大圖像卡,並使用摘要來製作更緊湊的卡。生成器可讓您在它們之間切換並寫入正確的 Twitter:card 值。
我要將生成的元標記放在哪裡？
將區塊貼到 HTML 頁面的中心元素內,最好貼在其他腳本之前的頂部附近。在 Next。js、React 或 Vue 等框架中,透過框架添加等效標籤's head 或元資料 API 使用產生的 HTML 作為要包含的標籤和值的參考。
如果我有開啟的圖形標籤，我還需要一個規範的 URL 嗎？
是的。規範連結告訴搜尋引擎哪個 URL 是頁面的權威版本,以避免重複內容問題,而 og:url 設定社交預覽中使用的 URL。儘管值通常相同,但它們具有不同的目的,因此設定兩者是良好的做法。
元標記產生器是免費的還是私有的？
是的。它是完全免費的,沒有限制,每個標籤都是用瀏覽器內的 JavaScript 內建的。您輸入的文字、URL 和圖像連結永遠不會傳送到伺服器,因此您可以安全地為未發布的或內部頁面準備元資料。
新增元標籤會提高我的搜尋排名嗎?
元標籤有助於搜尋引擎和社交平台正確顯示您的頁面,但它們是眾多因素之一。強大的標題和描述可以提高點擊率,結構化資料可以實現豐富的結果,但內容品質、連結和網站健康狀況仍然推動排名。將良好的元標籤視為必要的基礎而不是排名捷徑。
