网站由前端和后端组成,前端呈现给用户。本文将告诉您前端页面代码的优化,当然仍然是基于seo优化的。
就前端而言,如果做伪静态处理,基本上是普通的html代码,正常情况下,这些页面内容是通过页面模板输出的。那么前端页面代码需要优化哪些方面呢?让我们从以下几个方面来看。
1.代码位置
代码的位置处理实际上是一个小细节,但意义并不小。百度搜索引擎优化指南明确指出,页面应尽可能优先考虑主要内容,什么是主要内容?举个简单的例子,文章页面,文章的具体内容是主要内容,其他像边栏.相关内容等模块是附加内容。
部分网站页面使用两栏,左边是边栏,右边是页面主体,前端代码使用从上到下.从左到右的顺序。这种代码处理对用户来说并没有错,但对于爬取代码的搜索引擎来说,就是先抓取次要内容,再抓取主要内容,对seo就优化而言,这是不合理的。
其实解决代码位置的问题很简单,现在绝大多数网站都在使用div+css,我们只需要稍微调整一下代码!例如,通过通过div的float属性处理左右位置,将右侧内容块放置在页面模板上。
2.头部冗余代码
一些开源网站程序在添加了大量的代码,如果你根本看不到源代码,这对用户来说没什么,但有些代码是完全多余的,甚至有些代码使用不当也会导致一些不必要的错误。
笔者建议,代码尽量简单,不能直接丢弃,另外,不确定如何使用代码也果断放弃。简化代码有利于页面打开的速度。
3.结构化和H标签
这里的结构化主要针对H标签和div区块,例如,H标签可以标记页面中哪些内容是最重要的,哪些是次要的。关于H标签,建议您阅读如何使用页面H标签。
至于div其实很容易理解,比如把一些相关性强的内容放在一个位置div其中,它可以与其他内容清楚地区分开来。举个最简单的例子,或者说文章页面,我们可以把文章内容放在一个div中间,将相关推荐内容放入一个div中间,放一个边栏div经过这样的处理,整个页面代码具有明显的架构化和层次感。
使页面代码结构化,设置H标签,目的是帮助搜索引擎更好地识别和掌握页面内容,这是帮助搜索引擎更好地识别和掌握页面内容。seo优化是有益的。
4.尽量少用js
为了让页面看起来更酷,一些朋友用了很多js代码,这么酷的效果已经达到了,但是忽略了这些特效的代码会极大地影响页面的打开速度!seo优化是极其不利的。
5.css外调
css代码应该放在一个独立的文件中,因为css文件中的许多样式同时被不同类型的页面调用,设置独立的文件,以确保页面代码的清洁,避免代码冗余。
PS:最近有一种说法,除了公共部分css代码,单独使用的页面css代码直接写在页面模板中,简化css文件代码,正在调用中css减少代码渲染时间,提供页面打开速度。这在理论上是可行的,但它会增加工作量。让我们权衡一下!
6.图片处理
关于图片的处理注意两点,一是添加图片alt属性,帮助搜索引擎识别图片内容;二是设置尺寸,特别是在设置尺寸时,特别是在设置尺寸时,pc端,设置尺寸,打开页面后减少渲染过程。
在前端页面代码优化中还有很多小细节,我们需要记住,可以提高页面打开速度,帮助搜索引擎识别页面内容都值得研究。
2022-04-12
2022-04-12
2022-11-04
2022-12-19
2022-11-29
2022-12-29
2022-11-25
2022-11-09
2022-06-14
2022-11-08