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>
