Metatags.io 線上預覽、編輯產生對應的 Meta 標籤

無論搜尋引擎或常見的社群網站都會內建「鏈結預覽」功能，當使用者搜尋或貼上鏈結時會自動去抓取該網站相關資訊，例如標題、說明或縮圖等等，如果沒有進行任何設定那麼會選擇系統判斷最適合的部份，但透過設定網頁中的 Meta Tags 可以指定你要的內容，對於搜尋引擎最佳化（SEO）也有正面影響。之前曾介紹過「Mega Tags」（兩個名詞有點像）是一款 META 標籤產生器，能針對各種社群媒體建立適當的標籤原始碼。

本文要介紹的「Metatags.io」和 Mega Tags 有點像，可以檢查網頁在搜尋引擎或社群網站上顯示的預覽樣貌，亦能設定網站縮圖、標題和描述資訊，最後產生適當的 Meta Tags 並運用在網站上。Metatags.io 支援 Google 搜尋引擎、社群網站 Facebook、Twitter、LinkedIn、Pinterest 和 Slack。

值得一提的是 Metatags.io 能直接在線上預覽網頁設定 Meta Tags 後的效果，對於判斷效果來說會很有用，網站會產生主要 Meta Tags 和一般網站使用的 Open Graph 標籤，並將相關內容帶入，如果製作網站想做好 SEO，建議可以先從網站首頁開始檢查。

網站名稱：Metatags.io
網站鏈結：https://metatags.io/

使用教學

STEP 1

開啟 Metatags.io 後首頁會直接顯示網站範本，預設選擇的頻道有 Google、Facebook 和 Twitter 三種。

STEP 2

從上方網址列輸入要查詢 Meta Tags 的網站網址，接著網站就會抓取相關資訊。

STEP 3

下圖是 Metatags.io 抓取的網站相關標籤，免費資源網路社群使用 WordPress，也有預先設定好標籤並使用外掛功能強化，因此在預覽時看起來就會很完整、沒有缺乏任何必要的資訊。

當然 Metatags.io 功能之一是直接在線上修改縮圖、標題和描述說明，修改後還能即時預覽效果、產生相關的 Meta Tags 資訊，就不用從頭自己寫，網站亦有收錄相關服務的除錯工具（Debugger），方便在開發時快速將服務上擷取的快取資訊清除、重新整理。

STEP 4

直接從 Metatags.io 網站預覽在 Google、Facebook、Twitter、LinkedIn 等社群服務的標籤顯示效果，如果沒問題，點選右上角的「Generate Meta Tags」產生相關標籤。

STEP 5

最後，網站就會將完整的 Meta Tags 範本顯示在網頁上，將所有內容複製、貼到網站就能使用，非常方便。如果你有上傳圖片的話，記得將你的圖片上傳到內容管理系統或主機，如此一來才能有最佳效果。