Meta Tag Generator 網站資訊標籤產生器,為搜尋媒體和社群網路最佳化

Meta Tag Generator 網站資訊標籤產生器,為搜尋媒體和社群網路最佳化

對我來說,要讓網站在搜尋引擎取得好的排名表現,把程式碼寫正確是首要任務,因此我相當重視 Google 之前釋出的「搜尋引擎最佳化入門指南」說明文件,如果你對於開發網站有興趣,或是工作也會碰到相關內容,之前推薦過「HEAD 網頁開發參考手冊」很有用,它收錄 HTML5 在會出現的各種元件和使用範例,幫助開發者寫出更為完整全面的網頁標頭,對不想要翻找艱澀繁瑣說明文件的朋友 HEAD 也直接給出最基本的標頭範例。

本文要介紹的「Meta Tag Generator」從名稱就知道它是一個 Meta 標籤產生器,簡單來說,Meta 是提供給瀏覽器或搜尋引擎描述網頁資訊的標籤,可以在原始碼部分找到,開發者通常不需要手動加入這些內容,如果使用 WordPress 或是其他架站平台會自動在網頁加上適當標籤,自行開發編寫原始碼就可以透過產生器來建立相關程式碼。

其他類似的線上工具:

Meta Tag Generator 使用更直覺的介面讓使用者輸入相關資訊,例如網頁標題、描述、關鍵字、網址、縮圖、作者、Twitter 帳號和 Facebook 應用程式 ID,快速產生對應的 Meta 標籤,如果你在開發網頁時不想煩惱這些問題,透過這個產生器將相關資訊帶入就能完成基本的標籤設定。

Meta Tag Generator
https://lewdev.github.io/apps/meta-tag-gen/

使用教學

STEP 1

開啟 Meta Tag Generator 後會看到相關欄位,包括網頁標題、描述、關鍵字、網址等等,每個欄位都會有說明和字元長度建議,盡量照著提示給的說明放入內容可以獲得比較好的結果。

最前面有個表情符號 Emoji 欄位,圖案會顯示於 Facebook、Twitter 社群網站分享的預覽標題,有助於吸引其他用戶注意。

Meta Tag Generator

現今關鍵字(Keywords / Hashtags)在 Meta 標籤部分已經不被 Google 或一些搜尋引擎採用,因此在這欄位上是標記為選填,可視自己的需求使用。在圖片網址部分 Meta Tag Generator 會給出較為適合的最佳化尺寸,之前我介紹過「SocialSizes 最適合社群媒體的圖片影片大小,下載模版套用最佳化尺寸」也能查詢不同社群適合的圖片大小。

Meta Tag Generator

STEP 2

把相關欄位資料設定後,點選「Generate Meta Tags」按鈕就會產生對應的 Meta 標籤。

Meta Tag Generator

STEP 3

這個工具產生的 Meta 標籤很基本,除了對網頁資訊的描述,也有 Twitter、Open Graph 標籤(使用於 Facebook 和 Pinterest),將你輸入的資訊快速帶入,讓搜尋引擎或社群網站都能顯示出你預先設定的內容。產生的標籤帶有一些註解,如果不需要就自行刪除或修改。

Meta Tag Generator

值得一試的三個理由:

  1. 產生開發網頁時會用到的 Meta 標籤語法
  2. 除了頁面標題、說明和關鍵字,也有 Twitter 和 Open Graph 標籤
  3. 提供每個項目的最佳字元數範圍和設定指南
分享到...