浅论前端页面优化对SEO的重要性

亦凉 2022-12-05 05:09 264阅读 0赞

“前端开发”，即“HTML、CSS、JS”的统称。用户在浏览器，可视化屏幕上浏览到的数据布局格式，即为前端的控制效果。一份高质量的前端代码，不仅可以让用户赏心悦目，留住客户，还会有利于“蜘蛛”的爬取和收录。

### 性能角度优化： ###

网页的性能主要体现在“加载速度”和“浏览流畅度”两个方面，主要方法有：\*\*减少页面请求、CDN加速、精简代码（一个页面最好不要超过100k）、压缩传输（js css压缩）、引用新框架等、合理设置http缓存、图标处理成雪碧图、图片懒加载、流加载页面、减少cookie传输 \*\*

### 结构角度优化： ###

#### TDK是页面优化最重要的部分 ####

[SEO网站优化从小白到专业][SEO]小编的这篇博客有对TDK的详情介绍，以及如何编写优质的TKD.

#### 巧用meta适配提升用户体验 ####

[前端常用meta标签属性总结大全][meta]小编的这篇博客有对meta标签的详细总结，请自行查询学习，不足之处还请多多指出。

#### 采用HTNL5 语义化标签 ####

1.  header 标签定义文档的页眉（介绍信息）。一般放置网站的站点名称以及LOGO和导航栏。搜索引擎更容易识别站点的类型。
2.  nav标签定义导航链接的部分。也就是栏目或者频道的链接。搜索引擎可以更好了解网站的信息架构，分类等。良好的信息架构，更有利于蜘蛛的爬行和权重的分布。
3.  footer标签定义文档或节的页脚。放置页脚导航，一些比如公司介绍，联系我们之类的信息。一般来说对网站比较不重要，有可能搜索引擎会降低其位置的权重。
4.  section该元素用来表示网页中不同的分区。优势体现在每个部分都可以有其独立的HTML标题。这可以让搜索引擎更好的了解网页的结构是如何划分的。搜索引擎可能会根据网页中的section标签找出其信息架构。（同左撇子）
5.  article定义文章区域，可以更有利于搜索引擎识别网页的内容以及判断相关性。，
6.  aside定义页面内容之外的内容，在左侧或右侧边栏。比如知乎右侧的“相关问题”就属于aside区域。aside标签的文字信息与article标签区域的文字信息最好是相关。可能会影响到该页面和目标页面的排名（没有article与之对应，最好不用）。
7.  还有一些小标签SEO也会·识别：tag标签顾名思义就是文章标签词、time标签顾名思义就是页面发布时间（该标签不会在任何浏览器中呈现任何特殊效果）、audio定义音频 、video定义视频 等等 …

#### Flash不利于SEO优化 ####

通过小编查询多个文档资料，汲取前辈经验得出结论**Flash不利于SEO优化**。

#### 少用iframe ####

搜索引擎不会抓取iframe中的内容。

#### 巧用h1-h6标签 ####

页面中h1标签权重是比较高度，仅次于title,所有页面中h1标签应该**有且仅有一个**，可以包裹logo强调品牌，文章段落二级标题最好加上h2,其他 H标签，适宜使用。

#### 面包屑 ####

网站添加“**面包屑**”导航也有利于搜索引擎的爬行，更利于页面的抓取和索引效率。

#### 导航优化 ####

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

#### 图片的Alt属性 ####

页面配图（非背景图）的时候记得加“Alt”属性，有利于站内图片被搜索引擎的检索，对提升网站的曝光度有一定作用，同时也对页面的seo排名有一定影响。

#### a标签的title属性 ####

a标签页类链接，需要加**title**属性加以说明，让访客和“蜘蛛”知道。

#### a标签的rel="nofollow"属性 ####

a标签往非友情链接的外链跳转时，需加 rel=“nofollow” 属性，因为蜘蛛爬到其他网站后就不会再回到本网站。

#### 内链小技巧 ####

内链应采用绝对路径，以减少服务器的相应时间

<a href="www.huanghepiao.com.com">黄河票务网</a>
    
    // 不宜采用
    <a href="/index.html">首页</a>

#### img标签需要设置大小 ####

前景图片 要定义大小、不然会造成页面重新渲染，影响加载速度

#### b标签和strong标签起强调作用 ####

内容关键词加黑标签请用b标签(strong标签可以用来强调具体页面内容)。B标签往往用在关键词上，一个页面只要加2-5次就差不多了，具体还要根据页面大小而定。

#### div标签的真实作用 ####

div和span是容器标签，无语义，不要什么都用div、span，尽量合理的使用ul、ol、li、table等

#### 首页链接数量优化 ####

网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内容页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

#### 文本特殊符号 ####

#### 巧用CSS布局 ####

页面布局的原则是越重要的内容越靠前，巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。

#### 论display:none;的重要性 ####

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

#### JS对优化的误区 ####

1.  页面中重要的内容不要用**JS**输出，因为**蜘蛛不识别**
2.  js代码进行DOM操作，应尽量放在body结束标签之前，html结束标签之后。

[SEO]: https://blog.csdn.net/xkqbaiyuan/article/details/108415685
[meta]: https://blog.csdn.net/xkqbaiyuan/article/details/102586946