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

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 三種。

Metatags.io

STEP 2

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

Metatags.io

STEP 3

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

Metatags.io

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

Metatags.io

STEP 4

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

Metatags.io

STEP 5

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

Metatags.io

值得一試的三個理由:

  1. 查看網址在 Google 及社群網站的鏈結預覽情形
  2. 線上編輯修改網站預覽縮圖、標題和描述
  3. 快速產生適當的 META 標籤語法
分享到...