免費諮詢如果您想創建一個網站，現在可以聯繫我們。

從開發人員的角度來看 SEO 指南

Ljamov
January 4 2022

在我成為 Web 開發人員之前，我的 SEO 之旅就開始了。事實上，我決定成為一名 Web 開發人員的原因與我在 SEO 方面的知識和工作經驗有關。我知道在 Web 開發的世界中，不需要甚至不鼓勵開發人員具有 SEO 知識，但是在現代 Web 時代，現代 Web 開發人員不僅僅是編碼員，而網站不僅僅是URL - 它是您業務的基礎和最重要的部分。SEO 在使您的業務脫穎而出方面發揮著重要作用。SEO 和 Web 開發是完全相關的，就像擁有堅實的基礎是蓋房子的關鍵一樣，擁有紮實的 SEO 友好的網站設計也是一個類似的類比。

在繼續之前，讓我們簡要介紹一下 SEO 過程。

什麼是搜索引擎優化？

*請不要將 SEO 與 CEO 混淆。

由於PRD目標是將產品需求「描述清楚」，方便開發團隊或是相關利害關係人溝通使用。任何的設計文件都是輔助將「抽象化、形而上的功能」，用各種方式「具體化」，故此PRD只求清晰明瞭，詞必達意。

為什麼SEO很重要？

SEO使您能夠在網絡上為您的網站獲得更好的排名
SEO獲得的點擊次數比PPC 多，您無需為 SEO 中的廣告付費
隨著搜索引擎優化，我們有更好的速度在我們的網站，與更好的用戶體驗

技術搜索引擎優化

“技術 SEO 是確保網站滿足現代搜索引擎技術要求的過程，其目標是提高自然排名。技術 SEO 的重要元素包括抓取、索引、渲染和網站架構。” — Backlinko

技術搜索引擎優化允許像谷歌這樣的搜索引擎知道你有一個高價值的網站。這真的很重要，因為它可以提示搜索引擎將您排名更高。

搜索引擎優化

您可以做很多事情來使您的網站針對搜索引擎進行優化，但我將重點介紹每個構建網站的開發人員都需要知道的事情。

HTML 元素

標題標籤

該標題標籤是一個HTML代碼標籤，讓你給一個網頁的標題。該標題可以在瀏覽器標題欄中找到，也可以在搜索引擎結果頁面 (SERP) 中找到。添加和優化網站的標題標籤至關重要，因為它們在有機排名方面發揮著重要作用。此標籤沒有官方長度，但最佳做法是 50-60 個字符。

提示：不要忘記在標題的開頭添加最重要的關鍵字。

Meta 描述標籤

在 SERP 中顯示結果時，Meta 描述標籤是第二重要的事情。它是一個 HTML 屬性，可提供網頁的簡要摘要。最佳實踐需要大約 160-180 個字符，並且它們具有足夠的描述性。請記住，“最佳”長度會因情況而異，您的主要目標應該是提供價值和推動點擊。

提示：一個寫得好的標題和Meta 描述會影響點擊率（點擊率）

圖片

圖像是我們如何體驗網頁的重要組成部分。這對SEO 很重要，因為 Google 的算法關注反映用戶體驗的行為指標，例如跳出率和訪問者在網頁上花費的時間。

在我們設置圖像的路徑後，我們需要為該圖像提供一個很好的描述，以便搜索引擎知道它是關於什麼的。這稱為Alt 標籤。如果圖像無法顯示，必需的 alt 屬性指定圖像的替代文本。

如果用戶出於某種原因無法查看圖像（由於連接速度慢、src 屬性中的錯誤或用戶使用屏幕閱讀器），則 alt 屬性會提供圖像的替代信息。

提示：我們在句子的末尾加上句號，以便屏幕閱讀器可以停止閱讀。

提供圖像高度和寬度將提高您的頁面速度和佈局轉換。

超鏈接

文字鏈接

在我們普通的文本鏈接中，我們只有一個錨鏈接和錨文本。

rel="nofollow"

no-follow 屬性有多種用途，主要用於付費鏈接或一些不受信任的內容（例如評論系統、用戶生成的內容、嵌入，或者如果我們不希望被視為支持指向另一個站點的鏈接。）

但隨著 SEO 的發展，會創建新的屬性，用更具體的標籤取代一般的不關注目的：

rel="sponsored"

我們可以使用此屬性標記帶有贊助值的廣告或付費展示位置（付費鏈接）。

rel="ugc"

當有用戶生成的內容 (UGC) 鏈接時，建議使用rel=”ugc”屬性，例如評論和論壇帖子。

提示：rel=”nofollow”屬性以前被推薦用於這些類型的鏈接，它仍然是一種可接受的標記方式。

當其他值不適用時，您還可以使用nofollow值。對於內部鏈接，最佳做法是使用robots.txt

對於一些經常混淆的完全不同的技術術語，存在一些誤解。我們來談談noreferrer和noopener。

rel="noreferrer"

該noreferrer標籤可以被添加到當由於某種原因，你不希望其他網站知道你鏈接到他們，在這種情況下的鏈接標籤，將會轉診，所以從這個鏈接的所有流量谷歌Analytics（分析）會像直接流量而不是推薦。

提示：不要在內部鏈接上使用rel="noreferrer"屬性，它會導致您的分析報告混淆。

noreferrer也對附屬鏈接沒有影響。這樣做的原因是大多數聯屬網絡營銷計劃不依賴於推薦流量來獎勵轉換，而是依賴於每個鏈接中包含的聯屬網絡營銷 ID。

rel="noopener"

rel="noopener"是一個可以添加到外部鏈接的屬性。出於安全原因，它可以防止打開頁面獲得對原始頁面的任何類型的訪問。

這些屬性如何影響 SEO？

之間的區別nofollow的和noreferrer是noreferrer沒有任何轉診信息傳遞給瀏覽器，但該鏈接之後。使用nofollow，推薦信息會傳遞到瀏覽器，但不會跟踪鏈接。

所以，它們不是一回事。在您不信任的鏈接上使用nofollow，如果您不希望其他站點知道您已鏈接到它們，請使用noreferrer。

另一方面，noopener對您的 SEO 的影響為零，因此您可以安全地使用它來增強網站的安全性。

提示：如果您想建立指向另一個網站的外部鏈接並希望安全且不顯示為推薦人，您可以結合使用這兩種屬性。

機器人標準

機器人標準有 3 種類型：robots.txt、Meta Robots和X-Robots-Tag。

機器人.txt

文件位置：https://yourdomain.com/robots.txt

Robots.txt 總是需要在你的根目錄中，並且有幾個我們可以使用的標籤：User-agent、Disallow、Allow、Crawl-delay、Sitemap。

技術語法：

用戶代理：您要向其提供抓取指令的特定網絡抓取工具（通常是搜索引擎）。
Disallow：用於告訴用戶代理不要抓取特定 URL 的命令。每個 URL 只允許一個“Disallow:”行。
允許（僅適用於 Googlebot）：該命令告訴 Googlebot 它可以訪問頁面或子文件夾，即使其父頁面或子文件夾可能被禁止。
Crawl-delay：爬蟲在加載和爬取頁面內容之前應該等待多少秒。請注意，Googlebot 不會確認此命令，但可以在 Google Search Console 中設置抓取速度。
站點地圖：用於調出與此 URL 關聯的任何 XML 站點地圖的位置。請注意，此命令僅受 Google、Ask、Bing 和 Yahoo 支持。

專業提示：

現在，“Disallow:”和“Disallow:/”之間有很大的區別。

對於非 SEO 從業者來說，這些指令似乎令人困惑。

禁止：（沒有正斜杠）意味著所有搜索引擎蜘蛛和用戶代理都可以從站點根目錄下抓取站點而不會出現問題。
禁止：/（帶有正斜杠）意味著從站點根目錄開始的所有內容都將完全阻止搜索引擎索引訪問。

提示：只有Meta Robots和X-Robots-Tag可以從搜索結果中刪除 URL。

Meta 機器人

< meta > 機器人標籤，通常稱為“Meta 機器人”或通俗地稱為“機器人標籤”，是網頁 HTML 代碼的一部分，並作為代碼元素出現在網頁的 < head > 部分中：

您還可以更具體，而不是對“機器人”（User-Agent）籠統，您可以使用“Googlebot”為 Google Bot 指定規則。

以下是您可以使用的用戶代理和參數列表。

重要的用戶代理：

Googlebot（可用作大多數 Google 抓取工具的默認設置）

Googlebot-新聞
Googlebot-Image
AdsBot-Google
Mediapartners - Google（移動 Adsense）或 Mediapartners
Googlebot 視頻
Bingbot冰機器人
Yandexbot
Baiduspider百度蜘蛛
FacebookExternalHit
Applebot蘋果機器人
Slurp啜飲
Twitterbot推特機器人
Rogerbot羅傑博
Dotbot機器人
Wildcard for all robots所有機器人的通配符：*

不夠？這是一個更大的列表，您可以在其中找到更多用戶代理

重要參數：

index：告訴搜索引擎索引頁面。請注意，您不需要添加這個 < meta > 標籤——它是默認的。
noindex：告訴搜索引擎不要索引頁面。
follow：即使頁面沒有被索引，爬蟲也應該關注頁面上的所有鏈接，並將權益傳遞給鏈接的頁面。
nofollow：告訴爬蟲不要跟踪頁面上的任何鏈接或傳遞任何鏈接資產。
noimageindex：告訴爬蟲不要索引頁面上的任何圖像。
none：相當於同時使用 noindex 和 nofollow 標籤。
noarchive：搜索引擎不應在 SERP 上顯示指向此頁面的緩存鏈接。
nocache：與noarchive相同，但僅用於 Internet Explorer 和 Firefox。
nosnippet：告訴搜索引擎不要在 SERP 上顯示此頁面的此頁面的片段（即Meta 描述）。
unavailable_after：在特定日期之後，搜索引擎不應再索引此頁面。

如果robots < meta > 標籤沒有定義，默認為“INDEX,FOLLOW”

不要屏蔽robots.txt中的noindex URL ，需要爬取尊重。

X-Robots-Tag

雖然Meta 機器人標記允許您在頁面級別控制索引行為，但x-robots-tag可以作為 HTTP 標頭的一部分包含以控制整個頁面的索引以及頁面的特定元素。

要使用x-robots-tag，您需要有權訪問您網站的標題.php、.htaccess或服務器訪問文件。

如何創建一個 SEO 友好的 URL

選擇帶有描述性關鍵字的較短的、人類可讀的 URL
盡可能排除動態參數（參見“規範化”和“分頁”）
如果可能，將內容放在同一個子域中以保留權限
去掉停用詞。“停用詞”是搜索引擎經常過濾或忽略的常用詞（如“and”、“but”、“the”等）
避免自動數字標籤
將 URL 連接到頁面標題。盡可能匹配頁面標題和 URL 結構。

提示：不要包含特殊字符。特殊字符和符號會在 URL 中產生問題並導致鏈接中斷，因此在編寫 SEO 友好的 URL 時不要使用不安全的字符。供您參考，請通過Perishable Press檢查此列表中的字符。在示例中，您可以看到如何在頁面標題中使用“&”而不是在 URL 中使用“&”以符合此最佳實踐。

子域

任何時候您使用子域時，本質上都是在告訴 Google，它是第二個物理網絡資產。與使用子文件夾（通常是站點的擴展）相比，子域將被視為單獨的網絡資產，並且在涉及某些 SEO 任務（如鍊接獲取）時可能更難管理。

規範化

常見的重複主頁 URL：

首選 URL 將是“https : //example.com/”，所以我們需要做的是將 rel=canonical 標籤放在 < head > 中。

規範標籤（又名“rel canonical”）是一種告訴搜索引擎特定 URL 代表頁面主副本的方式。使用規範標籤可以防止由出現在多個 URL 上的相同或“重複”內容引起的問題。

移動的

自 2018 年 7 月以來，谷歌已將移動頁面加載速度作為確定網站搜索結果排名的關鍵指標。如果您的移動網站速度很慢，那麼您在所有設備上的整體排名都會受到嚴重影響。

對於最佳實踐，您可以遵循以下幾點：

您的移動版本應顯示與您的桌面網站相同的內容
頁面標題標籤和Meta 描述應該相同
使用頁面頭部的 meta name=" viewport " 標籤告訴瀏覽器如何調整內容

提示：通過優化關鍵渲染路徑、使用 HTTPS 和 HTTP/2、消除渲染阻塞資源、刪除未使用的 CSS 和延遲離屏圖像來提高速度。

工具：移動友好測試（https://search.google.com/test/mobile-friendly）

表現

當涉及到我們網站的性能時，我們需要採取額外的步驟，以確保我們擁有一個優化的網站。我們需要牢記 3 件事。

頁面速度

壓縮和縮小您的代碼
減少頁面重定向
移除阻止渲染的 JavaScript
使用搖樹
利用瀏覽器緩存
使用 CDN（內容交付網絡）
利用預連接、預取和預加載

測試你的頁面速度：

圖像優化

壓縮您的圖像並嘗試質量設置（無損/有損）
刪除不必要的圖像 Meta 數據
延遲加載
將 SRCSET 用於不同的屏幕尺寸
確保您的圖片有替代文字

現代 JavaScript 站點

保持 JavaScript 包較小（特別是對於移動設備）。小包可提高速度、降低內存使用率並降低 CPU 成本。
使用服務器端或預渲染來提高站點速度、用戶體驗和爬蟲可訪問性。
堅持客戶端渲染？嘗試預呈現以幫助 Googlebot 更直接地獲取您網頁的 HTML 快照。
使用 Chrome 開發工具的“性能”選項卡來測試您的運行時性能和網絡“節流”以模擬不同的設備功能。

可以使用的工具來優化，編譯和縮小代碼和圖片：Grunt（https://gruntjs.com/）、Gulp（https://gulpjs.com/）、和WebPack：（https://webpack.js.org/）。

從搜索引擎優化的角度來看，很難傳達與搜索相關的計劃的價值和重要性，並在開發管道中優先考慮它們。從開發人員的角度來看，SEO 似乎是一個永無止境的門票和煩惱的來源，它會延遲他們按時交付工作。

隨著網絡技術變得越來越先進，搜索引擎優化在技術上變得越來越複雜，這意味著我們作為開發人員積極研究與搜索引擎優化實踐更和諧地工作的方法變得越來越重要，這一切都是為了網站的利益。

文章出處：

所有文章