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

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

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

其他類似的線上工具：

• Mega Tags 最完整社群媒體 META 標籤產生器，Facebook 社群經營必備
• Metatags.io 線上預覽、編輯產生對應的 Meta 標籤

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 社群網站分享的預覽標題，有助於吸引其他用戶注意。

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

STEP 2

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

STEP 3

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