没人问了，也没人做了？SEO 已经被“前端”除名了？？？

大家好，我是 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）能够高效抓取和理解网站内容，进而在索引中给出合理排名。

它的具体工作流程分为以下三大步：

1. Crawl（爬取）：搜索引擎爬虫访问网站，抓取页面内容、链接和资源。
2. Index（索引）：抓取到的内容被存储在搜索引擎的数据库中，作为后续查询的基础。
3. 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 应用主要有以下三种渲染方式：

1. 客户端渲染（CSR）：所有内容通过 JavaScript 动态生成，爬虫可能无法完全抓取。
2. 服务端渲染（SSR）：HTML 内容在服务器生成，返回静态 HTML，爬虫更友好。
3. 静态预渲染（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>