前端之SEO搜索引擎优化

简介: 前端之SEO搜索引擎优化

什么是SEO

SEO(search engine optimization)搜索引擎优化

SEO是端开发人员在网站设计和开发过程中,通过优化HTML、CSS、JavaScript等前端代码,以及网站结构、页面布局、内容结构、URL等方面,来提高网站在搜索引擎中的排名和可见性。

通过优化网站结构,可以提高网站的可用性和导航性,从而更容易为搜索引擎蜘蛛抓取和索引网站内容。

SEO 优化的方法

  • 合理的title、description和keywords

title:只强调重点,重要关键词出现不要太多,每个页面title要不一样。

description:相当简述自己的重要内容,长度要合理,每个页面description要不一样。

keywords:描述出几个重要关键词

亿点小知识:以上的三个方法 不要过多堆关键词,反而会适得其反合理突出即可

语义化书写HTML代码,符合W3C标准

万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合。

网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布。

合理的使用标签H1、H2、a、header、nav、nav等标签

<h1>标题</h1>
<h2>副标题</h2>
<a scr=''>链接</h2>
  • 为图片加上alt属性
    alt 属性可以在图片未成功显示时候,使用文本来代替图片的呈现,使爬虫可以抓取到这个信息。
  • icon 图标
  • 后缀.ico的图标格式
<link rel="shortcut icon" href="log.ico" type="image/x-icon">

保留文字效果

利用CSS截取字符

提升网站速度

为图片设置高度和宽度,可提高页面的加载速度

为静态资源文件增加过期时间,让用户通过本地缓存来更快的访问网站

减少大改版的频率

压缩、格式化代码

使用CDN 网络,可加快用户访问速度

启用GZIP压缩,浏览速度变快,搜索引擎的蜘蛛抓取信息量也会增大

做 404 页面,不仅提高蜘蛛体验,也提高用户体验

服务端渲染需要SEO的HTML页面

扁平化网站结构

扁平结构是与树状结构对立的一种网页结构,网页之间并没有明显的层级关系,在栏目或组织结构已明确的情况下,通过减少管理层次的组织结构。

简单来说就是少量的栏目层级划分,并直接已内容页层级进行展现,有利于提高信息的快速传递,使尽快的发现信息所展示的问题

结尾

SEO优化其实重要的是内容质量、网站速度、高质量的外部链接和适度的优化,才是网站的曝光和流量的根本

2023年6月6日,百度官方宣布了一项重要的收录新规则:

1.收录质量要求更高:百度将进一步提升收录质量要求,对于内容质量低下、存在严重问题的网站将不再收录。

2.收录速度更快:百度将加强爬虫效率和数据处理能力,提高收录速度。

3.收录深度更大:百度将逐步提升对网站深层次内容的收录能力,进一步提高搜索结果的全面性和准确性。

以上就是前端之SEO搜索引擎优化感谢大家的阅读

如碰到其他的问题 可以私下我 一起探讨学习

如果对你有所帮助还请 点赞 收藏谢谢~!

关注收藏博客 作者会持续更新…

相关文章
|
前端开发 搜索推荐 UED
前端需要注意哪些 SEO (详细)
前端需要注意哪些 SEO (详细)
241 0
|
搜索推荐 前端开发 定位技术
前端开发人员SEO优化技术方案
不同的搜索引擎提供了服务后台常见功能来优化网站搜索
266 2
|
前端开发 搜索推荐 JavaScript
前端SEO优化的实用指南
前端SEO优化的实用指南
875 0
|
搜索推荐 前端开发 JavaScript
前端SEO的知识,你get到了吗
seo是前端工程师需要掌握的一些知识,但是现在都是前后端分离开发,客户端渲染,而国内百度的搜索引擎又不太能打,因此,对这方面没怎么深入,后来因为学习了一些服务端渲染框架next/nuxt,才重新进行了一些了解
|
数据采集 JavaScript 前端开发
前端面试题Vue 项目如何进行 SEO 优化
前端面试题Vue 项目如何进行 SEO 优化
552 0
|
前端开发 搜索推荐 Java
网站前端页面优化,对SEO的影响,务必要落实到位
1、页面UI设计 UI即User Interface(用户界面)的简称。泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等。UI设计主要指界面的样式,美观程度。而使用上,对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。 页面UI与SEO结合设置规范 UI可以让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。 UI需要有效的结合SEO,简单的例子:图片和文字同样可以呈现用户体验,但是只有文字可以被蜘蛛抓取,图片被抓取后,不会成为页面描述,也不会成为锚文本。
314 0
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1068 14
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
358 0
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
492 6

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    578
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    238
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    226
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    164
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    275
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    408
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    176
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    112
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    191
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    261