Meta 標籤與搜索引擎優化

當談及到<meta>標籤對搜索引擎排名的影響,很多人都存在誤解。在過去,許多已經失去作用的標籤仍然被頻繁使用。所以哪些標籤對搜索引擎優化(SEO)有作用,哪些沒有呢?


什麼是Meta標籤


Meta標籤給搜索引擎提供了許多關於網頁的信息。這些信息都是隱含信息,意味着對於網頁自身的訪問者是不可見的。


你可以在網頁的 <head>元素中發現<meta>標籤。在過去,有人曾經問我它是否可以放在網頁的<body>,最好不要這樣做。如果<meta>標籤被放在<body>位置,某些瀏覽器可能無法識別它們,也就相當於你創建了無效的標籤。


通常情況下,<meta> 標籤會包含一個name屬性,用來設置元數據。元數據的值放在content屬性裏面。你可以在<meta>標籤中使用各種名稱/值對,讓我們來看看其中的一些。


你可以會遇到一些Meta標籤


讓我們運行一下在一個網頁中發現的幾個不同的 <meta> 標籤。


Meta Description


Meta description標籤可能是最有用的標籤之一。顧名思義,它會給搜索引擎提供關於這個網頁的簡短的描述。代碼如下:


<meta name=description content=Everything you need to know about meta tags for search engine optimization/>


這個標籤曾經在搜索排名中佔有很大的權重,但隨着算法的不斷的更新升級,它的地位也逐漸降低。它雖然不會提高網站排名,但是,因爲它會被用在搜索引擎的結果頁,所以依然有用。


這也就意味着它仍然可以提高你的網頁點擊率。畢竟,當用戶搜索的關鍵詞與之相匹配時,會以粗體顯示突出顯示。這就是爲什麼一個好的頁面說明 (利用關鍵字的) 可以顯示更多與用戶相關的信息,進而提高了點擊率。推薦的description長度爲160 個字符。


但是如果你沒有使用description標籤或者description標籤爲空時,會發生什麼呢?搜索引擎仍會在搜索結果頁顯示出自己創鍵的一小段文字。大多數的結果都不是用戶需要的,也就意味着你將失去用戶點擊網頁的機會。


Meta Robots


我們在之前的教程中已經接觸過Meta robots標籤。如果你沒有機會回去閱讀它,這裏有一段簡短的介紹:


Meta robots標籤管理着搜索引擎是否可以進入網頁,你可以用它來允許或不允許搜索引擎來獲取你的網頁、進入你網頁中的子鏈接或對你的網頁存檔。例如:


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


這個 meta 標籤告訴搜索引擎不要獲取網頁,並且阻止其進入鏈接。如果你不小心使用了兩個矛盾的術語 (例如noindex 和index),谷歌會選擇最具限制性的選項。


爲什麼這個標籤會對搜索引擎優化(SEO)起作用呢?首先,它可以防止對拷貝內容的冗餘抓取,例如頁面的打印版頁面。它也可能會對那些內容不完整的頁面或者而存在私密信息的網頁起作用。


Title


專業的講,title標籤不是meta標籤,但他們都放在相同位置。我之所以把title標籤放在這裏是因爲它對搜索引擎優化很重要。


在所有的HTML文檔中,title標籤都是不可缺少的。它定義了整個文檔的標題,如下所示:


<title>Title of the page</title>


簡單而實用。標題通常會顯示在兩個不同的地方;瀏覽器的頭部標籤和搜索結果頁。這就意味着title標籤在點擊率(CTR)和排名上有很重要的影響。


一個好的標題應該包含關鍵字,而且最好放在標題的開頭部分。請記住,那些匹配到用戶搜索的關鍵字會以粗體顯示。


另一件你應該牢記在心的事情就是標題的長度。谷歌會限制標題爲70個字符,所以偶爾你可能需要書寫一個合適的標題。


Dan Shure發表過一篇很不錯的關於標題的文章,叫are your titles irresistibly click worthy and viral?,包含了很多有意思的知識點。


其它一些Meta標籤


講解了一些常用的meta標籤,下面讓我們來看一些不經常使用的。


Meta Content Type (charset)


meta content type標籤被用來聲明網頁的字符編碼,爲了防止瀏覽器產生編碼問題最好加上這個屬性。但是它不會影響搜索排名或點擊率(CTR)。


你可能很熟悉下面長長的Content-type代碼:


<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>


現在我們也可以使用更簡短的、向後兼容的聲明模式:


<meta charset="utf-8" />


這個標籤應該放在任何包含文本元素的標籤之前,包括我們已經講解的title標籤。


Meta Keywords


這個標籤在過去很重要,但是現在卻沒什麼價值了。現在沒有一個主流的搜索引擎使用meta keywords來判斷網頁的內容了。


在meta keywords標籤裏面,你可以存儲幾個關於網頁內容的關鍵字。然而,它卻不會提高你的排名。如果你想要實現它(儘管我不知道你爲什麼這樣做)你可以用如下代碼:


<meta name=”keywords” content=”meta tags,search engine optimization” />


Meta Language


這個標籤之前是用來聲明網頁的語言的。可以告知屏幕閱讀器和其它文本處理器他們正在處理的語言以便更好的工作。這就是爲什麼meta language的content聲明爲什麼可以爲fr。


<meta http-equiv="content-language" content="fr" />


但這看起來是多餘的,W3C推薦使用標籤的屬性來聲明語言:


<html lang="en">


如果這個元素所包含內容的語言和你在<html>元素設置的默認語言不一樣時,這個屬性也能應用到其他元素上:


<p lang="es">Me gusta..


Notranslate


有時,Google在結果頁面會提供一個翻譯鏈接,但有時候你不希望出現這個鏈接,你可以添加這樣一個meta標籤:


<meta name=”google” content=”notranslate” />


Refresh


使用這個meta標籤你可以控制瀏覽器在一段時間之後自動刷新。舉例說明,下面的代碼表示每隔30秒網頁自動更新:


<meta http-equiv=”refresh” content=”30”>


你也可以在刷新之後跳轉到另外一個頁面,看看下面這個例子:


<meta http-equiv=”refresh” content=”30;URL=’http://website.com’”>


W3C是不推薦使用這個標籤的,因爲它會令用戶產生迷惑。另外,它對搜索排名沒有任何影響。


總結


簡單的說,有三個meta標籤,你應該關注一下:description、robots、title(經常被視爲是,但專業來講不是).


description標籤被用來顯示更多有關網頁內容的信息,搜索引擎也會在搜索引擎結果頁面(SERP)使用它。robots標籤用來阻止搜索引擎獲取拷貝頁面、私密頁面和未完成的頁面。最後,最重要的title標籤,控制它在70個字符以下,並在其中使用關鍵詞。


keywords標籤的時代已經過去,最好不在使用它。其他一些比較重要的標籤(有關搜索引擎優化):language、content、refresh、nontranslate。


相關的meta設置


<meta charset="UTF-8">

<meta http-equiv="refresh" content="5;url=" />

<link rel="copyright" href="copyright.html"  />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="description" content="150 words" />

<meta name="keywords" content="your tags" />

<!--

   all:文件將被檢索,且頁面上的鏈接可以被查詢;

   none:文件將不被檢索,且頁面上的鏈接不可以被查詢;

   index:文件將被檢索;

   follow:頁面上的鏈接可以被查詢;

   noindex:文件將不被檢索;

   nofollow:頁面上的鏈接不可以被查詢。

-->

<meta name="robots" content="index,follow" />

<meta name="author" content="author name" />

<meta name="google" content="index,follow" />

<meta name="googlebot" content="index,follow" />

<meta name="verify" content="index,follow" />

<!-- 啓用 WebApp 全屏模式 -->

<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 隱藏狀態欄/設置狀態欄顏色:只有在開啓WebApp全屏模式時才生效。content的值爲default | black | black-translucent 。 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!-- 添加到主屏後的標題 -->

<meta name="apple-mobile-web-app-title" content="標題">

<!-- 忽略數字自動識別爲電話號碼 -->

<meta content="telephone=no" name="format-detection" />

<!-- 忽略識別郵箱 -->

<meta content="email=no" name="format-detection" />

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />

<!-- 添加智能 App 廣告條 Smart App Banner:告訴瀏覽器這個網站對應的app,並在頁面上顯示下載banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html -->

<!-- 針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓 -->

<meta name="HandheldFriendly" content="true">

<!-- 微軟的老式瀏覽器 -->

<meta name="MobileOptimized" content="320">

<!-- uc強制豎屏 -->

<meta name="screen-orientation" content="portrait">

<!-- QQ強制豎屏 -->

<meta name="x5-orientation" content="portrait">

<!-- UC強制全屏 -->

<meta name="full-screen" content="yes">

<!-- QQ強制全屏 -->

<meta name="x5-fullscreen" content="true">

<!-- UC應用模式 -->

<meta name="browsermode" content="application">

<!-- QQ應用模式 -->

<meta name="x5-page-mode" content="app">

<!-- windows phone 點擊無高光 -->

<meta name="msapplication-tap-highlight" content="no">

發佈了11 篇原創文章 · 獲贊 9 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章