首頁 系統教程 Linux 前端SEO—詳細講解

前端SEO—詳細講解

Mar 12, 2024 pm 06:13 PM
linux linux教程 紅帽 linux系統 搜尋引擎優化 linux指令 css佈局 linux認證 紅帽linux linux視頻

前端SEO—詳細講解

一、搜尋引擎運作原理

當我們在輸入框中輸入關鍵字,點擊搜尋或查詢時,然後得到結果。深究背後的故事,搜尋引擎做了很多事。

在搜尋引擎網站,例如百度,在其後台有一個非常龐大的資料庫,裡面儲存了海量的關鍵字,而每個關鍵字又對應著很多網址,這些網址是百度程式從茫茫的網路上一點一點下載收集而來的,這些程式稱之為「搜尋引擎蜘蛛」或「網路爬蟲」。這些勤奮的“蜘蛛”每天在互聯網上爬行,從一個鏈接到另一個鏈接,下載其中的內容,進行分析提煉,找到其中的關鍵字,如果“蜘蛛”認為關鍵字在數據庫中沒有而對用戶是有用的便存入資料庫。反之,如果「蜘蛛」認為是垃圾訊息或重複訊息,就捨棄不要,繼續爬行,尋找最新的、有用的資訊保存起來提供用戶搜尋。當使用者搜尋時,就能檢索出與關鍵字相關的網址顯示給訪客。

一個關鍵字對用多個網址,因此就出現了排序的問題,對應的當與關鍵字最吻合的網址就會排在前面了。在「蜘蛛」抓取網頁內容,提煉關鍵字的這個過程中,就存在一個問題:「蜘蛛」能否看懂。如果網站內容是flash和js,那麼它是看不懂的,會犯迷糊,即使關鍵字再貼切也沒用。相應的,如果網站內容是它的語言,那麼它便能看懂,它的語言即SEO。

二、SEO簡介

#全名為:Search English Optimization,搜尋引擎優化。自從有了搜尋引擎,SEO便誕生了。

存在的意義:為了提升網頁在搜尋引擎自然搜尋結果中的收錄數量以及排序位置而做的最佳化行為。簡言之,就是希望百度等搜尋引擎能多多我們收錄精心製作後的網站,並且在別人造訪時網站能排在前面。

分類:白帽SEO和黑帽SEO。白帽SEO,起到了改良和規範網站設計的作用,使網站對搜尋引擎和用戶更加友好,並且網站也能從搜尋引擎中獲取合理的流量,這是搜尋引擎鼓勵和支持的。黑帽SEO,利用和放大搜尋引擎政策缺陷來獲取更多用戶的訪問量,這類行為大多是欺騙搜尋引擎,一般搜尋引擎公司是不支持與鼓勵的。本文針對白帽SEO,那麼白帽SEO能做什麼呢?

1. 對網站的標題、關鍵字、描述精心設置,反映網站的定位,讓搜尋引擎明白網站是做什麼的;

2. 網站內容優化:內容與關鍵字的對應,增加關鍵字的密度;

3. 在網站上合理地設定Robot.txt檔案;

4. 產生針對搜尋引擎友善的網站地圖;

5. 增加外部鏈接,到各個網站上宣傳;

三、前端SEO

#透過網站的結構佈局設計和網頁程式碼優化,讓前端頁面既能讓瀏覽器使用者看懂,也能讓「蜘蛛」看懂。

(1)網站結構佈局優化:盡量簡單、開門見山,提倡扁平化結構。
#

一般而言,建立的網站架構層次越少,越容易被「蜘蛛」抓取,也就容易被收錄。一般中小型網站目錄結構超過三級,「蜘蛛」便不願意往下爬,「萬一天黑迷路了怎麼辦」。並且根據相關調查:訪客如果經過跳轉3次還沒找到需要的資訊,很可能離開。因此,三層目錄結構也是體驗的需要。為此我們需要做到:

1. 控制首頁連結數量

網站首頁是權重最高的地方,如果首頁連結太少,沒有“橋”,“蜘蛛”不能繼續往下爬到內頁,直接影響網站收錄數量。但是首頁鏈接也不能太多,一旦太多,沒有實質性的鏈接,很容易影響用戶體驗,也會降低網站首頁的權重,收錄效果也不好。

因此對於中小型企業網站,建議首頁連結在100個以內,連結的性質可以包含頁面導航、底部導航、錨文字連結等等,注意連結要建立在使用者的良好體驗和引導使用者獲取資訊的基礎之上。

2.扁平化的目錄層次,盡量讓「蜘蛛」只要跳3次,就能到達網站內的任何一個內頁。扁平化的目錄結構,例如:“植物”--> "水果" --> "蘋果"、“桔子”、“香蕉”,透過3級就能找到香蕉了。

3.導航優化

導航應該盡量採用文字方式,也可以搭配圖片導航,但是圖片代碼一定要進行優化,前端SEO—詳細講解標籤必須添加“alt”和“title”屬性,告訴搜尋引擎導航的定位,做到即使圖片未能正常顯示時,使用者也能看到提示文字。

其次,在每個網頁上應該加上麵包屑導航,好處:從用戶體驗方面來說,可以讓用戶了解當前所處的位置以及當前頁面在整個網站中的位置,幫助用戶很快了解網站組織形式,從而形成更好的位置感,同時提供了返回各個頁面的接口,方便用戶操作;對“蜘蛛”而言,能夠清楚的了解網站結構,同時還增加了大量的內部鏈接,方便抓取,降低跳出率。

4. 網站的結構佈局--不可忽略的細節

頁面頭部:logo及主導航,以及使用者的資訊。

頁面主體:左邊正文,包括麵包屑導航及正文;右邊放熱門文章及相關文章,好處:留住訪客,讓訪客多停留,對“蜘蛛”而言,這些文章屬於相關鏈接,增強了頁面相關性,也能增強頁面的權重。

頁面底部:版權資訊和友誼連結。

特別注意:分頁導覽寫法,推薦寫法:“首頁 1 2 3 4 5 6 7 8 9 下拉框”,這樣“蜘蛛”能夠根據對應頁碼直接跳轉,下拉框直接選擇頁面跳轉。而下面的寫法是不推薦的,“首頁 下一頁 尾頁”,特別是當分頁數量特別多時,“蜘蛛”需要經過很多次往下爬,才能抓取,會很累、會容易放棄。

5.控制頁面的大小,減少http請求,提高網站的載入速度。

一個頁面最好不要超過100k,太大,頁面載入速度慢。當速度很慢時,使用者體驗不好,留不住訪客,一旦超時,「蜘蛛」也會離開。

 (2)網頁程式碼最佳化

1.標題:只強調重點即可,盡量把重要的關鍵字放在前面,關鍵字不要重複出現,盡量做到每個頁面的。標題中不要設定相同的內容。

2.標籤:關鍵字,列舉出幾個頁面的重要關鍵字即可,切記過度堆砌。

3.標籤:網頁描述,需要高度概括網頁內容,切記不能太長,過分堆砌關鍵字,每個頁面也要有所不同。

4.中的標籤:盡量讓程式碼語意化,在適當的位置使用適當的標籤,用正確的標籤做正確的事。讓閱讀原始碼者和「蜘蛛」都一目了然。例如:h1-h6 是用於標題類別的。

5.超連結標籤:頁內鏈接,要加 “title” 屬性加以說明,讓訪客和 “蜘蛛” 知道。而外部鏈接,鏈接到其他網站的,則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬,因為一旦“蜘蛛”爬了外部鏈接之後,就不會再回來了。

6.正文標題要用h1標籤:「蜘蛛」 認為它最重要,若不喜歡h1,h1的預設樣式可以透過CSS設定。盡量做到正文標題用h1標籤,副標題用h2標籤, 而其它地方不應該隨便亂用 h 標題標籤。

7.換行標籤:只用於文字內容的換行

8.表格應該使用表格標題標籤

9.圖片應使用 "alt" 屬性加以說明

10.加粗,強調標籤 : 需要強調時使用。加粗標籤在搜尋引擎中能夠得到高度的重視,它能突顯關鍵字,表現重要的內容,並強調標籤強調效果僅次於加粗標籤。

10、文字縮排不要使用特殊符號   應使用CSS進行設定。版權符號不要使用特殊符號 © 可以直接使用輸入法,拼出“banquan”,選擇序號5就能打出版權符號©。

12、巧妙利用CSS佈局,將重要內容的HTML程式碼放在最前面,最前面的內容被認為是最重要的,優先讓「蜘蛛」讀取,進行內容關鍵字抓取。

13.重要內容不要用JS輸出,因為「蜘蛛」不認識

14.盡量少使用iframe框架,因為「蜘蛛」一般不會讀取其中的內容

15.謹慎使用 display:none :對於不想顯示的文字內容,應設定z-index或設定到瀏覽器顯示器之外。因為搜尋引擎會過濾掉display:none其中的內容。

16. 不斷精簡程式碼

17.js程式碼如果是操作DOM操作,應盡量放在body結束標籤之前,html程式碼之後。

----------------------------------------------- ------------------------小二給我來二、兩輪子!

以上是前端SEO—詳細講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1663
14
CakePHP 教程
1420
52
Laravel 教程
1313
25
PHP教程
1266
29
C# 教程
1239
24
Linux體系結構:揭示5個基本組件 Linux體系結構:揭示5個基本組件 Apr 20, 2025 am 12:04 AM

Linux系統的五個基本組件是:1.內核,2.系統庫,3.系統實用程序,4.圖形用戶界面,5.應用程序。內核管理硬件資源,系統庫提供預編譯函數,系統實用程序用於系統管理,GUI提供可視化交互,應用程序利用這些組件實現功能。

git怎麼查看倉庫地址 git怎麼查看倉庫地址 Apr 17, 2025 pm 01:54 PM

要查看 Git 倉庫地址,請執行以下步驟:1. 打開命令行並導航到倉庫目錄;2. 運行 "git remote -v" 命令;3. 查看輸出中的倉庫名稱及其相應的地址。

Linux的主要目的是什麼? Linux的主要目的是什麼? Apr 16, 2025 am 12:19 AM

Linux的主要用途包括:1.服務器操作系統,2.嵌入式系統,3.桌面操作系統,4.開發和測試環境。 Linux在這些領域表現出色,提供了穩定性、安全性和高效的開發工具。

notepad怎麼運行java代碼 notepad怎麼運行java代碼 Apr 16, 2025 pm 07:39 PM

雖然 Notepad 無法直接運行 Java 代碼,但可以通過借助其他工具實現:使用命令行編譯器 (javac) 編譯代碼,生成字節碼文件 (filename.class)。使用 Java 解釋器 (java) 解釋字節碼,執行代碼並輸出結果。

sublime寫好代碼後如何運行 sublime寫好代碼後如何運行 Apr 16, 2025 am 08:51 AM

在 Sublime 中運行代碼的方法有六種:通過熱鍵、菜單、構建系統、命令行、設置默認構建系統和自定義構建命令,並可通過右鍵單擊項目/文件運行單個文件/項目,構建系統可用性取決於 Sublime Text 的安裝情況。

laravel安裝代碼 laravel安裝代碼 Apr 18, 2025 pm 12:30 PM

要安裝 Laravel,需依序進行以下步驟:安裝 Composer(適用於 macOS/Linux 和 Windows)安裝 Laravel 安裝器創建新項目啟動服務訪問應用程序(網址:http://127.0.0.1:8000)設置數據庫連接(如果需要)

git軟件安裝 git軟件安裝 Apr 17, 2025 am 11:57 AM

安裝 Git 軟件包括以下步驟:下載安裝包運行安裝包驗證安裝配置 Git安裝 Git Bash(僅限 Windows)

如何設置重要的 Git 配置全局屬性 如何設置重要的 Git 配置全局屬性 Apr 17, 2025 pm 12:21 PM

自定義開發環境的方法有很多種,但全局 Git 配置文件是最有可能用於自定義設置(例如用戶名、電子郵件、首選文本編輯器和遠程分支)的一種。以下是您需要了解的有關全局 Git 配置文件的關鍵事項。

See all articles