分享一篇關(guān)于SEO優(yōu)化的前端知識(shí)總結(jié)
共 8308字，需瀏覽 17分鐘
·
2024-04-16 18:03
來(lái)源 | https://juejin.cn/post/7300118821532778511
前言
以前開(kāi)發(fā)獨(dú)立站，涉及過(guò)一些seo的內(nèi)容，為了避免后面會(huì)遺忘，感覺(jué)有必要記錄下相關(guān)經(jīng)驗(yàn)，也算是一次總結(jié)吧！
SEO概念
SEO 是 Search Engine Optimizatio（搜索引擎優(yōu)化） 的首字母縮寫，利用搜索引擎的規(guī)則對(duì)網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，提高網(wǎng)頁(yè)或網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名, 以求得獲得更多的展現(xiàn)量和吸引免費(fèi)的點(diǎn)擊流量，從而達(dá)到互聯(lián)網(wǎng)營(yíng)銷及品牌建設(shè)的目標(biāo)。
SEO的方式
1. Title標(biāo)簽
對(duì)頁(yè)面點(diǎn)擊率有直接影響，因?yàn)檫@是用戶對(duì)網(wǎng)站頁(yè)面的第一印象，而且也是爬蟲重點(diǎn)的爬取對(duì)象，填寫的文字要對(duì)網(wǎng)頁(yè)內(nèi)容有準(zhǔn)確而簡(jiǎn)潔的描述，能夠吸引用戶點(diǎn)擊，而且長(zhǎng)度要適中。
2. Meta標(biāo)簽
meta標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數(shù)值，另外還有主要作用于社交平臺(tái)的OG標(biāo)簽。
(1) name屬性
Meta Keywords： Meta Keywords是排名的重要組成部分，因?yàn)樵缙诘乃阉饕鏅C(jī)器人使用該值對(duì)網(wǎng)站進(jìn)行分類，但在后來(lái)逐漸被放棄了。
（1） Google 在2009年正式宣布，keyword標(biāo)簽不再是排名的一部分。
（2） 在百度站長(zhǎng)論壇上官方曾表示這個(gè)標(biāo)簽?zāi)壳皩?duì)SEO的影響可以忽略不計(jì)。
<meta name ="keywords" content="這是keywords的內(nèi)容">
description： 告訴搜索引擎你的網(wǎng)站主要內(nèi)容
<meta name ="description" content="這是description的內(nèi)容">
robots： 告訴搜索機(jī)器人哪些頁(yè)面需要索引，哪些頁(yè)面不需要索引
<meta name ="robots" content="none">
author： 標(biāo)注網(wǎng)頁(yè)的作者
<meta name="author" content="廣白,掘金">
(2)http-equiv屬性
Expires： 可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間，一旦網(wǎng)頁(yè)過(guò)期，必須到服務(wù)器上重新傳輸
<!-- 必須使用GMT的時(shí)間格式 --><meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
Pragma： 禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問(wèn)頁(yè)面內(nèi)容
<meta http-equiv="Pragma" content="no-cache">
Refresh： 自動(dòng)刷新并指向新頁(yè)面
<!-- 其中的2是指停留2秒鐘后自動(dòng)刷新到URL網(wǎng)址 --><meta http-equiv="Refresh" content="2；URL=http://www.juejin.com">
Set-Cookie： 如果網(wǎng)頁(yè)過(guò)期，那么存盤的cookie將被刪除
<!-- 必須使用GMT的時(shí)間格式 --><meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 10-Nov-2023 18:18:18 GMT；path=/">
Window-target： 強(qiáng)制頁(yè)面在當(dāng)前窗口以獨(dú)立頁(yè)面顯
<!-- 用來(lái)防止別人在框架里調(diào)用自己的頁(yè)面 --><meta http-equiv="Window-target" content="_top">
content-Type： 設(shè)定頁(yè)面使用的字符集
<!-- 設(shè)定頁(yè)面使用的字符集 --><meta http-equiv="content-Type" content="text/html; charset=gb2312">
(3) OG標(biāo)簽
它是 Facebook 在 2010 年 F8 開(kāi)發(fā)者大會(huì)公布的一種網(wǎng)頁(yè)元信息（Meta Information）標(biāo)記協(xié)議，屬于 Meta Tag （Meta 標(biāo)簽）的范疇，是一種為社交分享而生的 Meta 標(biāo)簽。
為了讓信息內(nèi)容加速流動(dòng)和準(zhǔn)確呈現(xiàn)，F(xiàn)acebook 早年極力推動(dòng)這個(gè)協(xié)議，到目前幾乎主流的社交媒體網(wǎng)站都支持 OG 協(xié)議。包括 Twitter、Pinterest、LinkedIn 和 Google+ 都可以識(shí)別 OG 協(xié)議。
雖然 Twitter 也有自家的 Twitter Cards 協(xié)議，但是 Twitter 只要發(fā)現(xiàn)網(wǎng)頁(yè)上沒(méi)有使用自家的協(xié)議，就會(huì)用 OG 協(xié)議代替。國(guó)內(nèi)的百度、360 搜索、微博、微信、人人網(wǎng)等也支持該協(xié)議。
使用方法：
<html prefix="og: https://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="" />...</head>...</html>
作用：
OG在社交媒體上具有豐富的內(nèi)容展示，比如分享一個(gè)網(wǎng)址鏈接在社交平臺(tái)后，這個(gè)鏈接會(huì)顯示縮略圖、標(biāo)題和描述等，增加訪客點(diǎn)進(jìn)來(lái)的概率。
標(biāo)簽詳細(xì)屬性可以看官網(wǎng)：ogp.me/
3. 語(yǔ)義化標(biāo)簽
H系列標(biāo)簽
從H1到H6（重要性從高到低）一共有6個(gè)，而且在頁(yè)面中的作用性極高，所以不能亂用，得根據(jù)內(nèi)容的重要性進(jìn)行排列，最后不要有斷層，比如從H1直接到H3，錯(cuò)過(guò)了H2；另外，H1標(biāo)簽最好只存在一個(gè)，更多細(xì)節(jié)可以網(wǎng)上搜下。
img標(biāo)簽
img的alt屬性，為搜索引擎提供替代文本，圖片使用alt標(biāo)簽優(yōu)化，對(duì)搜索引擎排名產(chǎn)生積極影響；另外，網(wǎng)速不佳等原因造成無(wú)法加載圖片文件時(shí)，將在圖片的位置顯示alt里的文字
其他
還有HTML5新出的 Header, Nav，Aside，Article，F(xiàn)ooter等語(yǔ)義化標(biāo)簽，這些都能幫助爬蟲更好的獲取頁(yè)面內(nèi)容
4. sitemap(站點(diǎn)地圖)
站點(diǎn)地圖一般是xml格式的文件，放在網(wǎng)站的根目錄下，有些網(wǎng)站甚至可以通過(guò) 網(wǎng)址/sitemap.xml 直接訪問(wèn)到（手動(dòng)狗頭），文件里包含了每個(gè)網(wǎng)頁(yè)的鏈接（loc），更新時(shí)間（lastmod），權(quán)重（priority）等信息，權(quán)重從0到1，依次遞增，一般主頁(yè)設(shè)為1，然后其他按重要性遞減。
搜索引擎可以通過(guò)查看站點(diǎn)地圖快速獲取網(wǎng)站的整體結(jié)構(gòu)，并將精力集中在重要頁(yè)面的索引上，這對(duì)于提高搜索引擎的爬行效率和索引速度非常有幫助。
5. robots文件
robots.txt，是一個(gè)給爬蟲下指令的文本文件，能讓其合理地抓取網(wǎng)站內(nèi)資源，而且可以將網(wǎng)站不重要的內(nèi)容、模塊等進(jìn)行屏蔽，從而抓取更多有價(jià)值高質(zhì)量的內(nèi)容和網(wǎng)頁(yè)，提高網(wǎng)站排名。大多數(shù)網(wǎng)站都可以通過(guò)網(wǎng)址/robots.txt進(jìn)行獲取。
User-agent: 后面填你要針對(duì)的搜索引擎，*代表全部搜索引擎
Disallow: 后面填你要禁止抓取的網(wǎng)站內(nèi)容和文件夾，/做前綴
Allow: 后面填你允許抓取的網(wǎng)站內(nèi)容，文件夾和鏈接，/做前綴
Crawl-delay: 后面填數(shù)字，意思是抓取延遲，小網(wǎng)站不建議使用
Sitemap: 站點(diǎn)地圖的存放位置
6. 內(nèi)鏈和外鏈
內(nèi)鏈
在自己的網(wǎng)站當(dāng)中通過(guò)鏈接的方式在各個(gè)內(nèi)容頁(yè)面之間相互鏈接，從而提高爬蟲以及一些搜索引擎對(duì)于網(wǎng)站的爬行索引效率；另外，為了避免內(nèi)鏈起到反作用，在進(jìn)行網(wǎng)站待更新的時(shí)候，一定要注意定期清理死鏈和斷鏈，方便爬蟲可以順著鏈接進(jìn)行收錄爬行，達(dá)到更好的收錄效果。
外鏈
通過(guò)在其他一些高流量的網(wǎng)站放置自己的鏈接，相較于內(nèi)鏈的內(nèi)部操作，外鏈可以達(dá)到網(wǎng)絡(luò)之間的信息分享，不再讓我們的網(wǎng)站內(nèi)容形成孤立，可以很快的增加網(wǎng)站的瀏覽數(shù)量，提升搜索排名，這對(duì)一個(gè)剛剛建立起來(lái)的新站來(lái)說(shuō)，外鏈的數(shù)量基本上可以成為這個(gè)網(wǎng)站快速提升流量的關(guān)鍵所在，不過(guò)對(duì)于后期優(yōu)化，外鏈的發(fā)布一定要以質(zhì)量為主，數(shù)量為輔。
nofollow
作用： 超鏈接a標(biāo)簽中的一個(gè)屬性（還有meta標(biāo)簽），意思是不向這個(gè)頁(yè)面導(dǎo)出權(quán)重，也就是說(shuō)，加上了nofollow標(biāo)簽的鏈接，目的是告訴搜索引擎不要跟蹤加這個(gè)鏈接，不要傳遞鏈接權(quán)重，不要在搜索算法中計(jì)算這個(gè)鏈接。
通過(guò)設(shè)置nofollow標(biāo)簽，我們可以控制網(wǎng)站權(quán)重的流動(dòng)（也就是說(shuō)常說(shuō)的“集中權(quán)重”），避免鏈接指向垃圾頁(yè)面，這樣就可以讓網(wǎng)站主要的頁(yè)面能夠更快的獲得關(guān)鍵詞排名了。
有的公司在導(dǎo)航上有在線留言，這個(gè)就可以加上，因?yàn)檫@個(gè)是沒(méi)有用的，屬于垃圾頁(yè)面，頁(yè)面會(huì)向這個(gè)頁(yè)面導(dǎo)出權(quán)重，權(quán)重就分散了，另外還有類似廣告鏈接等無(wú)意義的頁(yè)面
nofollow 和 external nofollow: 從字面上意思來(lái)看，external是“外部的”，nofollow是“不要追蹤”，綜合來(lái)看extenal nofollow 則表示“外部的不要追蹤”，這兩根本就是同一個(gè)意思，external nofollow 只是nofollow比較規(guī)范的書寫而已。
<a href="login.html" rel="nofollow">登錄</a><a href="login.html" rel="external nofollow">登錄</a>
7.數(shù)據(jù)結(jié)構(gòu)化標(biāo)記
結(jié)構(gòu)化數(shù)據(jù)標(biāo)記并不能直接幫助提高搜索排名，但它能帶來(lái)很多好處：
（1）豐富搜索結(jié)果
比如搜索 掘金 出現(xiàn)的頁(yè)面，紅色框部分就是結(jié)構(gòu)化標(biāo)記的成果，從框內(nèi)可以更好的了解該網(wǎng)站的內(nèi)容，而且占據(jù)了大版面也有利于吸引用戶注意。
（2）擁有知識(shí)面板
在右側(cè)會(huì)有個(gè)知識(shí)面板，該面版可提供更高的品牌知名度和權(quán)威性，如下圖的右側(cè)紅框：
（3）支持語(yǔ)義搜索
不再是關(guān)鍵詞的匹配搜索，而是通過(guò)關(guān)鍵詞去尋找問(wèn)題的答案。當(dāng)你搜索如下模糊內(nèi)容時(shí)，Google 會(huì)通過(guò)這種方式設(shè)法返回合適的結(jié)果：
（4）體現(xiàn) E-A?T
E?A-T 意思 是專業(yè)（Expertise）, 權(quán)威（Authoritativeness）和可信（Trustworthiness）的縮寫， E-A-T是谷歌算法的一部分，并被寫入谷歌搜索質(zhì)量評(píng)估指南中。
結(jié)構(gòu)化數(shù)據(jù)形式
結(jié)構(gòu)化數(shù)據(jù)有三種形式：JSON-LD，Microdata和RDFa。個(gè)人之前一直用的JSON-LD，如下：
<script type="application/ld+json">{"@context": "https://schema.org","@type": "NewsArticle","headline": "Title of a News Article","image": ["","",""],"datePublished": "2015-02-05T08:00:00+08:00","dateModified": "2015-02-05T09:20:00+08:00","author": [{"@type": "Person","name": "Jane Doe","url": "https://example.com/profile/janedoe123"},{"@type": "Person","name": "John Doe","url": "https://example.com/profile/johndoe123"}]}</script>
Tips
這段代碼可以放在<head> 或 <body> HTML 部分的任意位置，更多的JSON-LD款式可以參考 Google官方。
8.面包屑導(dǎo)航
告訴爬蟲當(dāng)前所處的位置，提供抓取路徑的引導(dǎo)，讓其更快速的了解網(wǎng)站的整體架構(gòu)，在抓取網(wǎng)頁(yè)時(shí)也能清楚知道網(wǎng)頁(yè)的層級(jí)及分類索引，有助于提升搜索結(jié)果的排名。
此外，設(shè)定面包屑之后，網(wǎng)站在搜索結(jié)果頁(yè)上也會(huì)呈現(xiàn)網(wǎng)址路徑，因此可以適時(shí)在面包屑的名稱中加入關(guān)鍵詞，增加用戶點(diǎn)擊率
優(yōu)化用戶體驗(yàn)，讓用戶清楚的知道自己所在的位置，更容易篩選自己需要的信息
9.服務(wù)端渲染（SSR）
爬蟲只會(huì)爬取源碼，不會(huì)執(zhí)行網(wǎng)站的Js腳本,使用了vue或者react之類的框架后，頁(yè)面大多數(shù)dom元素都是在客戶端根據(jù)js動(dòng)態(tài)生成，可供爬蟲抓取分析的內(nèi)容大大減少。
另外，瀏覽器爬蟲不會(huì)等待我們的數(shù)據(jù)完成之后再去抓取我們的頁(yè)面數(shù)據(jù)。服務(wù)端渲染返回給客戶端的是已經(jīng)獲取了異步數(shù)據(jù)并執(zhí)行Js腳本的最終HTML，網(wǎng)絡(luò)爬中就可以抓取到完整頁(yè)面的信息，所以就要用到SSR渲染了。
如果是項(xiàng)目開(kāi)始的時(shí)候，就知道要做SEO，建議使用比較成熟的SSR框架
基于Vue的 Nuxtjs
基于Reactde Nextjs
如果是項(xiàng)目已經(jīng)成形或者只想優(yōu)化部分頁(yè)面，建議使用一些插件來(lái)實(shí)現(xiàn)，比如 prerender-spa-plugin、vue-server-renderer ( 適用于Vue )
Tips： 爬蟲不會(huì)抓取iFrame里的內(nèi)容，所以盡量避免使用
10.網(wǎng)站地址
和產(chǎn)品關(guān)鍵詞或者公司名字高度相關(guān)的域名，能夠有效提升網(wǎng)站的SEO排名。
各個(gè)頁(yè)面的路徑地址盡量不要過(guò)長(zhǎng)，以及不能出現(xiàn)中文，否則會(huì)影響收錄。
由于網(wǎng)站改版或者其他因素，可能會(huì)出現(xiàn)部分鏈接地址生效，這時(shí)候可以進(jìn)行301重定向到新的頁(yè)面，盡量避免出現(xiàn)過(guò)多的死鏈（404頁(yè)面），如果死鏈太多，搜索引擎可能認(rèn)為網(wǎng)站不可靠，從而影響網(wǎng)站的排名和流量。
下面兩個(gè)鏈接都是百度頁(yè)面，像這種有多個(gè)URL為相同頁(yè)面的情況，就是網(wǎng)址規(guī)范化問(wèn)題。
無(wú)論是對(duì)搜索引擎還是網(wǎng)站來(lái)說(shuō)，多個(gè)URL為相同頁(yè)面，浪費(fèi)了抓取資源，而且如果多個(gè)網(wǎng)址內(nèi)容相同時(shí)或者高度相同，可能會(huì)認(rèn)為網(wǎng)站重復(fù)頁(yè)面過(guò)多一類的因素導(dǎo)致影響收錄甚至降權(quán)。
在一個(gè)頁(yè)面有多個(gè)URL時(shí)，還會(huì)對(duì)頁(yè)面找出權(quán)重分散，降低了頁(yè)面排名能力，網(wǎng)站無(wú)意義收錄等問(wèn)題 當(dāng)頁(yè)面出現(xiàn)URL規(guī)范問(wèn)題，搜索引擎也會(huì)自動(dòng)判斷并選擇一個(gè)認(rèn)為是規(guī)范的頁(yè)面進(jìn)行索引。
baidu.com
www.baidu.com
解決方案：可通過(guò)在每個(gè)非規(guī)范版本的 HTML 網(wǎng)頁(yè)的 <head> 部分中，添加一個(gè) rel="canonical" 鏈接來(lái)進(jìn)行指定規(guī)范網(wǎng)址。
<!-- href填寫要作為標(biāo)準(zhǔn)的網(wǎng)址 --><link rel="canonical" >
11.網(wǎng)站性能
網(wǎng)站打開(kāi)速度越快，識(shí)別效果越好，否則爬蟲會(huì)認(rèn)為該網(wǎng)站對(duì)用戶不友好，降低爬取效率，這時(shí)候就要考慮壓縮文件體積之類的性能優(yōu)化了。
12. 使用https
Google和其他搜索引擎已經(jīng)明確表示，他們更喜歡使用HTTPS，因?yàn)樗峁└叩陌踩院透玫挠脩趔w驗(yàn)。當(dāng)您的網(wǎng)站使用HTTPS時(shí)，搜索引擎會(huì)將其視為更可信和更安全的網(wǎng)站，從而為其排名增加積極因素。
13.提交站點(diǎn)收錄
將創(chuàng)建好的網(wǎng)站地圖提交給搜索引擎，以便搜索引擎能夠更快更及時(shí)地抓取和索引網(wǎng)站。
百度
google
Bing
網(wǎng)站訪問(wèn)數(shù)據(jù)
后期維護(hù)需要一定的網(wǎng)站訪問(wèn)數(shù)據(jù)做分析，比如流量來(lái)源，頁(yè)面點(diǎn)擊，地域分布等，不同的搜索引擎都有自己的一套分析工具，我們只要按照官網(wǎng)的教程，把埋點(diǎn)的代碼嵌入到項(xiàng)目即可。
百度統(tǒng)計(jì)
Google Analytics
附贈(zèng)
檢測(cè)Title Tag & Meta Description優(yōu)化
站點(diǎn)地圖生成
Web Developer , 一個(gè)Chrome插件，集成了各種各樣的 Web 開(kāi)發(fā)工具，比如可以使用下圖紅框里的選項(xiàng)（圖1），查看網(wǎng)頁(yè)的Title，Meta，H標(biāo)簽等（圖2，3）。
圖 （1）
圖 （2）
圖 （3）
總結(jié)
個(gè)人覺(jué)得，前端的工作都是集中在項(xiàng)目前期，后面的話主要是一些維護(hù)工作，比如公司之前開(kāi)發(fā)了一個(gè)支持富文本內(nèi)容的文章發(fā)布平臺(tái)，然后運(yùn)營(yíng)部門就可以自己發(fā)一些引流的文章了，和開(kāi)發(fā)關(guān)系不大。
另外，公司專門請(qǐng)了一個(gè)增長(zhǎng)黑客（其實(shí)就是SEO優(yōu)化工程師的角色），負(fù)責(zé)每周給公司寫文章的同學(xué)提供關(guān)鍵詞，分析網(wǎng)站訪客數(shù)據(jù)，提交網(wǎng)站收錄，尋找外鏈資源等。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)