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