前言
什么是SEO：SEO 是 Search Engine Optimization 的縮寫，即搜索引擎優(yōu)化。它是一種通過調(diào)整網(wǎng)站的內(nèi)容、結(jié)構(gòu)、外部鏈接等方面的優(yōu)化手段，來提高網(wǎng)站在搜索引擎自然/免費搜索結(jié)果中的排名和可見度的過程
例如在站長工具：seo.chinaz.com/，中查看掘金的收錄情況
從圖中可以看到掘金的收錄數(shù)還是非常不錯的 統(tǒng)計公報 或者在各搜索框內(nèi)使用“site: 域名”的方式，例如：site:juejin.cn獲取收錄數(shù)
一、TDK
TDK是Title(標題)、Description（描述）和 Keywords（關鍵詞）的縮寫，是網(wǎng)站SEO的關鍵
1. title
Title：頁面標題，是搜索引擎最重視的元素之一，它直接決定了頁面在搜索結(jié)果中的標題顯示
<title>標題</title>
注意點：
避免過于冗長，大多數(shù)搜索引擎和瀏覽器中能完全顯示的長度為 60-70 個字符，超出則會被截斷
冗長的標題可能導致關鍵詞密度降低，從而影響搜索引擎對網(wǎng)頁內(nèi)容的判斷
2. description
description：頁面描述，內(nèi)容通常會被用作頁面的摘要信息展示
<metaname="description"content="網(wǎng)站的描述">
注意點：
內(nèi)容不宜過短，作為摘要信息展示的時候如果一行都顯示不全，不利于吸引用戶點擊
內(nèi)容最好控制在160 個字符以內(nèi)
3. keywords
keywords ：頁面關鍵詞
因為濫用等原因，大多數(shù)主流搜索引擎已經(jīng)大幅降低了 keywords 元標簽對網(wǎng)頁排名的影響
<metaname="Keywords"content="網(wǎng)站的關鍵詞">
注意點：
不同頁面的關鍵詞應該盡量不重復，避免關鍵詞相互競爭
關鍵詞的數(shù)量應控制在4-8 個，過多可能會被搜索引擎認為是關鍵詞堆砌，影響SEO效果
提示：對于不同頁面，可設置不同的TDK，來增加關鍵詞的收錄量
二、OG 協(xié)議
Open Graph 協(xié)議是由 Facebook 提出的一種元數(shù)據(jù)標準，它允許頁面成為豐富的社交對象。通過在網(wǎng)頁中添加特定的 Open Graph 協(xié)議，可以幫助提供更豐富的預覽信息。
常見的 Open Graph 標簽包括：
<metaproperty="og:title"content="頁面標題"><metaproperty="og:description"content="頁面描述"><metaproperty="og:image"content="圖片URL"><metaproperty="og:url"content="頁面URL"><metaproperty="og:type"content="網(wǎng)頁類型，如website，article"><metaproperty="og:release_date"content="定義網(wǎng)頁內(nèi)容的發(fā)布時間">
例如在bing搜索掘金，看到掘金的最新相關信息
點開第一條搜狐的，看title頭部，發(fā)現(xiàn)使用的og協(xié)議如下
<metaproperty="og:type"content="news"><metaproperty="og:image"content="https://q3.itc.cn/q_70/images03/20240322/1d853e1d019a4739b5f882e5e44699f3.png"><metaproperty="og:url"content="www.sohu.com/a/766002411_343291"><metaproperty="og:release_date"content="2024-03-2211:32"><metaproperty="og:description"content="這場比賽尼古拉-約基奇再度展現(xiàn)何謂全面，巔峰連莊MVP是真的厲害，錫伯杜已經(jīng)制訂了三人輪番消耗約基奇的策略依舊沒用，約老師還是能帶動隊友。波特開場是3中3拿8分，半場是6中6+三分1中1拿15分4籃板；賈馬…"><metaproperty="og:title"content="狂轟84+28+23：掘金三巨合力取連勝約基奇127次三雙沖西部第一_籃板_助攻_波特">
其中og:image的圖片鏈接，就是截圖中右側(cè)的圖片
三、HTML 語義化
HTML語義化主要作用有以下幾點：
方便其他設備進行解析，例如盲人閱讀器
有利于SEO，搜索引擎更容易理解語義化頁面的內(nèi)容結(jié)構(gòu)和主題
便于團隊開發(fā)和維護，語義化更具有可讀性
1. 標題標簽
HTML 中共有 6 種 h 標簽，分別是h1、h2、h3、h4、h5 和 h6。這些標簽表示文字的大小和重要性，h1 最大最重要，h6 最小最次要。
相比其他標簽，h 標簽在頁面中的權(quán)重非常高，所以使用時要注意不要濫用。
例如，h1 通常用來寫網(wǎng)頁的主標題，應該與網(wǎng)頁 title 標簽的內(nèi)容保持一致，并在頁面中展示。每個頁面最好只有一個 h1 標簽。h2 可用來寫次級標題，h3-h6 依次用于更細分的標題
2. 強調(diào)標簽
strong：標簽一方面是強調(diào)，增加了權(quán)重；另一方面也能字體加粗，增強視覺效果
em：標簽一方面是強調(diào)，增加了權(quán)重；另一方面也能字體變?yōu)樾斌w，增強視覺效果
強調(diào)標簽權(quán)重雖比h標簽低，但也比其他標簽權(quán)重高
3. 超鏈接標簽
1. a 標簽分為“內(nèi)鏈”和“外鏈”
內(nèi)鏈：從自己網(wǎng)站的一個頁面指向另外一個頁面。通過內(nèi)鏈讓網(wǎng)站內(nèi)部形成網(wǎng)狀結(jié)構(gòu)，讓蜘蛛的廣度和深度達到最大化
外鏈：在別的網(wǎng)站導入自己網(wǎng)站的鏈接。通過外鏈提升網(wǎng)站權(quán)重，提高網(wǎng)站流量。
2. a 標簽的兩個屬性
帶有rel=nofollow 屬性的鏈接會告訴搜索引擎忽略這個鏈接。阻止搜索引擎對該頁面進行追蹤。從而避免權(quán)重分散
js復制代碼<arel="nofollow"href="http://www.baidu.com/">百度</a>
external字面意思是“外部的”，a 標簽加上這個屬性代表這個鏈接是外部鏈接，非本站鏈接，點擊時會在新窗口中打開，它和target="_blank"效果一樣。external 可以告訴搜索引擎這是一個外部鏈接，非本站的鏈接
js復制代碼<arel="external"href="http://www.baidu.com/">百度</a>
4. 圖片標簽
: 圖像標簽的 alt 屬性有助于圖像 SEO，并在網(wǎng)絡故障時，代替圖片顯示
5. 段落標簽
p 標簽雖然權(quán)重較低，但作為頁面基礎內(nèi)容結(jié)構(gòu)很重要。頁面中用長文字描述的內(nèi)容，都可以使用p標簽代替原先的div標簽
6. 列表標簽
ul：標簽表示無序列表
ol：標簽表示有序列表
li：標簽表示列表的一項
搜索引擎能夠通過這些標簽更好地理解信息的層次結(jié)構(gòu)和關聯(lián)性，從而更準確地評估網(wǎng)頁的內(nèi)容和價值
7. 布局標簽
header：定義頁眉，通常包含網(wǎng)站標志、主導航、搜索框等
nav：定義導航
article：定義獨立的、完整的內(nèi)容塊，如博客文章、新聞報道等
section：定義頁面上的獨立的、有語義的內(nèi)容塊，如章節(jié)
aside：定義側(cè)邊欄
footer：定義頁腳，通常包含版權(quán)信息、聯(lián)系方式、備案信息等
四、sitemap 站點地圖
sitemap 站點地圖一般是xml格式的文件，用于幫助搜索引擎更好地發(fā)現(xiàn)和抓取網(wǎng)站上的所有頁面，并提供頁面優(yōu)先級和更新頻率的信息，幫助搜索引擎更好地分配抓取資源
sitemap.xml 內(nèi)容格式如下：
js復制代碼<urlsetxmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://acme.com</loc><lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>yearly</changefreq>
<priority>1</priority>
</url>
<url>
<loc>https://acme.com/about</loc><lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
loc：頁面地址
lastmod：內(nèi)容最后修改時間
changefreq：預計更新頻率
priority：頁面相對于其他頁面優(yōu)先級，它的值范圍是0.0到1.0，其中1.0表示最高優(yōu)先級
sitemap.xml 一般放在網(wǎng)站的根目錄下，可以通過“域名+/sitemap.xml”的形式直接訪問到。但每個 sitemap文件最多包含 50,000 個 URL 標簽，如果網(wǎng)站頁面超過 50,000 個，則應該將 Sitemap 文件拆分成多個。
例如在根目錄下新建sitemap.xml，并新建sitemap文件夾用于統(tǒng)一管理頁面的站點地圖信息
js復制代碼//sitemap.xml<sitemapindexxmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://example.com/sitemap/sitemap1.xml</loc><lastmod>2023-04-01</lastmod>
</sitemap>
<sitemap>
<loc>https://example.com/sitemap/sitemap2.xml</loc><lastmod>2023-04-15</lastmod>
</sitemap></sitemapindex>
<sitemapindex>: 用于包含多個 sitemap文件的索引。
如果sitemap.xml沒有放在根目錄，即不能通過“域名+/sitemap.xml”的形式直接訪問到，需在 robots.txt 中指明Sitemap位置，否則搜索引擎可能無法找到
五、 robots 文件
robots.txt 文件是一個網(wǎng)站用來告訴搜索引擎機器人(又稱爬蟲或蜘蛛)應該如何抓取和索引該網(wǎng)站的一種標準
robots.txt 文件需放置在網(wǎng)站的根目錄下，以“域名+/robots.txt”的形式直接訪問到
js復制代碼User-Agent:*Disallow:/private/Sitemap:https://acme.com/sitemap.xml
User-agent: 該項的值用于描述搜索引擎蜘蛛的名字。如果該項的值設為*，則該協(xié)議對任何機器人均有效
Disallow：這條指令明確地告訴爬蟲不要訪問 /private/ 路徑及其下的所有內(nèi)容。這是 robots.txt 文件的核心功能之一，用于保護網(wǎng)站中不希望被搜索引擎索引的頁面或內(nèi)容。
Sitemap：提供網(wǎng)站 sitemap 的 URL 地址，幫助搜索引擎爬蟲更有效地發(fā)現(xiàn)和索引這些頁面
六、各搜索引擎提交站點收錄
除了robots.txt + sitemap.xml 方式增加網(wǎng)址被收錄的可能性外，還可以在各搜索引擎站長平臺手動提交網(wǎng)址，以縮短爬蟲發(fā)現(xiàn)網(wǎng)站鏈接時間，加快爬蟲抓取速度
百度：ziyuan.baidu.com/
谷歌：developers.google.com/search?hl=z…
搜狗：zhanzhang.sogou.com/
360：zhanzhang.so.com/
必應：www.bing.com/webmasters/…
七、服務端渲染
爬蟲只能抓取到網(wǎng)頁的靜態(tài)源代碼，而無法執(zhí)行其中的JavaScript腳本。當網(wǎng)站采用Vue或React構(gòu)建SPA項目時，頁面上的大部分DOM元素實際上是在客戶端通過JavaScript動態(tài)生成的。這意味著爬蟲能夠直接抓取和分析的內(nèi)容會大幅減少
熟悉vue的，可使用Nuxt
熟悉React的，可使用Next。對Next感興趣的，可參考我的另一篇文章給上市公司從0到1搭建Next.js14項目
爬蟲除了不會抓取JavaScript腳本的內(nèi)容，也不會抓取iframe中的內(nèi)容，因此項目中少用iframe
八、網(wǎng)址規(guī)范化
例如，一個頁面可能有多個 URL 地址，比如：
https://example.com/article.htmlhttps://example.com/articlehttps://www.example.com/article
這些 URL 指向同一個頁面內(nèi)容。但是，我們應該指定其中一個作為該頁面的規(guī)范化 URL
在每個非規(guī)范版本的 HTML 網(wǎng)頁的<head>部分中，添加一個 rel="canonical" 鏈接來進行指定規(guī)范網(wǎng)址
<linkrel="canonical"href="https://www.example.com/article"/>
九、網(wǎng)站性能
網(wǎng)站打開速度越快，識別效果越好，否則爬蟲會認為該網(wǎng)站對用戶不友好，降低爬取效率
來源：極客前端探索者