阿卡不拉阿卡不拉
Vue3
阿卡的博客
Vue3
阿卡的博客
  • Vue3

    • 快速入门

      • 搭建工程 👌
      • 模板语法
      • 响应式基础
      • 响应式常用 API
      • 计算属性
      • 类与样式绑定
      • 条件和列表渲染
      • 事件处理
      • 表单处理
      • 生命周期
      • 侦听器
      • 组件介绍
      • Props
      • 自定义事件
      • 组件v-model
      • 插槽
      • 前端路由介绍
      • KeepAlive内置组件
      • 状态管理库
      • 组件库介绍
    • 深入本质

      • 虚拟DOM本质
      • 模板的本质
      • 组件树和虚拟DOM树
      • 数据拦截的本质
      • 响应式数据的本质
      • 响应式的本质
      • 响应式和组件渲染
      • 实现响应式系统 1
      • 实现响应式系统 2
      • 图解EFFECT
      • 实现响应式系统 3
      • 手写computed
      • 手写watch
      • 指令的本质
      • 插槽的本质
      • v-model的本质
      • setup 语法标签
      • 组件生命周期
      • keepalive 生命周期
      • keepalive的本质
      • key的本质
    • 细节补充

      • 【Vue】属性透传
      • 【Vue】依赖注入
      • 【Vue】组合式函数 👌
      • 【Vue】自定义指令
      • 【Vue】插件
      • 【Vue】Transition
      • 【Vue】TransitionGroup
      • 【Vue】Teleport
      • 【Vue】异步组件
      • 【Vue】Suspense
      • 【Router】路由模式
      • 【Router】路由零碎知识
      • 【Router】路由匹配语法
      • 【Router】路由组件传参
      • 【Router】内置组件和函数
      • 【Router】导航守卫
      • 【Router】过渡特效
      • 【Router】滚动行为
      • 【Router】动态路由
      • 【State】通信方式总结
      • 【State】Pinia 自定义插件
      • 【场景】封装树形组件
      • 【场景】自定义 ref 实现防抖
      • 【场景】懒加载
      • 【场景】虚拟列表
      • 【场景】虚拟列表优化
      • 【第三方库】VueUse
      • 【第三方库】vuedragable
      • 【第三方库】vue-drag-resize
      • 【第三方库】vue-chartjs
      • 【第三方库】vuelidate
      • 【第三方库】vue3-lazyload
      • 【场景】Websocket 聊天室
      • 【Vite】✨ 认识 Vite👌
      • 【Vite】配置文件 👌
      • 【Vite】✨ 依赖预构建 👌
      • 【Vite】构建生产版本 👌
      • 【Vite】环境变量与模式
      • 【Vite】CLI
      • 【Vite】Vite 插件
  • 笔面试

    • HTML

      • HTML 面试题汇总
      • 文档声明
      • 语义化
      • W3C 标准组织
      • SEO
      • iframe
      • 微格式
      • 替换元素
      • 页面可见性
    • CSS

      • CSS 面试题汇总
      • CSS 单位总结
      • 居中方式总结
      • 隐藏元素方式总结
      • 浮动
      • 定位总结
      • BFC
      • CSS 属性计算过程
      • CSS 层叠继承规则总结
      • @import 指令
      • CSS3 calc 函数
      • CSS3 媒体查询
      • 过渡和动画事件
      • 渐进增强和优雅降级
      • CSS3 变形
      • 渐进式渲染
      • CSS 渲染性能优化
      • 层叠上下文
      • CSS3 遮罩
    • JavaScript

      • JavaScript 面试题汇总
      • ✨ let、var、const 的区别
      • JS中的数据类型
      • 包装类型
      • 数据类型的转换
      • 运算符
      • ✨ 原型链
      • ✨ this 指向
      • ✨ 垃圾回收与内存泄漏
      • ✨ 执行栈和执行上下文
      • ✨ 作用域和作用域链
      • ✨ 闭包
      • DOM 事件的注册和移除
      • DOM 事件的传播机制
      • 阻止事件默认行为
      • 递归
      • ✨ 属性描述符
      • class 和构造函数区别
      • 浮点数精度问题
      • 严格模式
      • ✨ 函数防抖和节流
      • ✨ WeakSet 和 WeakMap
      • ✨ 深浅拷贝
      • 函数柯里化
      • Node 事件循环
      • 尺寸和位置
    • 浏览器

      • 浏览器面试题汇总
      • ✨ 浏览器的渲染流程
      • ✨ 资源提示关键词
      • 浏览器的组成部分
      • IndexedDB
      • ✨ File API
      • ✨ 浏览器缓存
      • ✨ 浏览器跨标签页通信
      • Web Worker
    • 网络

      • 网络面试题汇总
      • 五层网络模型 👌
      • 常见请求方法 👌
      • ✨cookie👌
      • 面试题
      • 加密
      • ✨JWT👌
      • ✨ 同源策略及跨域问题 👌
      • 文件上传
      • ✨ 输入 url 地址之后
      • 文件下载
      • ✨ session
      • ✨ TCP
      • ✨ CSRF 攻击
      • ✨XSS 攻击 👌
      • ✨ 网络性能优化
      • 断点续传
      • 域名和 DNS
      • SSL、TLS、HTTPS 的关系
      • ✨ HTTP 各版本差异 👌
      • HTTP 缓存协议
      • ✨ WebSocket
    • 工程化

      • CMJ 和 ESM
      • npx
      • ESLint
    • Vue2

      • Vue 面试题汇总相关
      • 组件通信方式总结
      • 虚拟 DOM
      • v-model
      • 数据响应式原理
      • diff
      • 生命周期详解
      • computed
      • 过滤器
      • 作用域插槽
      • 过度和动画
      • 优化
      • keep-alive
      • 长列表优化
      • 其他 API
      • 模式和环境变量
      • 更多配置
      • 更多命令
      • 嵌套路由
      • 路由切换动画
    • Vue3

      • ✨ Vue3 整体变化 👌
      • ✨ Vue3 响应式变化 👌
      • ✨ nextTick 实现原理 👌
      • 两道代码题 👌
      • Vue 运行机制
      • 渲染器核心功能
      • 事件绑定与更新

SEO

经典真题

  • 请描述下 SEO 中的 TDK?

什么是 SEO?

SEO 由英文 Search Engine Optimization 缩写而来,中文意译为“搜索引擎优化”。

其实叫做针对搜索引擎优化更容易理解。它是指从自然搜索结果获得网站流量的技术和过程,是在了解搜索引擎自然排名机制的基础上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中的关键词自然排名,获得更多流量,从而达成网站销售及品牌建设的目标。

如何进行 SEO 优化工作?

有的同学第一反应:给钱。

虽然,国内的百度搜索引擎,确实存在给钱就把你排在前面的情况,但是在不给钱的情况下,我们也能够通过一些优化手段来提升页面的权重,从而使我们的页面获取更多流量。

下面就介绍一些常见的 SEO 优化手段。

整个 SEO 工作大致可以分为内部优化和外部优化。

内部优化

1. 合理的 title、description、keywords

这个就是上面经典面试题中出现的 TDK,其实就是这 3 个单词的缩写。

  • title:浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到,搜索引擎在抓取网页时,最先读取的就是网页标题,所以 title 是否正确设置极其重要。title 一般不超过 80 个字符,而且词语间要用英文 “-” 隔开,因为计算机只对英语的敏感性较高,对汉语的敏感性不高。

  • description:也就是网页的内容摘要,这是对于一个网页的简要内容概况。description 一般不超过 150 个字符,描述内容要和页面内容相关。

  • keywords:主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此 keywords 的每个词都要能在内容中找到相应匹配,才有利于排名。keywords 一般不超过 3 个,每个关键词不宜过长,而且词语间要用英文 “,” 隔开,尽量将重要的关键字靠前放。

2. 语义化的 HTML 代码,符合 W3C 规范

语义化代码能够让搜索引擎容易理解网页,即使脱去了 CSS 这一层外衣,整个网页的结构也是清清楚楚的,无论是搜索引擎还是阅读者,都能够很容易的分辨网页的结构。

关于语义化的具体内容,可以参阅《语义化》章节。

3. 非装饰性图片必须加 alt

img 标签的 alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。

例如:<img src="/xxx.jpg" alt="海尔官网-双门冰箱" />

alt 标签的作用:

  • 增强内容相关性:它是可以利用汉字介绍文章内容的,对于一些特定的企业产品,由于视觉的体验,它往往是少文字的。
  • 提高关键词密度:在操作企业站的时候,我们经常遇到是站点首屏一个大的横幅 banner,几乎占用了首页的大部分页面,为了有效的提高首页核心关键词密度,我们只能利用一切办法增添关键词,比如:在图片的 alt 标签中添加。

4. 对于不显示的对象谨慎使用 display:none

对于不想显示的文字内容,应当设置 z-index 或设置到浏览器显示器之外。因为搜索引擎会过滤掉 display:none 其中的内容。

5. 重要内容 HTML 代码放在最前

索引擎抓取 HTML 顺序是从上到下,所以我们尽量将重要的内容放在前面,保证重要内容一定会被抓取。

6. 少用 iframe

少用或者尽量不用 iframe,因为搜索引擎不会抓取 iframe 中的内容

优化的细节还有很多,更多细节可以参阅这篇博文:https://blog.csdn.net/yanyihan16/article/details/89209436?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.control

外部优化

外部优化主要是指放友情链接和外链。好的友情链接可以快速的提高网站的权重,高质量的外链,会给你的网站提高源源不断的权重提升。另外,就是要向各大搜索引擎登陆入口提交尚未收录站点。

真题解答

  • 请描述下 SEO 中的 TDK?

在 SEO 中,所谓的 TDK 其实就是 title、description、keywords。

  • title:浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到,搜索引擎在抓取网页时,最先读取的就是网页标题,所以 title 是否正确设置极其重要。title 一般不超过 80 个字符,而且词语间要用英文 “-” 隔开,因为计算机只对英语的敏感性较高,对汉语的敏感性不高。
  • description:也就是网页的内容摘要,这是对于一个网页的简要内容概况。description 一般不超过 150 个字符,描述内容要和页面内容相关。
  • keywords:主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此 keywords 的每个词都要能在内容中找到相应匹配,才有利于排名。keywords 一般不超过 3 个,每个关键词不宜过长,而且词语间要用英文 “,” 隔开,尽量将重要的关键字靠前放。

-EOF-

最近更新:: 2025/7/11 12:50
Contributors: AK
Prev
W3C 标准组织
Next
iframe