Meta標簽與搜索引擎優化

  • A+
所屬分類:SEO基礎知識

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

Meta標簽與搜索引擎優化

Meta標簽與搜索引擎優化

什么是Meta標簽

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

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

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

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

MetaDescription

Metadescription標簽可能是最有用的標簽之一。顧名思義,它會給搜索引擎提供關于這個網頁的簡短的描述。代碼如下:
<metaname=”description”content=”Everythingyouneedtoknowaboutmetatagsforsearchengineoptimization”/>

這個標簽曾經在搜索排名中占有很大的權重,但隨著算法的不斷的更新升級,它的地位也逐漸降低。它雖然不會提高網站排名,但是,因為它會被用在搜索引擎的結果頁,所以依然有用。
這也就意味著它仍然可以提高你的網頁點擊率。畢竟,當用戶搜索的關鍵詞與之相匹配時,會以粗體顯示突出顯示。這就是為什么一個好的頁面說明(利用關鍵字的)可以顯示更多與用戶相關的信息,進而提高了點擊率。推薦的description長度為160個字符。

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

MetaRobots

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

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

<metaname=”robots”content=”noindex,nofollow”/>

這個meta標簽告訴搜索引擎不要獲取網頁,并且阻止其進入鏈接。如果你不小心使用了兩個矛盾的術語(例如noindex和index),谷歌會選擇最具限制性的選項。
為什么這個標簽會對搜索引擎優化(SEO)起作用呢?首先,它可以防止對拷貝內容的冗余抓取,例如頁面的打印版頁面。它也可能會對那些內容不完整的頁面或者而存在私密信息的網頁起作用。

Title

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

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

<title>Titleofthepage</title>

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

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

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

DanShure發表過一篇很不錯的關于標題的文章,叫areyourtitlesirresistiblyclickworthyandviral?,包含了很多有意思的知識點。

其它一些Meta標簽

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

1、MetaContentType(charset)

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

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

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

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

<metacharset="utf-8"/>

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

2、MetaKeywords

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

在metakeywords標簽里面,你可以存儲幾個關于網頁內容的關鍵字。然而,它卻不會提高你的排名。如果你想要實現它(盡管我不知道你為什么這樣做)你可以用如下代碼:

<metaname=”keywords”content=”metatags,searchengineoptimization”/>

3、MetaLanguage

這個標簽之前是用來聲明網頁的語言的??梢愿嬷聊婚喿x器和其它文本處理器他們正在處理的語言以便更好的工作。這就是為什么metalanguage的content聲明為什么可以為fr。

<metahttp-equiv="content-language"content="fr"/>

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

<htmllang="en">

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

<plang="es">Megusta..

Notranslate

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

<metaname=”google”content=”notranslate”/>

Refresh

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

<metahttp-equiv=”refresh”content=”30”>

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

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

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

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

description標簽

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

keywords標簽

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

相關的meta設置XHTML

<metacharset="UTF-8">

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

<linkrel="copyright"href="copyright.html"/>

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

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

<metaname="description"content="150words"/>

<metaname="keywords"content="yourtags"/>

<!--

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

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

index:文件將被檢索;

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

noindex:文件將不被檢索;

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

-->

<metaname="robots"content="index,follow"/>

<metaname="author"content="authorname"/>

<metaname="google"content="index,follow"/>

<metaname="googlebot"content="index,follow"/>

<metaname="verify"content="index,follow"/>

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

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

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

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

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

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

<!--忽略數字自動識別為電話號碼-->
<metacontent="telephone=no"name="format-detection"/>

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

<metacontent="email=no"name="format-detection"/>

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

<!--添加智能App廣告條SmartAppBanner:

告訴瀏覽器這個網站對應的app,并在頁面上顯示下載banner:

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html-->

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

<metaname="HandheldFriendly"content="true">

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

<metaname="MobileOptimized"content="320">

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

<metaname="screen-orientation"content="portrait">

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

<metaname="x5-orientation"content="portrait">

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

<metaname="full-screen"content="yes">

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

<metaname="x5-fullscreen"content="true">

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

<metaname="browsermode"content="application">

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

<metaname="x5-page-mode"content="app">

<!--windowsphone點擊無高光-->

<metaname="msapplication-tap-highlight"content="no">

注:相關網站建設技巧閱讀請移步到建站教程頻道。

weinxin
虎糾自媒體官方微信
這是我的微信掃一掃
f9seo

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: