meta tag 元標籤
網頁中的meta是什麼?html meta tag介紹|天矽科技客製化網頁設計
網頁中的meta是什麼
網頁中的 meta 就是 meta data 元資料,meta tag 就是元標籤,我們可以在網站 html 語法中的<head>處,找到meta tag,如圖。
這裡所標記的 meta tag,除了 title 可以在瀏覽器分頁上看到之外(如下圖),其他都不會直接顯示在網站上,它的主要功能在於提供搜尋引擎能夠透過這些標籤,更好的去理解網站的內容與資訊,並將資料進行檢索及索引,最後推薦給使用者閱讀,可以說是在操作SEO時,相當重要的一個環節。
▲Meta title
常見的html meta介紹
想要提升SEO自然搜尋排名,在 meta tag 的部分一定要設定好,尤其是 title、description 和 keyword 的部分,這三個meta tag若設定得宜,則能輕易的讓搜尋引擎爬蟲和使用者了解網站的意圖,進而提升點擊的意願。
在一開始我們提供的示意圖片中,我們可以發現 meta tag 除了 title、description 和 keyword 以外,還有其他的標籤,以下介紹。
Meta title
Meta title 指網站標題,設定方式主要截取網站內容的摘要,會被顯示在瀏覽器分頁以及搜尋結果標題上,若設定得宜,則可讓使用者快速了解該網站頁面的內容概述。
Meta title設定建議 : 最多設定在75字元以內 (中文字25~30字),若設定過長,可能會被搜尋引擎截斷而無法完整呈現內容,且中文一個字是兩個字元;並留意,標題設定盡量不要有特殊符號,例如:&%#$☆,如需分隔字的話,可運用連結線 " - " 和下底線 " _ "。
▲Meta title於搜尋頁面顯示的位置
Meta description
Meta description 指網站描述的精華重點,主要以簡短、特色、有吸引力的文字描述網站內容,Meta description會在搜尋頁面中,顯示在Meta title的下方,若設定得宜,同樣可以提升使用者對網站的了解速度和被搜尋引擎推薦的機會。
建議Meta description 最多設定在160字元以內(中文字 80 個中文字)。與Meta title相同,若設定過長,可能會被搜尋引擎截斷而無法完整呈現內容,因此,設定Meta description時,盡可能保留精華重點、刪除多餘贅詞,並置入與產品或服務有關的關鍵字,會讓搜尋引擎更快理解網站內容。
▲Meta description於搜尋頁面顯示的位置 (在Meta title下方)
Meta keyword
Meta keyword指中文關鍵字,主要是以重點字描述網站內容的功能,當使用者搜尋某種字詞時,可以關聯到企業的網站與服務,若設定得宜,則可在使用者利用搜尋引擎搜尋時,出現我們的網站。
雖然Google已表示Meta keyword不會納入SEO的排名,但相較於其它搜尋引擎,仍會參考此欄位,因此,建議設定Meta keyword時,最多以5組為限,若超過或是設定過多,會被認為是在灌水。
▲於搜尋引擎Key入關鍵字,出現與關鍵字相符的網站
Meta charset
Meta charset為瀏覽器顯示網站所採用的字元編碼,是每個網站必要的標籤,現在絕大多數網站都是採用utf-8編碼,如果字元編碼使用不正確,可能造成使用者瀏覽網頁時,會出現亂碼情形,使網站變得不易閱讀。
▲若沒有加入字元編碼,網站字體會產生亂碼
▲加入字元編碼,瀏覽器會以utf-8載入字體
Meta viewport
Meta viewport 是為了解決行動裝置瀏覽器所設計的一個meta tag,也就是說網站若有使用RWD響應式設計,可以讓網站在各種不同的裝置中正常的呈現,就會有這樣的一個Meta viewport設定。
現今時代,行動裝置已成為絕大多數人瀏覽網站的工具,因此搜尋引擎對於友善行動裝置的網站會更加友善,因此若是網站還沒有使用RWD響應式設計,請務必進行改版,以提升SEO搜尋排名。
Meta og
<meta property=”og:title” content=”天矽科技”>
這個 meta og(Open Graph)是使用者將網站分享到社群網站時所顯示的標題、描述和縮圖,如下圖。
▲分享時所顯示的縮圖、標題和描述,都是從meta og進行設定的
Meta robots
Meta robots也可稱Meta標籤,可讓搜尋引擎爬蟲進行檢索及索引,若網站有設定Meta robots,就會接受所有搜尋引擎索引。不過Google曾表明robots僅供參考,不是一定放了就會將網站檢索並索引,但有放仍是有機會的。
Meta copyright
Meta copyright 是版權歸屬,為了聲明網頁文檔的版權,歸屬於某個人或某個組織時,就可以使用這個meta tag,像這樣:<meta name=”copyright” content=”天矽科技”> 表示該網站頁面屬於天矽科技所有。
當然html 的meta tag 還有很多,像是distribution 網頁發布地區、language 網頁發布語言,或是author 網頁的作者名稱…等,若有需要都可以加入網站語法中,不過與SEO有關的meta tag,最重要的就是 title、description 和 keyword 這三個,詳細介紹可瀏覽下方延伸閱讀之文章。
天矽科技所建置的網站,皆依照W3C制定的標準結構化語法建置,可有效提升SEO搜尋排名,有興趣可與我們聯繫。
延伸閱讀
✔ 網站SEO優化重點:網頁標題、描述與關鍵字設定