1. 什么是 SEO
SEO（Search Engine Optimization，搜索引擎優(yōu)化）是一種通過(guò)優(yōu)化網(wǎng)站內(nèi)容和技術(shù)，以提升其在搜索引擎（如 Google、百度、Bing 等）中的自然排名，從而增加網(wǎng)站流量的技術(shù)和策略。
例如，當(dāng)我們?cè)?Google?進(jìn)行搜索時(shí)，排名越靠前的就是?SEO 越優(yōu)秀，被用戶點(diǎn)擊的概率也就越高
PS：某度的競(jìng)價(jià)排名除外！競(jìng)價(jià)排名是誰(shuí)出的錢越多，誰(shuí)就在前面。
根據(jù)以上截圖就可以發(fā)現(xiàn)，針對(duì)本人【程序員Sunday】的?SEO?優(yōu)化中，CSDN?做的最好，B 站其次，掘金居然是最差的 ??。
那么如何才可以做好?SEO?呢？
想要搞明白這一點(diǎn)，咱們就先來(lái)看看?SEO 的工作原理
SEO 的工作原理
SEO 的核心在于讓搜索引擎的爬蟲(chóng)（Crawler）能夠高效抓取和理解網(wǎng)站內(nèi)容，進(jìn)而在索引中給出合理排名。
它的具體工作流程分為以下三大步：
- Crawl（爬取）：搜索引擎爬蟲(chóng)訪問(wèn)網(wǎng)站，抓取頁(yè)面內(nèi)容、鏈接和資源。
- Index（索引）：抓取到的內(nèi)容被存儲(chǔ)在搜索引擎的數(shù)據(jù)庫(kù)中，作為后續(xù)查詢的基礎(chǔ)。
- Rank（排名）：根據(jù)內(nèi)容的相關(guān)性、質(zhì)量、網(wǎng)站結(jié)構(gòu)等多個(gè)因素，將頁(yè)面按關(guān)鍵詞的優(yōu)先級(jí)排序。
那么明確好了它的原理之后，我們就知道想要做好?SEO?優(yōu)化，其核心就是：更清晰，快速的展示網(wǎng)站關(guān)鍵內(nèi)容。
那么具體怎么做呢？我們來(lái)看一下！
SEO 優(yōu)化方案
1. 確保關(guān)鍵內(nèi)容可被搜索引擎抓取
搜索引擎爬蟲(chóng)依賴頁(yè)面的初始 HTML 結(jié)構(gòu)進(jìn)行抓取。
如果頁(yè)面的主要內(nèi)容是通過(guò)?JavaScript?動(dòng)態(tài)加載的，可能會(huì)導(dǎo)致內(nèi)容缺失。特別是對(duì)于依賴用戶交互加載的內(nèi)容，如點(diǎn)擊或滾動(dòng)，爬蟲(chóng)通常無(wú)法模擬這些操作。
實(shí)踐方法
- 確保重要的內(nèi)容直接輸出到 HTML 中。
示例（Vue 中的服務(wù)端渲染）
使用?Nuxt.js?實(shí)現(xiàn) Vue 的服務(wù)端渲染，讓內(nèi)容直接輸出到 HTML：
// pages/index.vue
<template>
??<div>
? ??<h1>{{ title }}</h1>
? ??<p>{{ description }}</p>
??</div>
</template>
<script>
export default {
? async asyncData() {
? ? // 服務(wù)端拉取數(shù)據(jù)
? ? 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 應(yīng)用主要有以下三種渲染方式：
- 客戶端渲染（CSR）：所有內(nèi)容通過(guò) JavaScript 動(dòng)態(tài)生成，爬蟲(chóng)可能無(wú)法完全抓取。
- 服務(wù)端渲染（SSR）：HTML 內(nèi)容在服務(wù)器生成，返回靜態(tài) HTML，爬蟲(chóng)更友好。
- 靜態(tài)預(yù)渲染（Pre-rendering）：在構(gòu)建時(shí)生成 HTML 文件，適合內(nèi)容更新較少的頁(yè)面。
實(shí)踐方法
- 使用 SSR 或 Pre-rendering 提高 SEO 表現(xiàn)。
- 針對(duì)需要?jiǎng)討B(tài)交互的頁(yè)面，可以結(jié)合動(dòng)態(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>?標(biāo)簽
<title>?和?<meta>?是搜索引擎理解頁(yè)面內(nèi)容的關(guān)鍵。如果這些標(biāo)簽由 JS 動(dòng)態(tài)生成，爬蟲(chóng)可能會(huì)抓取不到。
實(shí)踐方法
- 使用工具（如 React Helmet 或 Vue Meta）動(dòng)態(tài)設(shè)置頁(yè)面標(biāo)題和描述。
- 確保重要頁(yè)面優(yōu)先定義?
meta name="description"?和?meta name="robots"。
示例（Vue 中動(dòng)態(tài)設(shè)置標(biāo)題和描述）
// 使用 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)化內(nèi)部鏈接結(jié)構(gòu)
內(nèi)部鏈接幫助爬蟲(chóng)理解頁(yè)面結(jié)構(gòu)和內(nèi)容關(guān)系。如果鏈接通過(guò) JS 動(dòng)態(tài)生成，爬蟲(chóng)可能會(huì)忽略這些鏈接。
實(shí)踐方法
- 使用標(biāo)準(zhǔn)的?
<a>?標(biāo)簽定義內(nèi)部鏈接。 - 避免完全依賴事件監(jiān)聽(tīng)器（如?
onClick）實(shí)現(xiàn)導(dǎo)航。
示例
// 避免這種方式：
<button @click="navigateTo('/about')">About Us</button>
// 推薦使用：
<router-link to="/about">About Us</router-link>
5. 使用語(yǔ)義化的 HTML
語(yǔ)義化標(biāo)簽?zāi)茉鰪?qiáng)爬蟲(chóng)對(duì)頁(yè)面內(nèi)容的理解。濫用?<div>?和?
實(shí)踐方法
- 用?
<header>、<main>、<article>?等結(jié)構(gòu)化頁(yè)面內(nèi)容。 - 合理使用?
<h1>?到?<h6>?標(biāo)簽，突出頁(yè)面層次。
示例
<header>
??<h1>歡迎來(lái)到我的博客</h1>
</header>
<main>
??<article>
? ??<h2>最新文章</h2>
? ??<p>內(nèi)容</p>
??</article>
</main>
<footer>
??<p>? 2024 程序員Sunday</p>
</footer>
6. 避免對(duì)內(nèi)容的延遲加載
懶加載可以優(yōu)化用戶體驗(yàn)，但如果懶加載的內(nèi)容是關(guān)鍵內(nèi)容，可能會(huì)導(dǎo)致爬蟲(chóng)抓取不到。
實(shí)踐方法
- 使用 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 文件加載過(guò)慢會(huì)影響頁(yè)面渲染速度，從而降低 SEO 排名。
實(shí)踐方法
示例（Webpack 配置代碼拆分）
module.exports = {
??optimization: {
? ??splitChunks: {
? ? ??chunks:?'all',
? ? },
? },
};
8. 確保重要資源的可訪問(wèn)性
如果 robots.txt 阻止了 JavaScript 文件或 API，爬蟲(chóng)無(wú)法正確解析頁(yè)面內(nèi)容。
實(shí)踐方法
- 確保 robots.txt 文件允許訪問(wèn)關(guān)鍵資源。
9. 構(gòu)建結(jié)構(gòu)化數(shù)據(jù)
結(jié)構(gòu)化數(shù)據(jù)幫助搜索引擎更好地理解頁(yè)面內(nèi)容，并有機(jī)會(huì)在搜索結(jié)果中展示富文本卡片。
示例（JSON-LD 結(jié)構(gòu)化數(shù)據(jù)）
<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
該文章在 2025/6/10 14:13:19 編輯過(guò)
400 186 1886
