1. 什么是 SEO

SEO（Search Engine Optimization，搜索引擎優(yōu)化）是一種通過優(yōu)化網站內容和技術，以提升其在搜索引擎（如 Google、百度、Bing 等）中的自然排名，從而增加網站流量的技術和策略。

例如，當我們在?Google?進行搜索時，排名越靠前的就是?SEO 越優(yōu)秀，被用戶點擊的概率也就越高

PS：某度的競價排名除外！競價排名是誰出的錢越多，誰就在前面。

根據以上截圖就可以發(fā)現，針對本人【程序員Sunday】的?SEO?優(yōu)化中，CSDN?做的最好，B 站其次，掘金居然是最差的 ??。

那么如何才可以做好?SEO?呢？

想要搞明白這一點，咱們就先來看看?SEO 的工作原理

SEO 的工作原理

SEO 的核心在于讓搜索引擎的爬蟲（Crawler）能夠高效抓取和理解網站內容，進而在索引中給出合理排名。

它的具體工作流程分為以下三大步：

1. Crawl（爬取）：搜索引擎爬蟲訪問網站，抓取頁面內容、鏈接和資源。
2. Index（索引）：抓取到的內容被存儲在搜索引擎的數據庫中，作為后續(xù)查詢的基礎。
3. Rank（排名）：根據內容的相關性、質量、網站結構等多個因素，將頁面按關鍵詞的優(yōu)先級排序。

那么明確好了它的原理之后，我們就知道想要做好?SEO?優(yōu)化，其核心就是：更清晰，快速的展示網站關鍵內容。

那么具體怎么做呢？我們來看一下！

SEO 優(yōu)化方案

1. 確保關鍵內容可被搜索引擎抓取

搜索引擎爬蟲依賴頁面的初始 HTML 結構進行抓取。

如果頁面的主要內容是通過?JavaScript?動態(tài)加載的，可能會導致內容缺失。特別是對于依賴用戶交互加載的內容，如點擊或滾動，爬蟲通常無法模擬這些操作。

實踐方法

• 確保重要的內容直接輸出到 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 應用主要有以下三種渲染方式：

1. 客戶端渲染（CSR）：所有內容通過 JavaScript 動態(tài)生成，爬蟲可能無法完全抓取。
2. 服務端渲染（SSR）：HTML 內容在服務器生成，返回靜態(tài) HTML，爬蟲更友好。
3. 靜態(tài)預渲染（Pre-rendering）：在構建時生成 HTML 文件，適合內容更新較少的頁面。

實踐方法

• 使用 SSR 或 Pre-rendering 提高 SEO 表現。
• 針對需要動態(tài)交互的頁面，可以結合動態(tài)渲染。

示例（使用 Pre-rendering）

使用?Vite?配合?vite-plugin-ssg?靜態(tài)生成 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 動態(tài)生成，爬蟲可能會抓取不到。

實踐方法

• 使用工具（如 React Helmet 或 Vue Meta）動態(tài)設置頁面標題和描述。
• 確保重要頁面優(yōu)先定義?meta name="description"?和?meta name="robots"。

示例（Vue 中動態(tài)設置標題和描述）

// 使用 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. 優(yōu)化內部鏈接結構

內部鏈接幫助爬蟲理解頁面結構和內容關系。如果鏈接通過 JS 動態(tài)生成，爬蟲可能會忽略這些鏈接。

實踐方法

• 使用標準的?<a>?標簽定義內部鏈接。
• 避免完全依賴事件監(jiān)聽器（如?onClick）實現導航。

示例

// 避免這種方式：
<button @click="navigateTo('/about')">About Us</button>

// 推薦使用：
<router-link to="/about">About Us</router-link>

5. 使用語義化的 HTML

語義化標簽能增強爬蟲對頁面內容的理解。濫用?<div>?和??會降低頁面的可讀性。

實踐方法

• 用?<header>、<main>、<article>?等結構化頁面內容。
• 合理使用?<h1>?到?<h6>?標簽，突出頁面層次。

示例

<header>
??<h1>歡迎來到我的博客</h1>
</header>
<main>
??<article>
? ??<h2>最新文章</h2>
? ??<p>內容</p>
??</article>
</main>
<footer>
??<p>? 2024 程序員Sunday</p>
</footer>

6. 避免對內容的延遲加載

懶加載可以優(yōu)化用戶體驗，但如果懶加載的內容是關鍵內容，可能會導致爬蟲抓取不到。

實踐方法

• 優(yōu)先渲染首屏內容。
• 使用 Intersection Observer 優(yōu)化懶加載行為。

示例（懶加載優(yōu)化）

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. 優(yōu)化 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>

?

閱讀原文：https://mp.weixin.qq.com/s/NRX59P5zyFGp2vmZrD-gdQ