SEO 實戰

來了老弟發表於2022-11-24
在網際網路發達的今天，每當我們遇到不懂的問題，首先問的就是百度，但是有時候度娘給出的並不是我們想要的答案或者根本搜不到答案，怎麼辦呢？如果你英語不錯，用英文搜尋可能會有意想不到的收穫哦。

搜尋引擎(全球Top5)

Google 月獨立訪問者：18億

全球第一搜尋引擎，不解釋！不過國內可能用不了，你懂得。解決方法

Bing（必應）月獨立訪問者：5億

Bing是微軟旗下的搜尋引擎，感覺它的搜尋介面背景圖超美，是谷歌最好的替代品，備胎中的戰鬥機。

Baidu（百度）月獨立訪問者：4.8億

全球最大的中文搜尋引擎，不解釋！

Yahoo!（雅虎）月獨立訪問者：4.9億

https://www.yahoo.com/
在搜尋方面，雅虎表現中規中矩，網頁搜尋表現不錯，但死鏈率較高而且缺少一些應有的高階搜尋功能。

Yandex月獨立訪問者：0.3億

Yandex搜尋引擎是俄羅斯第一大搜尋引擎，建立於1997年，目前已經發展成為一個提供搜尋、圖片共享、社交網路、網路支付、免費網站託管、以及其它服務的入口網站。

儘管越來越多的百度自家產品出現在了搜尋結果的頁面中，加上百度競價，留給自然排名的位置越來越少，但是透過SEO最佳化提高百度關鍵詞排名獲得流量依舊是最穩定廉價的營銷方法。一個好的網站，一份好的SEO方案依舊可以為企業帶來非常可觀訂單。

SEO具體方法

HTML <meta> 標籤

<meta> 元素可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。

<meta> 標籤位於文件的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文件相關聯的名稱/值對。

類似這樣的 meta 標籤可能對於進入搜尋引擎的索引有幫助：
<meta name="keywords" content="HTML,ASP,PHP,SQL">

下面介紹常用的meta標籤：

一個高質量的網頁一般都具備完善的TDK，包括title、description、keywords，在HTML <head> 中新增如下標籤（content替換成自己的內容）：

<title>IICOOM-個人部落格 | 技術部落格</title>
<meta name="keywords" content="個人部落格,技術分享,IICOOM-技術部落格，IICOOM">
<meta name="description" content="IICOOM的技術部落格，記錄工作學習過程中遇到問題和解決問題的經驗方法。這是IICOOM技術部落格的原創博文，或者是不錯的譯文。涉及技術包括前端技術(Vue.js，React.js)，服務端(Node.js，Golang，Java)，資料庫(MySQL，MongoDB)。">
<!-- 新增禁止轉碼標記： -->
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 新增引導抓取標記： -->
<meta name="Robots" Content="index,follow">
<!-- 新增頁面屬性標記： -->
<meta name="applicable-device" content="pc,mobile">

新增權重標記canonical

什麼是 canonical URL 標籤？canonical URL 標籤也叫規範網址，出現在你網頁程式碼的<head>裡。

假如你的域名如下：
https://www.iicoom.top

一旦你的文章多了有了分頁就會自動生成一個新的URL https://www.iicoom.top/posts/11

如果不做canonical URL標籤最佳化，就搜尋引擎機器人來看，上面兩個URL的頁面內容是一樣的，所以機器人不知道到底要把哪個URL編入搜尋結果裡，也不知道哪個頁面才是重要的。無形間的重複內容，大大降低了頁面在搜尋引擎的重要性，頁面權重也全都分散了。

而canonical URL標籤的目的就是告訴谷歌把你重要的頁面和其它頁面區別對待，在搜尋結果中只顯示唯一的URL，規範URL的結構，讓其它重複內容的URL指向最主要的那個URL。將連結權重傳遞到主頁面。

比如我可以在 https://www.iicoom.shop/posts/11 這個頁面配置 canonical

<link rel="canonical" href="https://www.iicoom.shop">

百度站長工具

在百度站長工具網站驗證後，在自己的頁面中新增如下標籤，具體方法檢視 這裡。

<meta name="baidu-site-verification" content="TI4ZF9Ar4h" />

sitemap生成

生成sitemap（Sitemap 可方便網站管理員通知搜尋引擎他們網站上有哪些可供抓取的網頁）生成的連結頁面裡，內容是網站的靜態路徑，用於每天百度收錄。

網站地圖爬蟲線上工具 v5.1.9 https://help.bj.cn/

Google：建議使用xml格式的網站地圖

地圖提交地址：https://www.google.com/webmas...

Baidu:建議使用robots.txt提交html格式的網站地圖

http://www.baidu.com/search/u...

manifest.json

manifest.json 是一個簡單的JSON檔案，告訴瀏覽器你的網站是在移動裝置或是臺式裝置使用。當使用者將你的網站收藏為標籤時，manifest.json 就會很有用，它可以指示你的網站名稱、icon、頁面展示方向（橫向或縱向）等等。

下面的方法也利於SEO

  • 欄目頁旁邊要加推薦文章，10條左右
  • 每個頁面都要加h1 h2內容
  • 首頁的圖片上，加title，把想加的關鍵詞均勻分佈在圖片的title上
上面的配置完成，專案上線後我們可能需要一些工具來統計頁面的流量，下面介紹常用的工具。

統計工具

如果需要具體操作方式，評論留言，我具體介紹一下配置方式。

SPA為什麼不利於SEO？

隨著前端技術的發展，一些單頁面應用SPA(Single-Page App)的前端框架被廣泛使用，如vue、react，這種應用有一個缺點就是不利於SEO，原因如下：

  • 搜尋引擎爬蟲 如 Googlebot、Bingbot 它們的工作原理是下載網站的index.html，然後分析裡面的連結或內容，它們喜歡靜態檔案
  • SPA應用是基於JavaScript的，當爬蟲解析這種檔案時，情況就變得複雜起來，它只能獲取到頁面部分連結，要想更深層的解析就需要執行JavaScript，這樣就大大加劇了搜尋爬蟲的工作負擔

解決方案(SSR)

SSR 就是服務端渲染的意思。相較於SPA (單頁面應用)，SSR 主要的好處是：

  • 更好的搜尋引擎最佳化 (SEO)。因為搜尋引擎爬蟲會直接讀取完整的渲染出來的頁面
  • 更快的內容呈現，尤其是網路連線緩慢或裝置執行速度緩慢的時候

從頭搭建一個服務端渲染的應用是相當複雜的。幸運的是社群已經有了優秀的SSR框架，vue 的可以使用 Nuxt.js，React 可以使用 Next.js 。

文章首發於 IICOOM-個人部落格|技術部落格 SEO實戰

相關文章