
如果你是經營網站、部落格的站長,一定知道搜尋引擎最佳化(SEO)對網站流量的重要性,這幾年隨著社群網路逐漸蓬勃發展,也開始出現所謂「社群媒體最佳化」(Social Media Optimization,簡稱 SMO)操作方法。既然 SEO 之於搜尋引擎,SMO 當然就是針對流量極高的社群網站。不過這兩者作法大相逕庭,但共同之處在於盡可能提供更明確、易讀的資訊,如果應用在社交網路,最簡單的作法就是完善網站必要的 META 標籤。
什麼是網站 META 標籤呢?它是對於當前網頁提供各項資訊描述的一種方法,例如網頁標題、說明、網址、發佈者和語言等等(主要放在原始碼中),為了讓搜尋引擎及社群網站機器看得懂你的網頁,必須指定好這些標籤,讓平台可直接取用並顯示出來,避免中間造成的誤差,從這些說明可以稍微了解 META 標籤的重要性。
若你是使用 WordPress 架站且安裝過任何的 SEO 相關外掛功能,大部分都會自動幫你帶入所需的 META 標籤,也能因應任何頁面自動產生標籤,相對來說省事不少;但如果你是自己撰寫網頁,就可能必須先去查詢一下這些標籤的使用方法。

本文要推薦的「Mega Tags」是一款非常好用的免費站長工具,能協助你建立最完整的社群媒體 META 標籤,也是 META 標籤產生器,堪稱是「最完整的社群媒體 META 標籤產生器」!支援 Open Graph(Facebook、Google+、Pinterest 及 LinkedIn 使用的標籤)及 Twitter 標籤,只要打開網頁,將你要設定的項目填入就能快速產生對應的 META 標記撰寫方法,再把它複製到網頁裡即可。
網站名稱:Mega Tags
網站鏈結:https://megatags.co/
使用教學
STEP 1
開啟 Mega Tags 網站後,從步驟一選擇要使用的類型,例如網站、應用程式(iOS、Android App)、文章、影片或電商網站產品,可以帶入的標籤類型應該不太一樣。預設情況下只會產生 Open Graph 也就是 og 標籤,假如你要產生 Twitter 專用標籤可以勾選一下。

STEP 2
接著從第二步驟開始填寫你的頁面相關資訊,最重要的就是網頁標題、描述和網站圖片這三項,下方還會有 Open Graph 及 Twitter 標籤的設定選項,一樣是填入後右側就會自動產生對應的 META 標籤。

STEP 3
Open Graph 是蠻多網站會使用的標籤,建議要仔細設定(尤其現在很多網站鏈結都會被轉貼到 Facebook,將這些欄位設定完整將有助於在社群網站顯示更正確資訊)。Open Graph 不是每個欄位都必須填入,例如影片、管理者 ID 或應用程式 ID 都不是必備選項,如果沒用到只要留空即可。

STEP 4
設定完成後,點擊右側的「Copy Code」粉紅色按鈕來複製所有產生的 META 標籤,將它貼到網站的適當位置(一般來說是在 <head> </head> 之間),大功告成!

STEP 5
最後,Mega Tags 網站還提供了幾個常用的測試工具,包括 Facebook Debugger 和 Google 結構化資料測試工具,只要連接到這些網站,輸入你剛才加入 META 標籤的鏈結,就能測試出顯示效果有沒有符合期望。

使用 Google 結構化資料測試工具測試後,可能會發現有一些錯誤或警告項目,記得要打開偵測結果,看看是那些標籤發生問題,盡可能修正讓它符合正常才不會對網站造成影響。

值得一試的三個理由:
- 可快速產生 Open Graph 及 Twitter 的 Meta 標籤
- 有助於社群媒體最佳化(SMO),當今網頁開發必備
- 適用於 Facebook、Twitter、Google+、Pinterest 及 LinkedIn