前端SEO優(yōu)化總結(jié)
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
 ?來源 | https://juejin.cn/post/7300118821532778511 前言以前開發(fā)獨(dú)立站，涉及過一些seo的內(nèi)容，為了避免后面會(huì)遺忘，感覺有必要記錄下相關(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)頁或網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名, 以求得獲得更多的展現(xiàn)量和吸引免費(fèi)的點(diǎn)擊流量，從而達(dá)到互聯(lián)網(wǎng)營銷及品牌建設(shè)的目標(biāo)。 SEO的方式1. Title標(biāo)簽對(duì)頁面點(diǎn)擊率有直接影響，因?yàn)檫@是用戶對(duì)網(wǎng)站頁面的第一印象，而且也是爬蟲重點(diǎn)的爬取對(duì)象，填寫的文字要對(duì)網(wǎng)頁內(nèi)容有準(zhǔn)確而簡潔的描述，能夠吸引用戶點(diǎn)擊，而且長度要適中。 2. Meta標(biāo)簽meta標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數(shù)值，另外還有主要作用于社交平臺(tái)的OG標(biāo)簽。 (1) name屬性
（1） Google 在2009年正式宣布，keyword標(biāo)簽不再是排名的一部分。 （2） 在百度站長論壇上官方曾表示這個(gè)標(biāo)簽?zāi)壳皩?duì)SEO的影響可以忽略不計(jì)。
(2)http-equiv屬性
(3) OG標(biāo)簽它是 Facebook 在 2010 年 F8 開發(fā)者大會(huì)公布的一種網(wǎng)頁元信息（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)頁上沒有使用自家的協(xié)議，就會(huì)用 OG 協(xié)議代替。國內(nèi)的百度、360 搜索、微博、微信、人人網(wǎng)等也支持該協(xié)議。
OG在社交媒體上具有豐富的內(nèi)容展示，比如分享一個(gè)網(wǎng)址鏈接在社交平臺(tái)后，這個(gè)鏈接會(huì)顯示縮略圖、標(biāo)題和描述等，增加訪客點(diǎn)進(jìn)來的概率。 標(biāo)簽詳細(xì)屬性可以看官網(wǎng)：ogp.me/ 3. 語義化標(biāo)簽H系列標(biāo)簽從H1到H6（重要性從高到低）一共有6個(gè)，而且在頁面中的作用性極高，所以不能亂用，得根據(jù)內(nèi)容的重要性進(jìn)行排列，最后不要有斷層，比如從H1直接到H3，錯(cuò)過了H2；另外，H1標(biāo)簽最好只存在一個(gè)，更多細(xì)節(jié)可以網(wǎng)上搜下。 img標(biāo)簽img的alt屬性，為搜索引擎提供替代文本，圖片使用alt標(biāo)簽優(yōu)化，對(duì)搜索引擎排名產(chǎn)生積極影響；另外，網(wǎng)速不佳等原因造成無法加載圖片文件時(shí)，將在圖片的位置顯示alt里的文字 其他還有HTML5新出的 Header, Nav，Aside，Article，F(xiàn)ooter等語義化標(biāo)簽，這些都能幫助爬蟲更好的獲取頁面內(nèi)容 4. sitemap(站點(diǎn)地圖)站點(diǎn)地圖一般是xml格式的文件，放在網(wǎng)站的根目錄下，有些網(wǎng)站甚至可以通過 網(wǎng)址/sitemap.xml 直接訪問到（手動(dòng)狗頭），文件里包含了每個(gè)網(wǎng)頁的鏈接（loc），更新時(shí)間（lastmod），權(quán)重（priority）等信息，權(quán)重從0到1，依次遞增，一般主頁設(shè)為1，然后其他按重要性遞減。 搜索引擎可以通過查看站點(diǎn)地圖快速獲取網(wǎng)站的整體結(jié)構(gòu)，并將精力集中在重要頁面的索引上，這對(duì)于提高搜索引擎的爬行效率和索引速度非常有幫助。 5. robots文件robots.txt，是一個(gè)給爬蟲下指令的文本文件，能讓其合理地抓取網(wǎng)站內(nèi)資源，而且可以將網(wǎng)站不重要的內(nèi)容、模塊等進(jìn)行屏蔽，從而抓取更多有價(jià)值高質(zhì)量的內(nèi)容和網(wǎng)頁，提高網(wǎng)站排名。大多數(shù)網(wǎng)站都可以通過網(wǎng)址/robots.txt進(jìn)行獲取。
6. 內(nèi)鏈和外鏈內(nèi)鏈在自己的網(wǎng)站當(dāng)中通過鏈接的方式在各個(gè)內(nèi)容頁面之間相互鏈接，從而提高爬蟲以及一些搜索引擎對(duì)于網(wǎng)站的爬行索引效率；另外，為了避免內(nèi)鏈起到反作用，在進(jìn)行網(wǎng)站待更新的時(shí)候，一定要注意定期清理死鏈和斷鏈，方便爬蟲可以順著鏈接進(jìn)行收錄爬行，達(dá)到更好的收錄效果。 外鏈通過在其他一些高流量的網(wǎng)站放置自己的鏈接，相較于內(nèi)鏈的內(nèi)部操作，外鏈可以達(dá)到網(wǎng)絡(luò)之間的信息分享，不再讓我們的網(wǎng)站內(nèi)容形成孤立，可以很快的增加網(wǎng)站的瀏覽數(shù)量，提升搜索排名，這對(duì)一個(gè)剛剛建立起來的新站來說，外鏈的數(shù)量基本上可以成為這個(gè)網(wǎng)站快速提升流量的關(guān)鍵所在，不過對(duì)于后期優(yōu)化，外鏈的發(fā)布一定要以質(zhì)量為主，數(shù)量為輔。 nofollow
7.數(shù)據(jù)結(jié)構(gòu)化標(biāo)記結(jié)構(gòu)化數(shù)據(jù)標(biāo)記并不能直接幫助提高搜索排名，但它能帶來很多好處： （1）豐富搜索結(jié)果比如搜索 掘金 出現(xiàn)的頁面，紅色框部分就是結(jié)構(gòu)化標(biāo)記的成果，從框內(nèi)可以更好的了解該網(wǎng)站的內(nèi)容，而且占據(jù)了大版面也有利于吸引用戶注意。
（2）擁有知識(shí)面板在右側(cè)會(huì)有個(gè)知識(shí)面板，該面版可提供更高的品牌知名度和權(quán)威性，如下圖的右側(cè)紅框：
（3）支持語義搜索不再是關(guān)鍵詞的匹配搜索，而是通過關(guān)鍵詞去尋找問題的答案。當(dāng)你搜索如下模糊內(nèi)容時(shí)，Google 會(huì)通過這種方式設(shè)法返回合適的結(jié)果：
（4）體現(xiàn) E-A?TE?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，如下：
Tips這段代碼可以放在<head> 或 <body> HTML 部分的任意位置，更多的JSON-LD款式可以參考 Google官方。 8.面包屑導(dǎo)航
9.服務(wù)端渲染（SSR）爬蟲只會(huì)爬取源碼，不會(huì)執(zhí)行網(wǎng)站的Js腳本,使用了vue或者react之類的框架后，頁面大多數(shù)dom元素都是在客戶端根據(jù)js動(dòng)態(tài)生成，可供爬蟲抓取分析的內(nèi)容大大減少。 另外，瀏覽器爬蟲不會(huì)等待我們的數(shù)據(jù)完成之后再去抓取我們的頁面數(shù)據(jù)。服務(wù)端渲染返回給客戶端的是已經(jīng)獲取了異步數(shù)據(jù)并執(zhí)行Js腳本的最終HTML，網(wǎng)絡(luò)爬中就可以抓取到完整頁面的信息，所以就要用到SSR渲染了。 如果是項(xiàng)目開始的時(shí)候，就知道要做SEO，建議使用比較成熟的SSR框架
如果是項(xiàng)目已經(jīng)成形或者只想優(yōu)化部分頁面，建議使用一些插件來實(shí)現(xiàn)，比如 prerender-spa-plugin、vue-server-renderer ( 適用于Vue ) Tips： 爬蟲不會(huì)抓取iFrame里的內(nèi)容，所以盡量避免使用 10.網(wǎng)站地址
解決方案：可通過在每個(gè)非規(guī)范版本的 HTML 網(wǎng)頁的 <head> 部分中，添加一個(gè) rel="canonical" 鏈接來進(jìn)行指定規(guī)范網(wǎng)址。
11.網(wǎng)站性能網(wǎng)站打開速度越快，識(shí)別效果越好，否則爬蟲會(huì)認(rèn)為該網(wǎng)站對(duì)用戶不友好，降低爬取效率，這時(shí)候就要考慮壓縮文件體積之類的性能優(yōu)化了。 12. 使用httpsGoogle和其他搜索引擎已經(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)站。
網(wǎng)站訪問數(shù)據(jù)后期維護(hù)需要一定的網(wǎng)站訪問數(shù)據(jù)做分析，比如流量來源，頁面點(diǎn)擊，地域分布等，不同的搜索引擎都有自己的一套分析工具，我們只要按照官網(wǎng)的教程，把埋點(diǎn)的代碼嵌入到項(xiàng)目即可。
附贈(zèng)
圖 （1）
圖 （2）
圖 （3）
總結(jié)個(gè)人覺得，前端的工作都是集中在項(xiàng)目前期，后面的話主要是一些維護(hù)工作，比如公司之前開發(fā)了一個(gè)支持富文本內(nèi)容的文章發(fā)布平臺(tái)，然后運(yùn)營部門就可以自己發(fā)一些引流的文章了，和開發(fā)關(guān)系不大。 另外，公司專門請(qǐng)了一個(gè)增長黑客（其實(shí)就是SEO優(yōu)化工程師的角色），負(fù)責(zé)每周給公司寫文章的同學(xué)提供關(guān)鍵詞，分析網(wǎng)站訪客數(shù)據(jù)，提交網(wǎng)站收錄，尋找外鏈資源等。 該文章在 2024/10/14 10:29:06 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
