SEO 老兵不死的 Meta Tag 美學

由於搜尋引擎的爬蟲機器人天性使然,長久以來,SEOer 不可避免的工作之一,就是要想辦法針對網頁 html 動手腳,好讓目標網頁能夠順利地在自然排序結果中節節上升,其中曾經最主要的手段,就是 Meta Tag。我們來聊聊這位曾經的超級巨星,以及運用它的正確觀念。

什麼是 Meta Tag?

在回答這個問題之前,得先知道什麼叫做 html…,如果你翻維基百科第一行大概會看到「超文件標示語言(英文:HyperText Markup LanguageHTML)….」的介紹,拜託,這鬼才看得懂對吧?

seo-meta-tags

其實簡單得很,html 就是一個網站的骨架,用來定義網站上應該有哪些東西(元件),它們的排列是如何以及對應的屬性設定(就不說 CSS & Scripts了)。

對瀏覽器來說,解析 html 元件是頭等重要的工作,這樣才能依照設計者的希望來正常呈現一個網頁的樣貌,而網頁程式是怎麼知道哪一個元件代表什麼意思呢?靠的就是 html 當中每個種類元件所獨有的標記,每個標記種類都有獨特的作用,meta tag 就是其中一種,meta 的意思有一點抽象,常用來泛指關於某個東西的額外註明。

像是另一個常見單字 meta data 就是在描述「關於因資料本身存在而形成的額外資訊」,meta tag 本身則是用來註解關於某個網頁的額外資訊,提供搜尋引擎參考。

Meta tag 並不影響網頁的呈現效果,加入 meta tag 的基本用意,是幫助搜尋引擎的爬蟲程式更容易了解這個網站的內容,從而能更加正確地將該網頁配對給對應的搜尋需求。它其實有一點沒落了,但是仍然是技術 SEO 最基本的入門工作,稍後我們再多談一些。

Meta Tag 的種類及用法

Meta tag 在 html 中的擺放位置一般介於 <head>及</head>標記之間,這是搜尋引擎優先閱讀的區域,同時 meta tag 本身並不會被使用者直接看到,除非你手癢在網頁上按了右鍵,並且又再手癢一次按下「檢視原始碼」…,這正是等一會兒筆者準備要做的事情。

隨著 html 的演進( html5 ),meta tag 也陸續有一些更動,基本的語法如下:

<meta name="description" content="這個網站好好玩! 快來點我">

這個 meta tag 用來提供關於某個網站的「網站描述」,對應到 name="description" 的設定,而網站描述的內容則註明在 content="這個網站好好玩! 快來點我" 這個部分。

其他 meta tag 的用法大同小異,至於有哪些 meta tag 可以使用,各自又有什麼設定可以變化,就請直接參考下方的 w3schools 表格

屬性 參數值 描述
charset character_set Specifies the character encoding for the HTML document
content text Gives the value associated with the http-equiv or name attribute
http-equiv content-type
default-style
refresh
Provides an HTTP header for the information/value of the content attribute
name application-name
author
description
generator
keywords
Specifies a name for the metadata
scheme format/URI Not supported in HTML5.
Specifies a scheme to be used to interpret the value of the content attribute

首先特別值得注意的是 charset 為 html5 下的新功能,而 scheme 則是 html5 將不再支援的舊用法,因此針對這兩項筆者就不特別說明,有興趣的讀者可以自行參考上方連結。

seo-meta-data

其中 content 是最容易理解的,主要的描述文字就放在這個欄位當中,像是先前的「 content="這個網站好好玩! 快來點我" 」。Http-quiv 則多半搭配 refresh 值使用,可以指定重新整理的秒數,如下方的例子將告訴瀏覽器在開啟網頁的 10 秒之後重新整理:

<meta http-equiv=“refresh" content=“10″>

不過真正對 SEO 比較有作用的,則是 name 屬性的幾種用法,其中又以「description」、「author」、「keywords」最常見。Description + Content 的用法稍早之前已經見識過了,不過再多看一個實際範例也無妨:

<meta name="description" content="XXX網路家庭是台灣最大的電子商務集團,2014年公司自結合併營收金額達198億元,2005年1月XXX在台灣掛牌上櫃,,旗下擁有台灣最大B2C網站XXX24h購物和C2C第一名網站XX拍賣等網路公司。" />

Author 一般用來表明網頁的作者,對有使用 google+ 的用戶來說,搭配 <a> 標籤可以在搜尋結果頁得到額外的 Hack 效果,meta tag 的語法如下:

<meta name=“author" content=“作者是十把刀">

搭配 <a> 的用法教學,請參考這裡,下圖是一個範例:

最後則是「 keywords 」…,這個讓人既悲傷又懷念的 meta,它是 meta tag 曾經在 SEO 世界中呼風喚雨的主因,也是逐漸被遺棄的理由。都說了 meta 的作用是告訴搜尋引擎關於一個網站的資訊,身為一個貪心又靈敏的 growth hacker,假如你知道有一種 meta 是專門用來描述關鍵字,那麼你會怎麼運用呢?

還用說,當然是不擇手段,機智地去堆疊對搜尋排名有利的關鍵字!而這就是廣大 SEOer 經年累月在做的事情,不過搜尋引擎公司可不是省油的燈,當他們發現使用有著濫用傾向的時候,修改演算法就是必要的手段了。

2009 年 google 的聲明當中表示, 爬蟲程式不採用 meta keywords 來排序,甚至強調他們從來沒有參考過 meta keywords,另一方面 Bing 也表示他們只把 meta keywords 用在判斷 spam 的方面。

Meta 從來沒有作用,這是真的嗎?資深的 SEOer 也許會有不一樣的看法,在稍早的年代,一個著名的黑帽手法就是先利用 meta keywords 瘋狂的洗關鍵字來欺騙搜尋引擎,並搭配廣告等導流手段,短時間內一口氣提升網站的能見度及綜合排名權重,然後在網站尚未被歸類為 spam 而遭受搜尋引擎懲罰之前,挑個好時機把 meta keywords 改回合理使用的範圍…。

怎麼樣,厲害吧?當然這招目前已經不管用了。

以上的各種 meta tag 屬性與參數值都能做搭配運用,請看下方摘自水果日報首頁的原碼

<meta name="description" content="台灣蘋果日報是台灣很受歡迎的新聞網站,提供蘋果日報、即時新聞、動新聞、娛樂、體育、社會、生活、副刊、國際萬象等線上版內容,強調報導影音化、圖像化、即時化、行動化,提供讀者全面且豐富的新聞閱讀感受。" />

<meta name="keywords" content="蘋果日報,Apple Daily,台灣,壹傳媒,nextmedia,爽報,Apple, Animation news, Action News, Apple news, news,realtimenews,蘋果,蘋果新聞,新聞,昔日新聞,壹週刊,壹電視,蘋果基金會,蘋果慈善,動新聞,動畫新聞,新聞動畫,即時新聞,Facebook,臉書,蘋果粉絲團,plurk,留言,分享,按讚,天氣,影音新聞,行動版,手機,App,Android,iPhone,Mango,今天我最美,贈獎,贈獎活動,爆料,投稿,投訴,中獎名單,中獎,樂透,發票,統一發票,RSS,頭條,國際,娛樂,體育,運動,副刊,財經,房市,地產,論壇,專欄,生活,政治,法庭,彩券,頭彩 " />

<meta name="application-name" content="台灣蘋果日報│Apple Daily"/>

以及 google 提供的 meta tag 標準教學範例

<meta charset="utf-8″>

<meta name="Description" CONTENT="Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price: £9.24, Length: 784 pages">

<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34="/>

<meta name="robots" content="noindex,nofollow">

社群分享優化:每個網站都該有的新 Meta Tag

meta keywords 失寵之後,很多人都覺得 meta 已經沒有什麼作用了,但是我們都知道社群流量對一個內容網站來說有著舉足輕重的影響力,而 meta tag 正好可以幫助網站管理者在網址被分享時呈現指定的網頁敘述、文字以及圖片,藉此提供對社群讀者來說比較友善的連結貼文(尤其是臉書)。

要做到這個效果,我們需要引用一個新的屬性「property」以及下列的幾種參數:

  • og:title = 被分享時要呈現的網頁標題
  • og:url = 被分享時要呈現的網址
  • og:description = 被分享時要呈現的網頁敘述
  • og:image = 被分享時要呈現的網頁視覺圖片
  • og:type =用來補充說明這是一篇文章(article)或者一個網站(website)

詳細語法如下:

<meta property="og:title" content="標題" />

<meta property="og:url" content="http://www.12345.com/" />

<meta property="og:description" content="這是一個範例" />

<meta property="og:image" content="http://12345.com/漂亮的圖片.jpg" />

<meta property="og:type" content="文章" />

Social meta tags 已經獲得 google+、LinkedIn、Facebook 以及 Twitter 等主要社群平台的支援,假如想要用於 Twitter 的話,則還需要一些小小的變化,像是把  og 換成 Twitter,如下例:

延伸閱讀

* [REBUZZ專欄] 哪些顏色讓我們不自覺地就敗家? 心理學家告訴你!

* 誰說態度決定一切? 態度三元論(ABC MODEL OF ATTITUDE)與計畫行為理論(THEORY OF PLANNED BEHAVIOR MODEL)

* 如果說服務是一種生活態度

 

(Visited 10,174 times, 16 visits today)

Wendell.Huang

科技公司嫌棄太活潑,消費品牌挑剔太沉悶..., 經常必須解釋自己在學什麼, 不小心就摔破對方眼鏡的跨領域玩家。

One Comment

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *