一個前端知道的 SEO

時間  2019-12-28
標籤 一個 前端 知道 seo 欄目 網站開發 简体版
原文   原文鏈接

眼見着移動互聯網的時代已從浪潮之巔漸漸歸於平淡，5G 技術即將帶來的變革乃至顛覆還沒有可知；眼見着微信、頭條、阿里等越見豐盈的生態閉環不斷蠶食某度的搜索市場。但仍有大把各色業務的 2C 網站們，依然不得不面對 SEO 的問題，不得不面對國內的 SEO 問題。爲何要強調國內，由於橫亙於我等「生前」的有世界上最大的「中文搜索引擎」啊（手動滑稽）。這讓我一度覺得 SEO 是個玄學，你不得不忍受它可能對你忽冷忽熱的奇妙態度，卻又不忍心就此揮手說再見，大步向前不回頭。javascript

SEO(Search Engine Optimization)：搜索引擎優化。網站維護者依循搜索引擎規則對自身網站進行優化，以期站內內容能在用戶的搜索結果中佔據儘可能靠前的排名。時至今日，它依然是將產品推向用戶、獲取流量的最經濟實惠又行之有效的方法之一。php

先來一句「振聾發聵」之言：優質的內容永遠都是最好的 SEO。 但若是你就一搞技術的，這就由不得你了。因此，我一搞技術的還能作點啥？html

寫到這裏突然就想起前兩年面試的時候。問：html5標籤帶來了哪些優點？答：有利於 SEO，balabala……前端

HTML 標籤

最新的 html 標準帶來的新的語義化標籤確實使得不管是人仍是機器都更容易閱讀業務代碼。像經常使用的<header> <footer> <main> <section> <aside> <nav> 等標籤，咱們看一眼就能大致知道，這塊內容是要幹嗎的。新加入的標籤甚至對時間、日期等小語義都有照顧：<time> <data>等。html5

試想，若能合理使用各類語義化標籤，整個 html 業務代碼部分看上去該是多麼清爽溫馨啊。再試想，假如搜索引擎的 spider 們果然如我見到這些標籤通常，也清楚地曉得是什麼意思，那又該是多麼「心有靈犀」的場面。java

前一點是能夠確定的，若是可以準確使用各類標籤，自當義不容辭用起來。但後一點倒是不太確定的，畢竟現代瀏覽器對 html5 的支持程度還沒有徹底，各家搜索引擎對所謂語義化的支持到了何種程度更是不得而知。而與 web 開發者一路相伴從不缺席的一直都是 <div> <h> <p> <a> 等等這些「其貌不揚」的老兄弟們，因此不管是否可以用好新語義化標籤，都不能失去原本的「陣地」。在此基礎上，「勇猛精進」。node

首先對於 h 標籤，從 1 到 6 分別表明了從高到低的權重，因此一個頁面僅持有一個 <h1> 標籤，表明該頁面的主標題，其餘的 headline 標籤則根據實際的內容層級合理安排。ios

而後對於 <a> 標籤，搜索引擎爬蟲將根據其 href 屬性提供的路徑深刻到站內的各個角落。<a> 標籤構成了一張四通八達的大網，你要儘可能保證 Spider 能在「網」上愉快地玩耍，可是也不免有的地方你並不想讓它一探究竟，好比去「我的中心」的連接、出站連接等。這時，能夠考慮不使用 <a> 標籤，經過給元素綁定 click 等事件達到實際的跳頁目的；或者也能夠考慮給標籤加上一個特殊的屬性<a href="/" rel="nofollow">首頁</a>，來告訴 Spider 「內部道路，遊客止步」。git

一樣別忘了 <img> 標籤，依圖片內容及頁面內容，給 img 一個 alt 屬性，描述這張圖片表達的含義並適當植入關鍵詞。一來能夠在圖片加載失敗的時候給用戶必定的提示，二來能夠告訴搜索引擎這張圖片啥意思，方便其索引。github

最後，頁面中出現關鍵詞的地方，不妨使用 <strong> & <em> 標籤包裹一下，以期向搜索引擎表達關鍵詞強調的意味。

總之，讓搜索引擎「一眼就看到」頁面的關鍵詞所在。

以上這些基本都是在 <body> 標籤內出現的語義化標籤，也即頁面的主體，機器能看，人也能看。而在 <head> 標籤內還存在許多給機器看的標籤，作 SEO 優化的同窗們最熟悉的莫過於其中的 「SEO 三劍客」 TDK 了。

SEO 三劍客：TDK

何謂 TDK？作前端的同窗也都應該對它們熟稔於心： <title> 標籤、<meta name="description"> 標籤和 <meta name="keywords"> 標籤。顧名思義，它們分別表明當前頁面的標題、內容摘要和關鍵詞，對於 SEO 來講，title 是其中最重要的一員。

首先來看 <title> 標籤

從用戶的角度來看，它的值即用戶在搜索引擎搜索結果中以及瀏覽器標籤頁中看到的標題，以下圖：

seo-title-inpage

seo-title-inenginee

title 一般由當前頁面的標題加幾個關鍵詞組成，同時力求簡潔明瞭。總之，用最少的字讓別人知道你接下來要說啥，控制在 40 字之內。一般，對於首頁，通常會用連字符 - 鏈接站名和幾個關鍵詞做爲 title，好比：<title>w3cschool - 編程獅，隨時隨地學編程</title>;而對於其餘頁面，則是短下劃線 _ 鏈接頁面標題、關鍵詞和站名的形式，好比：<title>Web入門微課_編程實戰微課_w3cschool</title>。

好的 title 不只讓用戶知道該頁面要講什麼東西，提早判斷有沒有我須要的內容，對於搜索引擎也一樣如此。因此，設置 title 時不但要注意以上幾點，更重要的是，不要重複！不要重複！不要重複！

而後來看 description

它一般不參與搜索引擎的收錄及排名，但它會成爲搜索引擎在搜索結果頁中展現網頁摘要的備選目標之一，固然也可能選取其餘內容，好比網頁正文開頭部分的內容。以 title 部分的示例圖對應的頁面爲例，它的 description 對應的內容是這樣的： <meta name="description" content="Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/Flash等各類Web技術進行客戶端產品的開發。完成客戶端程序(也就是瀏覽器端)的開發，開發JavaScript以及Flash模塊，同時結合後臺開發技術模擬總體效果，進行豐富互聯網的Web開發，致力於經過技術改善用戶體驗。">。能夠看到，正是搜索結果摘要顯示的內容。

有鑑於此，description 的值要儘量表述清楚頁面的內容，從而讓用戶更清楚的認識到即將前往的頁面是否對他有價值。同時字數最好控制在 80 - 100 字之內，各頁面間不要重複！不要重複！不要重複！

最後是 keywords

<meta name="keywords" content="w3cschool,編程獅,web前端開發,菜鳥教程,編程入門教程,w3school,W3C,HTML,HTML5,CSS,Javascript,jQuery,Bootstrap,PHP,Java,Sql">。它主要爲搜索引擎提供當前頁面的關鍵詞信息，關鍵詞之間用英文逗號間隔，一般建議三五個詞就足夠了，表達清楚該頁面的關鍵信息，建議控制在 50 字之內。切忌大量堆砌關鍵詞，畢竟在技術突飛猛進的今天，搜索引擎若是發現你的 title 信息文不對題都有可能主動幫你修改了，更沒必要說發現你想在愈加無足輕重的關鍵詞身上花的當心思了（彷佛沒有什麼因果關係，手動狗頭～）。

以上介紹了 SEO 中最重要的三個標籤，它們都存在於 head 標籤中。接下來再來看看其餘存在於 <head> 標籤中，並與 SEO 相關的標籤們吧。

元信息標籤及其餘的標籤們

SEO 三劍客 「TDK」 都屬於元信息標籤。元信息標籤即用來描述當前頁面 HTML 文檔信息的標籤們，與語義化標籤相對，它們一般不出如今用戶的視野中，因此，只是給機器看的信息，好比瀏覽器、搜索引擎等（固然也是給我等碼農看的～）。

1. meta:robots 標籤

撇開 TDK，其中與 SEO 相關的有一個 <meta name="robots"> 標籤（一般含有 name 屬性的 meta 標籤都會有一個 content 屬性相伴，這咱們已經在 D 和 K 「劍客」身上領略過了）。默認的，有這樣的標籤屬性設置：<meta name="robots" content="index,follow,archive">。它跟上文中提到的帶有 rel 屬性的 a 標籤略有類似。

這時，假如頁面是個妹子，將告訴前來搭訕的搜索引擎：你能夠留我聯繫方式（抓取頁面），而且我還給你介紹個人親戚朋友叔伯阿姨兄弟姐妹們（繼續爬站內其餘頁面），最後還容許你爲我拍照留念（生成當前頁面快照）。

CONTENT 含義
INDEX 容許抓取當前頁面
NOINDEX 不準抓取當前頁面
FOLLOW 容許從當前頁面的連接向下爬行
NOFOLLOW 不準從當前頁面的連接向下爬行
ARCHIVE 容許生成快照
NOARCHIVE 不準生成快照

經過以上三組值的相互組合，能夠向搜索引擎表達不少有用的信息。好比，對於一個博客站來講，其文章列表頁其實對於搜索引擎收錄來講沒什麼意義，但又不得不經過列表頁去爬取收錄具體的文章頁面，因而能夠做以下嘗試：<meta name="robots" content="index,follow,noarchive">。

2. canoncial 和 alternate 標籤

還有一組標籤是含有 rel 屬性的 <link rel="" href=""> 標籤，它們分別是：

  • <link rel="canoncial" href="https://www.xxx.com" />
  • <link rel="alternate" href="https://m.xxx.com" />

先來看 canoncial 標籤。當站內存在多個內容相同或類似的頁面時，可使用該標籤來指向其中一個做爲規範頁面。要知道，不僅是主路由不一樣，即使是 http 協議不一樣（http/https）、查詢字符串的微小差別，搜索引擎都會視爲徹底不一樣的頁面/連接。（莫名想起了瀏覽器同源策略～）

假若有不少這種雷同頁面，其權重便被無情稀釋了。好比文章列表頁有不少個，好比同一個商品頁面的連接含有不一樣的業務參數等。之後者爲例，假設有以下連接：

此時咱們能夠爲後二者在 head 中添加 link 標籤：<link rel="canoncial" href="www.shop.com/goods/xxxx" />，以此彰顯第一個連接的正統地位，告訴搜索引擎，其餘那倆都是「庶出」，沒必要在乎。假如搜索引擎遵照該標籤的約定，則會很大程度避免頁面權重的分散，不至影響搜索引擎的收錄及排名狀況。它的含義與 http 301 永久重定向類似，不一樣之處在於，用戶訪問標記了 canonical 標籤的頁面並不會真的重定向到其餘頁面。

canoncial 標籤最初由 Google 等國外公司提出並投入實踐，百度則在2013年官宣支持該標籤，詳情可見百度搜索資源平臺的文章：百度已支持 Canonical標籤。

再來看 alternate 標籤。文初也提到了立於浪潮之巔的移動互聯網時代已初顯落寞之態，但無論怎麼說，它依然在山巔上。因此，假如你爲移動端和 pc 端設備分別提供了單獨的站點，這個標籤或許能派上用場。來看這一小節開頭的示例，有兩個連接以下：

它們分別是某網站首頁的 pc 端和移動端，因而就能夠在它們的 head 標籤中提供以下標籤，標誌其互相對應的關係：

  • <link rel="canoncial" href="https://www.xxx.com" />
  • <link rel="alternate" href="https://m.xxx.com" media="only screen and (max-width: 750px)"/>

前者放在移動端的頁面中，表示惟我 pc 端頁面大哥馬首是瞻；後者則放在 pc 端對應的頁面中，表示當屏幕尺寸小於 750px 的時候，就應該我移動端頁面小弟上場服務了！

關於路由

假如你負責整站的路由設計工做，那麼這個重任就落在了你的肩膀上。一旦網站上線，而且體量愈來愈大，到時再想調整路由結構將困難重重。因此一開始的時候就應該考慮清楚，合理安排。

假設咱們如今要作一個果蔬類的網站，全部的下級頁面從首頁開始往下分發。因而首頁有了一個簡單的分類：水果 和 蔬菜。而後從水果出發又有更加細分的類別：熱帶水果、時令水果、反季水果等。在首頁的其餘板塊還可能有熱銷果蔬、猜你喜歡等等更加個性化的分類。分類之下則對應屬於這一類的列表結果，從列表結果又進入了某一個果蔬的詳情頁面。

|
|-- home
|    |-- classify|list
|    |     |-- list|detail 
|    |     |    |-- detail
|    |     |    |

複製代碼

以上，基本上至多通過四級頁面就能夠從首頁抵達產品詳情頁面。在路由設計的時候應保證用盡可能少的路由層級使用戶抵達最終的目標頁面，不該該無節制地深刻，使用戶迷失在深似海的站內連接之中；一樣的道理，搜索引擎分配在某個網站的資源是有限的，這也保障了搜索引擎能高效爬取到有用的頁面。

另外要注意的是，不要產出孤立的頁面。（這跟路由設計沒什麼太大關係）

依然是果蔬網站，假設咱們新加入了一個板塊，售賣果蔬的周邊產品，好比鍋碗瓢盆洗滌劑等等，然而不管是首頁仍是其餘任何頁面，都沒有指向這個板塊的入口。因而，這個板塊就變成了汪洋之中的「一座孤島」，誰也不知道抵達這裏的「航線」。搜索引擎天然也不知道。（除非有高質量外鏈～）

這時，既能夠在首頁加入一個新的板塊分類入口，也能夠在原有的果蔬詳情頁面加入跟這種果蔬相關的周邊產品入口，好比蘋果和削皮器。以及其餘合理的作法……

總之，囉嗦了這麼多廢話就是想表達，用盡量少的層級組織路由並表義清晰；構建合理的分類，使具備相同屬性的商品（或其餘的東西好比博文）歸屬於同一級路由之下；任何想要被搜索引擎發現的頁面都要加入抵達頁面的「航線」，避免「孤島」造成。

終於，內鏈安排穩當了，網站開發也差很少了，要準備正式上線了。此時就要面對兩個新的「朋友」：robots.txt 和 sitemap（網站地圖）。

robots.txt

robots.txt, Robots Exclusion Protocol(REP)，它與上篇中提到的元信息標籤 <meta name="robots"> 算是「本家」。元信息標籤存在於單個頁面之中，並做用於它存在的那個頁面；而 robots 協議則存在於網站根目錄（ www.xxx.com/robots.txt可… ），做用於整站。

這個協議並非一個正式的規範，僅僅是在互聯網長期發展過程當中約定俗成的，它被大多數的搜索引擎所遵照，也被無數的網站使用並依賴着。雖然如此，不遵照「潛規則」的「蟲子」依然讓人防不勝防，就算你的 robots.txt 編寫以下：

User-agent: *
Disallow: /

複製代碼

無視規則者依然會潛入你的網站橫行無忌，像前些年(可能如今依然是)臭名昭著的YisouSpider。因此 robots 協議僅能做爲指導 Spider 「良民」在站內活動的行爲準則，就像"請勿踐踏草坪"同樣，不要期望用它來保護站內隱私。想要拒絕流氓爬蟲的騷擾，仍是要在服務端依賴自身的技術手段。

好消息是，19年7月份，谷歌宣佈將推進 robots 協議成爲一項新的互聯網標準。但這讓我想起了 http 協議，協議很好，可是不遵照協議的開發者仍是大有人在，畢竟就算不徹底遵循協議，業務開發依然能夠順利進行。畢竟不遵照協議，才能順利拿到想要採集的數據hahah～

下面來看一下 robots 協議規範。

首先，文件要求爲 UTF-8 格式的純文本。而後，文中協議格式爲 <field>:<optional space><value><optionalspace><#optional-comment>，即字段、空格、值、空格、註釋。其中，空格和註釋是可選的，僅僅是爲了增長文本可讀性。

其中，字段值通常有 User-agent | Disallow | Allow 三個，還有一個額外的 Sitemap 項，用來指向該站的網站地圖所在的地方，是否支持視具體搜索引擎而定。咱們經過前三個字段組合來制定一組規則，規則能夠有多組。一組規則中，能夠由一到多個 User-agent 開頭，而後經過 Allow|Disallow 字段指定具體規則，至少有一條。組與組之間經過空行間隔，舉個栗子：

# first group
User-agent: Baiduspider
User-agent: Googlebot
Disallow: /article/

# second group
User-agent: *
Disallow: /

Sitemap: https://www.xxx.com/sitemap.xml

複製代碼

以上：

  • 容許百度和谷歌的搜索引擎訪問站內除 article 目錄下的全部文件/頁面（eg: article.html 能夠，article/index.html 不能夠）；
  • 不容許其餘搜索引擎訪問網站；
  • 指定網站地圖所在。

假如你容許整站均可以被訪問，則能夠不在根目錄添加 robots 文件。更詳細的使用規範能夠來看一下谷歌 robots 規範以及百度資源平臺的文章 什麼是 robots 文件。

sitemap

sitemap 文件是另外一個輔助搜索引擎訪問網站的工具（協議），有了它並不表明頁面必定被收錄，但它可讓搜索引擎更快的、更有目的的訪問你的網站，從而更有利於搜索引擎的收錄工做。

sitemap 文檔中羅列了你想讓搜索引擎訪問到的站內的全部頁面對應的連接，裏面會包含頁面連接(url)以及頁面的上次更新時間(lastmod)、更新頻率(changefreq)、權重(priority)等信息，其中 url 是必須的，後三者可選。文檔通常爲 xml 格式，固然也能夠是 txt 格式或 html 格式，這裏以 xml 格式爲例。

首先，sitemap 文檔和 robots 同樣，文件格式爲 UTF-8，而且全部在文件內的數據必須通過轉譯。看個栗子：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.xxx.com/</loc>
      <lastmod>2019-12-17</lastmod>
      <changefreq>weekly</changefreq>
      <priority>0.5</priority>
   </url>
   <url>
      <loc>http://www.xxx.com/detail/xxx</loc>
      <lastmod>2019-12-17</lastmod>
   </url>
</urlset>

複製代碼
  • 文檔開頭，聲明 xml 版本和字符編碼格式
  • 以 <urlset> 標籤做爲頂級標籤，並指定 xml 命名空間
  • 每個頁面的 url 用一個 <url> 父級標籤包裹
  • 包含一個必選的 <loc> 子標籤包裹頁面連接
  • 剩下的 <lastmod> | <changefreq> | <priority> 三個子標籤做爲可選項

而後，上文中提到了 url 必須通過 「轉譯」，它的意思是，假如 url 中含有下表中的字符，則必須替換爲對應的字符實體。

Character Escape Code
Ampersand - & &amp;
Single Quote - ' &apos;
Double Quote - " &quot;
Greater Than - > &gt;
Less Than - < &lt;

更多關於 sitemap 的知識點能夠來看一下 sitemap 協議。

基於以上，我結合 nodejs、axios 和 cheerio 以及 javascript 的模版字符串編寫了一個生成 sitemap 文件的「小玩具」，能夠設置過濾條件排除那些不想加入 sitemap 的頁面連接，但目前僅支持生成包含 loc 標籤的網站地圖文件。若是有幸被你見到，或許能夠把玩一二。

另外，有一個網上流傳甚廣的免費 sitemap 生成工具能夠一用，搜索 老虎 sitemap 應該就能夠找到資源，它是 伶俐虎 很早以前的一個免費版。若是你須要在某些條件下（好比文章更新）自動地生成並更新 sitemap 文件，就須要結合項目自己定製本身的 sitemap 生成程序了。

編寫好了文件，就能夠把它與 robots 文件一同放到網站的根目錄下等待搜索引擎前來「臨幸」了。固然也能夠主動一點，主流的搜索引擎都提供了 sitemap 文件提交通道，以便讓搜索引擎更快更有目的地前來網站。

有主動推送，天然也有被動的方式，好比衆多面向國內市場的網站們須要仰仗的百度搜索引擎，便提供了自動推進代碼。

百度自動推送代碼

只要將下面這段 js 腳本插入當前頁面，當用戶訪問時，就會把這個頁面的連接推送給搜索引擎。

(function() {
  let bp = document.createElement('script');
  const curProtocol = window.location.protocol.split(':')[0];
  if (curProtocol === 'https') {
    bp.src = `https://zz.bdstatic.com/linksubmit/push.js`;
  }else {
    bp.src = `http://push.zhanzhang.baidu.com/push.js`;
  }
  let s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(bp, s);
})();

複製代碼

一般爲了省事，會把它直接扔到公共代碼塊中全局加載，但這樣也帶來了一些問題：

  • 一些頁面並不想被推送，然而由於全局公用，仍是被推送了
  • 一些頁面可能早就被收錄了，可是一旦頁面被訪問，連接依然會一遍又一遍被推送

遺憾的是這麼些年過來了，也沒見百度對相關代碼有明面上的更新或者說明（謹防打臉，難道是我沒注意到？:)）。沒辦法，第二個問題實在不知道應該如何規避，但第一個問題仍是能夠作必定規避的，因而我寫了一個方法來判斷是否加載這段自動推送腳本，大體以下(Vue 下)：

function canSubmit(toObj) {
  const toPath = toObj.path;
  let canSubmit = false;
  let isInScope = false;

  if(
    toPath === '/' // 首頁
    || (/\/search/u.test(toPath) && Number(toObj.query.page) === 1) // 搜索第一頁
    || /\/detail\/(article|news)/u.test(toPath) // 詳情頁
    // ...
  ) {
    isInScope = true;
  }
  
  if(isInScope && process.env.TEST_ENV === 'prod') {
    canSubmit = true;
  }
  
  return canSubmit;
}

複製代碼

在幾年前，百度曾在 百度統計貼吧 發帖稱，百度統計代碼一樣帶有自動推送的功能。

貼吧聲明

因而，這就悲劇了。若果然如此，一旦使用了百度統計，對於上面兩個問題的任何規避將毫無卵用……

最後，

關於重定向的問題

在上一篇中提到了 canonical 標籤，它的做用便與重定向(301)相似，只是用戶依然能夠訪問頁面。而在實際場景中，也有不少確實須要真正進行重定向的場景，依然舉倆栗子：

  • 頁面改版了並啓用了新的連接，原先的頁面已經不存在（404）
  • 網站同時支持 http 和 https 訪問，須要將 http 重定向到 https

這時，都須要在服務器配置文件中作好處理，一般採用 301 永久重定向。雖然據說 302 、 307 等也被搜索引擎承認，可是，求穩……:(

以上。它們僅僅是我知道的一些，茫茫知識海洋，大概還有許多我不知道的細節等待着繼續探索～～～

原文連接舉起你的小手，點贊關注交流批評……啦～

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程