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