meta tag位於頁面的<head>內,用來告訴搜尋引擎與社群平台該如何呈現這個頁面。這個產生器會一次產生整組標籤:Google搜尋結果中顯示的title與meta description、canonical與robots指令,以及在連結被分享時控制圖片、標題與文字的Open Graph和Twitter Card標籤。你輸入的每個值都會自動跳脫,即使標題裡有引號或角括號也不會破壞程式碼結構;留空的欄位則不會產生空標籤。
免費Meta Tag Generator
全程在瀏覽器裡執行，免上傳、免註冊。
頁面資訊
產生的meta tag
即時預覽
example.com
頁面標題會顯示在這裡
meta description會以搜尋摘要與社群卡片的形式顯示在這裡。
og:image 預覽
example.com
頁面標題會顯示在這裡
meta description會以搜尋摘要與社群卡片的形式顯示在這裡。
什麼是meta tag generator?
meta tag generator可以把你輸入的頁面標題、描述與社群資訊,轉換成頁面所需要的完整HTML meta tag,包含SEO用的title與description,以及Open Graph(og:)和Twitter Card標籤。填好欄位後,它會即時產生已跳脫處理、可直接複製使用的程式碼。所有運算都在瀏覽器中完成,不會上傳任何資料。
使用方式
- 1填寫頁面資訊. 輸入頁面標題與meta description,再加上canonical URL,如果需要也可以填寫og:image與網站名稱。
- 2設定社群選項. 選擇og:type,挑選Twitter card的樣式,並填入你的Twitter帳號。og:url預設會使用canonical URL的值。
- 3查看即時預覽. 輸入的同時,Google搜尋結果樣式與社群卡片會即時更新,讓你提前看到頁面被搜尋或分享時的樣子。
- 4複製產生的meta tag. HTML程式碼會即時產生,複製後貼到你頁面的head內即可。
適合誰用
- SEO人員撰寫簡潔的title與meta description,並對照Google的長度限制進行檢查。
- 網頁開發者需要為頁面範本準備可直接貼上使用的Open Graph與Twitter Card標籤。
- 行銷人員設定連結在社群媒體被分享時顯示的圖片、標題與描述。
- 部落客與店家經營者不需依賴外掛或CMS設定,就能加入正確的meta tag。
常見問題
meta tag generator是免費的嗎?
是的,完全免費,不需要註冊,也沒有使用次數限制,所有運算都在你的瀏覽器中完成。
我輸入的資料會被上傳嗎?
不會。你輸入的標題、描述與URL都是在瀏覽器本機轉換成HTML meta tag,不會傳送到任何伺服器。
這個工具會產生哪些meta tag?
它會產生title標籤、meta description、canonical連結、robots指令,以及完整的Open Graph標籤組(og:type、og:title、og:description、og:url、og:image、og:site_name),還有Twitter Card標籤(twitter:card、twitter:title、twitter:description、twitter:image、twitter:site)。
標題與描述應該寫多長?
建議title控制在60個字元以內,meta description大約落在50到160個字元之間。超過這個範圍時工具會顯示提醒,因為Google在搜尋結果中會截斷過長的title與description。
og:image與twitter:image有什麼差別?
og:image是連結在Facebook、LinkedIn等多數平台被分享時顯示的圖片,twitter:image則是X/Twitter卡片對應的圖片。這個工具對兩者使用同一個圖片URL,這也是常見做法,一張1200x630的圖片就能適用所有平台。
產生的meta tag應該貼在哪裡?
把它們放進頁面HTML的<head>元素內,和既有的meta tag放在一起即可。之後可以用Facebook的Sharing Debugger或Twitter Card Validator來驗證社群標籤是否生效。