不止“增刪改查”，前端開發(fā)更需要關注 SEO！
Hello，大家好，我是 Sunday。
好久沒有同學問過我關于 SEO 的問題了。在目前的前端開發(fā)中，好像很多新入行的同學都已經(jīng)不再關注，甚至可能都不知道 SEO 是什么。
究其原因，本質(zhì)上是因為大量的中小廠日常工作都是以“后臺管理系統(tǒng)”為主，“增刪改查”變成了日常開發(fā)的主旋律，無需在與 C 端用戶、搜索排名 打交道了。
但是，如果一直這樣下去，肯定會影響我們知識的廣度，不利于后期的職業(yè)發(fā)展（跳槽漲薪）。
因此，咱們今天就來聊聊 “好久好久沒有聊過的 SEO” 的問題，來看看 它到底是什么？
1. 什么是 SEO
SEO（Search Engine Optimization，搜索引擎優(yōu)化）是一種通過優(yōu)化網(wǎng)站內(nèi)容和技術，以提升其在搜索引擎（如 Google、百度、Bing 等）中的自然排名，從而增加網(wǎng)站流量的技術和策略。
例如，當我們在 Google 進行搜索時，排名越靠前的就是 SEO 越優(yōu)秀，被用戶點擊的概率也就越高
PS：某度的競價排名除外！競價排名是誰出的錢越多，誰就在前面。
根據(jù)以上截圖就可以發(fā)現(xiàn)，針對本人【程序員Sunday】的 SEO 優(yōu)化中，CSDN 做的最好，B 站其次，掘金居然是最差的 ??。
那么如何才可以做好 SEO 呢？
想要搞明白這一點，咱們就先來看看 SEO 的工作原理
SEO 的工作原理
SEO 的核心在于讓搜索引擎的爬蟲（Crawler）能夠高效抓取和理解網(wǎng)站內(nèi)容，進而在索引中給出合理排名。
它的具體工作流程分為以下三大步：
- Crawl（爬取）：搜索引擎爬蟲訪問網(wǎng)站，抓取頁面內(nèi)容、鏈接和資源。
- Index（索引）：抓取到的內(nèi)容被存儲在搜索引擎的數(shù)據(jù)庫中，作為后續(xù)查詢的基礎。
- Rank（排名）：根據(jù)內(nèi)容的相關性、質(zhì)量、網(wǎng)站結(jié)構等多個因素，將頁面按關鍵詞的優(yōu)先級排序。
那么明確好了它的原理之后，我們就知道想要做好 SEO 優(yōu)化，其核心就是：更清晰，快速的展示網(wǎng)站關鍵內(nèi)容。
那么具體怎么做呢？我們來看一下！
SEO 優(yōu)化方案
1. 確保關鍵內(nèi)容可被搜索引擎抓取
搜索引擎爬蟲依賴頁面的初始 HTML 結(jié)構進行抓取。
如果頁面的主要內(nèi)容是通過 JavaScript 動態(tài)加載的，可能會導致內(nèi)容缺失。特別是對于依賴用戶交互加載的內(nèi)容，如點擊或滾動，爬蟲通常無法模擬這些操作。
實踐方法
- 確保重要的內(nèi)容直接輸出到 HTML 中。
- 避免依賴用戶交互或延遲加載。
示例（Vue 中的服務端渲染）
使用 Nuxt.js 實現(xiàn) Vue 的服務端渲染，讓內(nèi)容直接輸出到 HTML：
// pages/index.vue
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
async asyncData() {
// 服務端拉取數(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 應用主要有以下三種渲染方式：
- 客戶端渲染（CSR）：所有內(nèi)容通過 JavaScript 動態(tài)生成，爬蟲可能無法完全抓取。
- 服務端渲染（SSR）：HTML 內(nèi)容在服務器生成，返回靜態(tài) HTML，爬蟲更友好。
- 靜態(tài)預渲染（Pre-rendering）：在構建時生成 HTML 文件，適合內(nèi)容更新較少的頁面。
實踐方法
- 使用 SSR 或 Pre-rendering 提高 SEO 表現(xiàn)。
- 針對需要動態(tài)交互的頁面，可以結(jié)合動態(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> 是搜索引擎理解頁面內(nèi)容的關鍵。如果這些標簽由 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)化內(nèi)部鏈接結(jié)構
內(nèi)部鏈接幫助爬蟲理解頁面結(jié)構和內(nèi)容關系。如果鏈接通過 JS 動態(tài)生成，爬蟲可能會忽略這些鏈接。
實踐方法
- 使用標準的
<a>標簽定義內(nèi)部鏈接。 - 避免完全依賴事件監(jiān)聽器（如
onClick）實現(xiàn)導航。
示例
// 避免這種方式：
<button @click="navigateTo('/about')">About Us</button>
// 推薦使用：
<router-link to="/about">About Us</router-link>5. 使用語義化的 HTML
語義化標簽能增強爬蟲對頁面內(nèi)容的理解。濫用 <div> 和 <span> 會降低頁面的可讀性。
實踐方法
- 用
<header>、<main>、<article>等結(jié)構化頁面內(nèi)容。 - 合理使用
<h1>到<h6>標簽，突出頁面層次。
示例
<header>
<h1>歡迎來到我的博客</h1>
</header>
<main>
<article>
<h2>最新文章</h2>
<p>內(nèi)容</p>
</article>
</main>
<footer>
<p>? 2024 程序員Sunday</p>
</footer>6. 避免對內(nèi)容的延遲加載
懶加載可以優(yōu)化用戶體驗，但如果懶加載的內(nèi)容是關鍵內(nèi)容，可能會導致爬蟲抓取不到。
實踐方法
- 優(yōu)先渲染首屏內(nèi)容。
- 使用 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，爬蟲無法正確解析頁面內(nèi)容。
實踐方法
- 確保 robots.txt 文件允許訪問關鍵資源。
- 檢查資源是否被錯誤屏蔽。
9. 構建結(jié)構化數(shù)據(jù)
結(jié)構化數(shù)據(jù)幫助搜索引擎更好地理解頁面內(nèi)容，并有機會在搜索結(jié)果中展示富文本卡片。
示例（JSON-LD 結(jié)構化數(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>
