一、SEO概述

1. 什么是SEO？

SEO（Search Engine Optimization）即搜索引擎优化，是通过技术手段和内容策略提升网站在搜索引擎自然搜索结果中排名的过程。其核心目标是让网站结构、内容和用户体验更符合搜索引擎的索引规则，从而获取更多免费流量。

2. 为什么前端需要关注SEO？

• 流量入口控制：超过70%的用户流量通过搜索引擎进入网站

• 技术实现基础：前端代码是搜索引擎爬虫直接解析的内容载体

• 用户体验关联：页面加载速度、移动适配等SEO指标直接影响用户留存率

• 商业价值提升：优化后的网站可降低获客成本，提升转化率（研究表明，搜索结果首位的点击率是第二位的2.5倍）

二、开发中应注意哪些

1. TDK元数据规范

TDK（Title、Description、Keywords）需与页面内容高度关联，且动态适配多端场景。并且这部分标准是不断变化的，如 Google 算法更新后，标题长度超过 60 字符的页面排名下降了 20% 左右（仅参考数据，实际上不同搜索引擎对标题显示的截断规则和排名权重存在一定差异，且排名受多种因素影响）。

(1) Title标签优化

<!-- 错误示例 -->

<title>首页 | 公司官网</title>

  

<!-- 正确示例 -->

<title>智能家居解决方案_智能门锁_全屋智能系统-XX科技</title>

规则：

• 长度控制在50-65字符（中文约18-25字）

• 主关键词前置，层级用英文短横线分隔

• 移动端优先显示核心信息

(2) Keywords设置

目前在 Google 等搜索引擎中，meta keywords 已经作用已经很小，更多只对部分搜索引擎有帮助。

<meta  name="keywords"  content="智能家居,智能门锁,全屋智能,智能家居系统">

规则：

• 关键词不超过5个，用英文逗号分隔

• 避免堆砌无关关键词（如"优惠,促销"等营销词）

• 栏目页采用"栏目名+核心长尾词"组合

(3) Description优化

<meta  name="description"  content="XX科技提供专业智能家居解决方案，涵盖智能门锁、全屋智能控制系统等产品，已服务1000+家庭用户，免费获取智能家居设计方案。">

规则：

• 长度控制在150字符内

• 包含主关键词和行动号召语

• 避免重复Title内容

这部分提到的关键词，也是非常重要的一部分内容，包括关键词的筛选、数据分析、效果验证等，不同的网站也会有不同的处理，如小网站因为低流量，就可以把长尾关键词的优化放到低优先级。由于关键词研究大量工作并不在前端，就不过多展开了。

2. HTML语义化标签

(1) 标题及结构层级规范

<h1>智能家居解决方案</h1>

<h2>核心产品</h2>

<h3>智能门锁系列</h3>

<h3>环境控制系统</h3>

<h2>成功案例</h2>

原则：

• 每个页面H1标签谨慎滥用

• 层级关系严格递进（H1→H2→H3）

• 避免跳过层级（如H1直接接H3）

• 还可用<section>、<article>等语义标签的嵌套，提升内容结构化

(2) 图片优化

<!-- 基础优化 -->

<img  src="smart-lock.jpg"  alt="XX智能门锁V3-Pro版"

loading="lazy"  width="800"  height="600">

  

<!-- 高级优化（WebP格式+响应式） -->

<picture>

<source  srcset="smart-lock.webp"  type="image/webp">

<img  src="smart-lock.jpg"  alt="支持指纹识别的智能门锁">

</picture>

规范：

• 必须添加alt属性（描述图片功能而非外观）

• 使用WebP等新型图像格式

• 添加width/height属性防止布局偏移（CLS优化）

3. 移动优先优化

(1) Viewport设置

<meta  name="viewport"  content="width=device-width, initial-scale=1.0,

maximum-scale=5.0, minimum-scale=1.0, viewport-fit=cover">

(2) 响应式布局示例（CSS）

/* 移动优先写法 */

.product-card {

padding: 1rem;

margin-bottom: 2rem;

}

  

@media (min-width: 768px) {

.product-card {

display: grid;

grid-template-columns: 300px  1fr;

}

}

核心指标：

• LCP（最大内容渲染）<2.5秒

• FID（首次输入延迟）<100ms（Chrome 团队已提升 INP 作为 Core Web Vitals 中的一项新的响应性指标，并从 2024 年 3 月起取代 FID）

• CLS（累积布局偏移）<0.1

4. 技术优化方案

(1) 预加载关键资源

<link  rel="preload"  href="critical.css"  as="style">

<link  rel="preload"  href="main.js"  as="script">

(2) 结构化数据标记（Schema）

<script  type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "Product",

"name": "智能门锁V3-Pro",

"image": "https://example.com/smart-lock.jpg",

"description": "支持指纹/密码/NFC三种开锁方式...",

"brand": {

"@type": "Brand",

"name": "XX科技"

},

"offers": {

"@type": "Offer",

"priceCurrency": "CNY",

"price": "1999"

}

}

</script>

支持类型：

• 产品页：Product

• 文章页：Article

• 面包屑导航：BreadcrumbList

5. 高级优化策略

(1) 动态内容SEO处理（SPA）

// Vue.js路由配置示例

const  router = new  VueRouter({

mode:  'history',

routes: [...],

scrollBehavior(to, from, savedPosition) {

if (savedPosition) {

return  savedPosition

} else {

return { x:  0, y:  0 }

}

}

})

  

// 添加Prerender预渲染

npm  install  prerender-spa-plugin --save-dev

(2) AMP加速页面

AMP使用率在下降，优先采用Web Vitals优化，AMP仅用于特定媒体场景

三、工具与监控

1. 推荐工具

1. 代码检测 | Lighthouse v12.0 | SEO评分+性能分析

2. 关键词分析 | SEMrush/Ahrefs | 长尾词挖掘

3. 结构化数据验证 | Google Structured Data | Schema标记检测

4. 日志分析 | Screaming Frog SEO Spider | 爬虫模拟与死链检测 ，分析标签完整性

2. 监控代码示例

<!-- 百度统计 -->

<script>

var  _hmt = _hmt || [];

(function() {

var  hm = document.createElement("script");

hm.src = "https://hm.baidu.com/hm.js?xxxxxxxx";

var  s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(hm, s);

})();

</script>

  

<!-- Google Search Console -->

<meta  name="google-site-verification"  content="xxxxx">

四、最新演进

1. SEO趋势

• AI生成内容检测：比如需添加<meta name="generator" content="human-writer">声明（目前还并非一个公认或普遍执行的规范）

• AI优化SEO: 引入AI工具，如智能内容生成、动态关键词优化等,提升SEO的精准性与效率

• 视频SEO优化：使用<video>标签的structured data标记

• Core Web Vitals 2.0：新增INP（Interaction to Next Paint）指标（衡量用户交互（如点击或按键）后到下次在页面上看到视觉更新之间经过的时间）

2. 避坑行为清单

• 禁止使用display:none隐藏关键词

• 禁止滥用JSON-LD重复标记相同内容

• 禁止未声明AI生成内容（违反Google 准则）

• 禁用iframe框架加载核心内容，防止爬虫抓取失败

• 定期审核robots.txt规则，避免误屏蔽重要目录

五、总结

通过遵循语义化HTML编码规范、优化核心元数据、实施移动优先策略以及利用结构化数据等前沿技术，前端开发者可显著提升网站的搜索引擎友好度。可以结合工具链持续监控优化效果，关注每年核心算法更新（如谷歌和百度的重要算法迭代），保证SEO策略的稳定有效。

推荐阅读

• 《SEO 实战密码》
• Google《SEO Starter Guide》

最近优化项目性能时发现，之前为了省事直接全量引入了ElementPlus（明明只用了个日历组件！），首页直接白嫖了1MB资源包。必须按需加载！！

成果如下：资源体积-1MB / FCP-0.3s，记录关键步骤

---

解法核心：

用两个插件（unplugin-auto-import负责自动导入API，unplugin-vue-components负责自动注册组件），只打包你用到的组件和样式。

1. 安装全家桶

pnpm add element-plus  # 库本体  
pnpm add -D unplugin-auto-import unplugin-vue-components  # 核心工具：自动导API+组件  

2. Vite配置抄作业（10 秒搞定）

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({ resolvers: [ElementPlusResolver()] }), // 自动导API
    Components({ resolvers: [ElementPlusResolver()] })    // 自动导组件
  ]
})

3. 中文配置（如果需要）

由于 Elment-Plus 默认是英文版的，我们还需要给他加个中文配置

只需要用ElConfigProvider来给他进行个笼罩，配置 locale 属性即可。

// App.vue
<template>  
  <el-config-provider :locale="zhCn">  <!-- 这里塞中文包 -->  
    <router-view />  
  </el-config-provider>  
</template>  
  
<script setup>
import { RouterView } from 'vue-router'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
</script>

Rollup 是一个用于 JavaScript 的模块打包工具，旨在通过优化打包过程，提高代码的执行效率。本文主要介绍 Rollup 的基本使用，并结合实战讲解如何基于Rollup 打包 js库。

通过一个简化的 Koa 类来理解 Node.js 的 http 模块以及 Koa.js 框架核心的中间件机制，特别是其著名的“洋葱模型”和异步流程控制。

什么是流式数据处理？ 流式数据处理（Streaming Data）指逐步接收并处理数据片段的技术，无需等待全部数据加载完成。适用于大文件下载、实时日志、AI生成报告等场景，可显著降低内存占用并提升用户

这个项目基于Ollama + Node技术栈，通过搭建一个基于本地大模型服务的简易AI聊天应用，从零开始摸索，逐步构建自己的全栈开发技能。

看完这篇文章，你将能回答以下： Vue3是如何拦截通过索引或者length属性 修改/访问数组？ Vue3如何拦截数组的for in遍历？ Vue3如何拦截数组for …… of遍历？

使用vue-cli创建，脱离HBuilderX（真的很难用） uni-app这里选择vue3 + typescript的版本 先把空壳拉下来npx degit dcloudio/uni-prese

一、确定布局情况         我们核心功能做完以后，我们就要确定布局部分了，根据思维导图我们知道有侧边栏的情况，而且根据屏幕尺寸的情况下 尺寸过小的情况下我们需要的是抽屉的的组件 中心布局不改变，

Zustand是一个轻量级、简洁且强大的React状态管理库（Vue用户请使用zustand-vue）,旨在为您的React项目提供更简单、更灵活的状态管理方式。与其他状态管理库相比（如Redux/M

油猴脚本已加载了jQuery库，所以我们做的时候直接用就好了，不需要额外再去加载（不需要额外再去加载 // @require https://code.jquery.com/jquery-2.1.4.

🎵 键盘钢琴 效果：按下A-S-D-F-G-H-J-K键播放钢琴音阶 🐍 贪吃蛇小游戏 效果：经典贪吃蛇游戏（键盘方向键控制） 🖼️ 图片像素化动画 效果：点击图片触发像素化/还原动画 🧩 文字迷宫游

一、MainTemplate 与 ChunkTemplate 的作用 1.1 核心职责与源码定位 在 Webpack 中，MainTemplate（源码：lib/MainTemplate.js）和 C

hexo基础配置 首先贴上官方文档地址 https://hexo.io/zh-cn/ 安装hexo 安装hexo很简单： 全局安装（一般我们都用全局安装） 局部安装 创建自己的博客项目 首先建一个专门

Css浮动 通过浮动操作float，可以使dom元素脱离文档流，在页面上具备居左、中和右的效果特点 移动后的元素，会导致其他元素随之重新排列在页面上的顺序位置，就相当于你不在的位置，别人会抢占 浮动通

Css Css基本概念 什么是Css? css指层叠样式表(Cascading Style Sheets），通俗的理解就是可以为标签元素带上颜色、大小、粗细状态等表现形式 样式通常存储在样式表中，也可

使用`uniapp run` 这款 VSCode 插件来实现 VSCode 中进行开发 Uni-app 项目

视频播放 使用 HTML5 的

在 JavaScript 编程中，执行上下文是一个至关重要却又常被忽视的概念。它如同幕后的导演，掌控着代码的执行流程和变量的管理。