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