沒人問了，也沒人做了？SEO 已經被“前端”除名了？？？
Hello，大家好，我是 Sunday。
好久沒有同學問過我關于 SEO 的問題了。在目前的前端開發中，好像很多新入行的同學都已經不再關注，甚至可能都不知道 SEO 是什么。
究其原因，本質上是因為大量的中小廠日常工作都是以“后臺管理系統”為主，“增刪改查”變成了日常開發的主旋律，無需在與 C 端用戶、搜索排名 打交道了。
但是，如果一直這樣下去，肯定會影響我們知識的廣度，不利于后期的職業發展（跳槽漲薪）。
因此，咱們今天就來聊聊 “好久好久沒有聊過的 SEO” 的問題，來看看 它到底是什么？
1. 什么是 SEO
SEO（Search Engine Optimization，搜索引擎優化）是一種通過優化網站內容和技術，以提升其在搜索引擎（如 Google、百度、Bing 等）中的自然排名，從而增加網站流量的技術和策略。
例如，當我們在 Google 進行搜索時，排名越靠前的就是 SEO 越優秀，被用戶點擊的概率也就越高
PS：某度的競價排名除外！競價排名是誰出的錢越多，誰就在前面。
圖片
根據以上截圖就可以發現，針對本人【程序員Sunday】的 SEO 優化中，CSDN 做的最好，B 站其次，掘金居然是最差的 ??。
那么如何才可以做好 SEO 呢？
想要搞明白這一點，咱們就先來看看 SEO 的工作原理
SEO 的工作原理
SEO 的核心在于讓搜索引擎的爬蟲（Crawler）能夠高效抓取和理解網站內容，進而在索引中給出合理排名。
它的具體工作流程分為以下三大步：
- Crawl（爬取）：搜索引擎爬蟲訪問網站，抓取頁面內容、鏈接和資源。
- Index（索引）：抓取到的內容被存儲在搜索引擎的數據庫中，作為后續查詢的基礎。
- Rank（排名）：根據內容的相關性、質量、網站結構等多個因素，將頁面按關鍵詞的優先級排序。
那么明確好了它的原理之后，我們就知道想要做好 SEO 優化，其核心就是：更清晰，快速的展示網站關鍵內容。
那么具體怎么做呢？我們來看一下！
SEO 優化方案
1. 確保關鍵內容可被搜索引擎抓取
搜索引擎爬蟲依賴頁面的初始 HTML 結構進行抓取。
如果頁面的主要內容是通過 JavaScript 動態加載的，可能會導致內容缺失。特別是對于依賴用戶交互加載的內容，如點擊或滾動，爬蟲通常無法模擬這些操作。
實踐方法
- 確保重要的內容直接輸出到 HTML 中。
- 避免依賴用戶交互或延遲加載。
示例（Vue 中的服務端渲染）
使用 Nuxt.js 實現 Vue 的服務端渲染，讓內容直接輸出到 HTML：
// pages/index.vue
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
async asyncData() {
// 服務端拉取數據
const data = await fetch('https://api.example.com/content').then(res => res.json());
return {
title: data.title,
description: data.description,
};
},
};
</script>2. 選擇正確的渲染方式（CSR、SSR、SSG）
JS 應用主要有以下三種渲染方式：
- 客戶端渲染（CSR）：所有內容通過 JavaScript 動態生成，爬蟲可能無法完全抓取。
- 服務端渲染（SSR）：HTML 內容在服務器生成，返回靜態 HTML，爬蟲更友好。
- 靜態預渲染（Pre-rendering）：在構建時生成 HTML 文件，適合內容更新較少的頁面。
實踐方法
- 使用 SSR 或 Pre-rendering 提高 SEO 表現。
- 針對需要動態交互的頁面，可以結合動態渲染。
示例（使用 Pre-rendering）
使用 Vite 配合 vite-plugin-ssg 靜態生成 HTML：
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import ssg from 'vite-plugin-ssg';
export default defineConfig({
plugins: [vue(), ssg()],
});3. 正確使用 <title> 和 <meta> 標簽
<title> 和 <meta> 是搜索引擎理解頁面內容的關鍵。如果這些標簽由 JS 動態生成，爬蟲可能會抓取不到。
實踐方法
- 使用工具（如 React Helmet 或 Vue Meta）動態設置頁面標題和描述。
- 確保重要頁面優先定義
meta name="description"和meta name="robots"。
示例（Vue 中動態設置標題和描述）
// 使用 vue-meta 插件
<template>
<div>
<h1>About Us</h1>
</div>
</template>
<script>
export default {
metaInfo() {
return {
title: 'About Us - Company Name',
meta: [
{
name: 'description',
content: 'Learn more about our company, mission, and values.',
},
],
};
},
};
</script>4. 優化內部鏈接結構
內部鏈接幫助爬蟲理解頁面結構和內容關系。如果鏈接通過 JS 動態生成，爬蟲可能會忽略這些鏈接。
實踐方法
- 使用標準的
<a>標簽定義內部鏈接。 - 避免完全依賴事件監聽器（如
onClick）實現導航。
示例
// 避免這種方式：
<button @click="navigateTo('/about')">About Us</button>
// 推薦使用：
<router-link to="/about">About Us</router-link>5. 使用語義化的 HTML
語義化標簽能增強爬蟲對頁面內容的理解。濫用 <div> 和 <span> 會降低頁面的可讀性。
實踐方法
- 用
<header>、<main>、<article>等結構化頁面內容。 - 合理使用
<h1>到<h6>標簽，突出頁面層次。
示例
<header>
<h1>歡迎來到我的博客</h1>
</header>
<main>
<article>
<h2>最新文章</h2>
<p>內容</p>
</article>
</main>
<footer>
<p>? 2024 程序員Sunday</p>
</footer>6. 避免對內容的延遲加載
懶加載可以優化用戶體驗，但如果懶加載的內容是關鍵內容，可能會導致爬蟲抓取不到。
實踐方法
- 優先渲染首屏內容。
- 使用 Intersection Observer 優化懶加載行為。
示例（懶加載優化）
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));7. 優化 JavaScript 文件加載
JavaScript 文件加載過慢會影響頁面渲染速度，從而降低 SEO 排名。
實踐方法
- 使用 Webpack 的代碼拆分功能。
- 壓縮和混淆 JavaScript 文件。
示例（Webpack 配置代碼拆分）
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
},
},
};8. 確保重要資源的可訪問性
如果 robots.txt 阻止了 JavaScript 文件或 API，爬蟲無法正確解析頁面內容。
實踐方法
- 確保 robots.txt 文件允許訪問關鍵資源。
- 檢查資源是否被錯誤屏蔽。
9. 構建結構化數據
結構化數據幫助搜索引擎更好地理解頁面內容，并有機會在搜索結果中展示富文本卡片。
示例（JSON-LD 結構化數據）
<script type="application/ld+json">
{
"@context": "https://lgdsunday.glub",
"@type": "Organization",
"name": "程序員Sunday",
"url": "https://lgdsunday.glub",
"logo": "https://lgdsunday.glub/logo.png"
}
</script>
