关于web前端开发过程中SEO优化的注意点

快来打我* 2022-05-19 07:25 194阅读 0赞

SEO优化通俗点说就是为了让网站在各大搜索引擎中更容易的被搜到，即提高搜索排行，从而提高网站流量的一个技术手段

在写web页面的时候，为了让网络爬虫更容易的搜索到页面，需要注意几个点：

html语义化

刚接触web前端开发的时候很奇怪，既然html标签可以通过css进行更改它的内置属性，为什么还有这么多的标签存在

<div>,<h1>,<span>,<strong>....

而现在，随着对前端的不断深入，才逐渐明白它的用处

语义化的html可以让开发者更容易看懂每一块代码的含义及其侧重点，同时，对于SEO优化也有帮助

网络爬虫在搜索的过程中会按着html语义去侧重搜索，

标准的符合W3C规范html能让网络爬虫更好的理解，从而提高网站的SEO优化水平。

在[http://www.w3school.com.cn/][http_www.w3school.com.cn]html篇中，有对每一个标签的语义都做了说明，需要的同学可以注意看下。

ifame

对于前端开发来说，ifame已经是很久之前的技术了，现阶段应该很少有前端开发者使用ifame（当然，在后台框架搭建中还是会使用到）

ifame退出前端舞台的理由我想应该就有一点，web中使用ifame，ifame中的内容网络爬虫是搜索不到的，所以对于ifame页面来说基本不存在SEO优化

建议前端开发中少用，（后台开发对这点到不在意，后台系统对于SEO优化没这需求吧）

js输出

对于网站中一些重要的文字或内容最好不要使用js输出生成html展现，因为网络爬虫对web中的js只会视而不见，所以用js输出过多的内容

会让网站的SEO优化水平降低，建议重要的信息不要用js输出（我还是挺喜欢用js去输出html的，被限制住~~~~）

alt属性

alt属性一般应用在<img>标签里，当图片无法正常加载时，alt属性设置的值就会显示出来作为解释文本

对于前端开发人员来说总感觉这个属性有点鸡肋，因为在开发过程中基本看不到这个属性的效果（PS：开发过程中一般情况都不会有加载图片失败的情况）

不过要注意，该加的属性还是要加上去的，网络爬虫是识别不了图片的，不管你的图片怎么炫怎么酷，在网络爬虫眼里终究只是一段code而已，而<img>

标签的alt属性在网络爬虫眼里就是图片的标志

<title>

<meta name="description" content="...">

<meta name="keywords" content="...">

合理的使用这三个对SEO也有很大的帮助，具体使用方法这里就不多说了，有兴趣的同学可以网上搜下

原文章链接地址：[https://www.cnblogs.com/alex-web/p/5003252.html][https_www.cnblogs.com_alex-web_p_5003252.html]

[http_www.w3school.com.cn]: http://www.w3school.com.cn/
[https_www.cnblogs.com_alex-web_p_5003252.html]: https://www.cnblogs.com/alex-web/p/5003252.html

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java Web开发中如何解决SEO优化问题?

在Java Web开发中，要解决SEO（搜索引擎优化）优化问题，可以遵循以下步骤： 1. **URL结构**： - 使用描述性的URL，避免使用动态生成的ID。

谁借莪１个温暖的怀抱￠/ 2024年12月09日 13:27/ 0 赞/ 19 阅读

相关 Java Web开发中的SEO优化问题：实例和解决策略

Java Web开发中的SEO（搜索引擎优化）优化是提高网站在搜索引擎中的可见性和排名的重要手段。以下是一些实例和解决策略： ### 实例1：动态URL问题**问题描述：**

待我称王封你为后i/ 2024年11月11日 14:45/ 0 赞/ 22 阅读

相关 WEB前端-搜索引擎工作原理与SEO优化

一、搜索引擎工作原理搜索引擎的工作分为三个阶段，即爬行，索引和检索 1、爬行 ![1731684-20190814153046726-1864177528.png]

布满荆棘的人生/ 2023年06月02日 09:17/ 0 赞/ 30 阅读

相关前端开发关于SEO需要注意那些

SEO（Search Engine Optimization），就是搜索引擎优化，是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为。在前端开

た入场券/ 2022年12月20日 08:41/ 0 赞/ 221 阅读

相关关于web前端开发过程中SEO优化的注意点

SEO优化通俗点说就是为了让网站在各大搜索引擎中更容易的被搜到，即提高搜索排行，从而提高网站流量的一个技术手段在写web页面的时候，为了让网络爬虫更容易的搜索到页面，需要注

快来打我*/ 2022年05月19日 07:25/ 0 赞/ 195 阅读

相关前端关于SEO与使用注意

前端关于SEO与图片使用注意原则：前端页面要尽可能提高页面在搜索引擎的曝光度 1. 优先使用语义化的html标签，因为语义化的标签对搜索更友好 2. 网页tit

太过爱你忘了你带给我的痛/ 2022年05月08日 23:46/ 0 赞/ 263 阅读

相关对于web前端 seo优化以及性能优化的一点认识

> seo优化 > > > 例如百度搜索引擎后台会派出[百度蜘蛛][Link 1]，全天候在海量数据里识别并抓取内容；再对内容进行筛选过滤，去掉低质量的内容；将筛

╰半橙微兮°/ 2022年05月08日 07:36/ 0 赞/ 312 阅读

相关前端seo优化

前端 seo 优化一、什么是seo优化： SEO是指通过采用易于搜索引擎索引的合理手段，使网站各项基本要素适合搜索引擎检索原则并且对用户更友好(Search

落日映苍穹つ/ 2021年09月18日 06:16/ 0 赞/ 483 阅读

相关关于web前端性能优化总结

1、从DOM结构和标签上来优化 ·使用语义化的标签，代码清晰简洁； ·减少Dom节点，增加渲染速度； ·使用W3C标准书写闭合小写的标签； ·给图片和tabl

偏执的太偏执、/ 2021年09月15日 14:04/ 0 赞/ 643 阅读

相关关于Web前端学习的六大过程

对于前端学习者来说，掌握必要的知识技能是一个必经的过程，那么对于前端来说，需要掌握哪些必备的技能呢？爱创乐育小编总结了下面六个：一，html 这个是最简单的，也是最根本

布满荆棘的人生/ 2021年09月08日 07:58/ 0 赞/ 386 阅读