关键词：
SEO是 search Engine Optimization （搜索引擎优化）
SEO：
①白帽SEO（普通SEO做的优化）
- 网站标题、关键字、描述
- 网站内容优化
- Robot.txt文件
- 网站地图
- 增加外链引用
②黑帽SEO
- 哥们你不做那种（嘻嘻）网站应该不太需要吧！
现在我说说前端工程师的SEO
①网站结构布局
- 扁平化结构
- 控制首页链接数量（中小型网站<=100）
- 目录层次不要太复杂（一般不要超过三层 三层之后基本很难被爬到啦）
- 根据内容使用合理的 HTML标签
- 面包屑导航（ 有人问过我-我都不知道怎么回答了在这里贴个图自己面壁思过一下吧
） - 对于图片一定要记得设置title alt 等属性
- 分页使用 首页 1 2 3 4 5 ... 尾页 的模式 ...通过下拉列表去做吧
- 还有很多...
②网页代码优化
- <title>标题
- <meta keywords>关键字
- <meta description>网页描述
- 代码语义化
- 尽量不要使用iframe框架
以下两点不属于SEO 但是对于前端工程师至关重要
一、加载
①你需要了解当你输入网页地址后 敲回车后发生什么
- 通过DNS按照http协议解析域名
- 发起TCP的3次握手
- 在建立TCP连接后发起http请求
- 服务器响应http请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的资源（如js脚本、css样式、图片资源等)
- 浏览器对页面进行渲染呈现给用户
二、渲染
- 外部样式会阻塞后续脚本的执行，直到外部样式加载并解析完毕
①浏览器解析html源码、然后创建一个DOM树
②浏览器解析css代码，并计算出最终的样式-css rules
③构建出DOM树，并计算出样式数据后，就会构建一个渲染树（render tree）
渲染树和DOM树很相似，只是会把DOM树中不需要渲染的节点忽略掉，比如：header、display：none 等。另外一点不同是会在节点上存储对应的css样式。
④渲染树构建好了就可以绘制到屏幕上了
一下提供一个简单的html和css渲染图 帮助你们理解一下 （我把我收藏的图贴上去 作图作者我忘了叫啥啦 谁知道给我说一下我！我们一起谢谢人家）
下面还有季诗筱的 美女 提供的一个html js css的渲染过程
有兴趣的同学可以 搜索 css森林 更深入的了解一下 搞明白了你也就成大神啦！
还有一些别人总结好我就直接拿过来撑撑场面啦 ---这也是之前存储的资源现在不知道是哪个大神总结的 在这里表示对大神的膜拜
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
这是一位大神级的人物总结的 我搬过来撑场面 如有侵权请联系我 我可以删除
小伞技术有限 欢迎各种屌丝+高富帅+白富美 多提意见 和 指正!
06前端需要注意哪些seo
【06】前端需要注意哪些SEO01，合理的title，description，keywords。02，语义化的HTML代码。好处，让搜索引擎更好搜索。03，重要的HTML内容放前面。04，重要的内容，不要用JS输出。爬虫不会执行JS获取内容。05，少用iframe。搜索引擎不... 查看详情
前端seo优化
参考链接：http://www.cnblogs.com/EnSnail/p/5671345.html博客园链接：https://www.zhihu.com/question/21658448/answer/18903129来源：知乎以上链接方法写的很详细补充：1.增加网页的文字，如果不是个性字体，都可以将图片设为背景，自己用css写文字样... 查看详情
前端seo优化
SEO要点：1.语义化html标签，用合适的标签嵌套合适的内容，不可过分依赖div，对浏览器更友善就能更容易被抓取。2.重要的内容html代码放在前面/左边。搜索引擎爬虫是从左往右，从上到下进行抓取的，利用布局来实现重要的代... 查看详情
前端需要注意哪些seo？
合理的title、description、keywords：搜索对这三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同... 查看详情
前端里面如何进行搜索引擎优化(seo)
如何进行SEO优化：(1)避免head标签js堵塞： 所有放在head标签里面的js和css都会堵塞渲染；如果这些css和js需要加载很久的话，那么页面就空白了； 解决办法：一是把script放到body后面，这也是很多网站采取的方法。 ... 查看详情
前端角度出发做好seo需要考虑什么？
了解搜索引擎如何抓取网页和如何索引网页你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。Meta标... 查看详情
前端seo优化详细方案(代码片段)
前言：在好久之前就总结过一个版本的搜索引擎优化，但是那时只是很肤浅的做一些meta中的,description,keywords,以及一些简单的语义化标签，并没有在谷歌搜索引擎中心搜索到自己的网站，这次更新才是真正的做到... 查看详情
潍坊seo：学习seo要知道什么语言代码呢？
...习SEO需要知道什么代码学习seo，代码方面的知识，分布于前端代码HTML+CSS，JavaScript，分布于部分语言如PHP，ASP等。学seo到底要知道什么代码才可行？实际上，没有一个严格的说法。实际上，技多不压身是古语，了解更多 查看详情
网站完整详细的seo优化方案
一个完整的SEO优化方案主要由四个小组组成：一、前端/页编人员二、内容编辑人员三、推广人员四、数据分析人员接下来，我们就对这四个小组分配工作。首先，前端/页编人员主要负责站内优化，主要从四个方面入手：第一个... 查看详情
一个网站完整的seo优化方案
...。一个完整的SEO优化方案主要由四个小组组成：一、前端/页编人员二、内容编辑人员三、推广人员四、数据分析人员接下来，我们就对这四个小组分配工作。首先，前端/页编人员主要负责站内优化，主要从四个... 查看详情
seo优化
...将自己的网站排名靠前，当然现在这个技术也可以看做是前端人员的一个技能，通过它是一系列技术点的统称，下面给大家看一下例子： 如上图所示，像ht 查看详情
2023年如何将seo与编程相结合？
...站:【海拥】【摸鱼游戏】【神级源码资源网站】🤟前端学习课程：👉【28个案例趣学前端】【400个JS面试题】💅想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】目录使用编程提高网站加... 查看详情
前端h5框架总结
关于单独h5网站项目，目前主要前端框架有：react、vue、bootstrap等，其中react和vue都是用mvvm模式（低耦合、可重用性、独立开发、可测试），数据实时更新，适合app里面嵌入的网页使用，但用在传统web网页上对seo不太好，因为数... 查看详情
每一个程序猿必知之seo
...觉得我应该写一个每一个程序猿必知之SEO。作为一个擅长前端兼SEO的设计师。搜索引擎是如何工作的假设你有时间，能够读一下谷歌的框架：http://infolab.stanford.edu/~backrub/googl 查看详情
前端搜索引擎优化seo优化之title和meta标签
前端搜索引擎优化SEO优化之Title和Meta标签对搜索引擎最友好（SearchEngineFriendly）的网页是静态网页，但大部分内容丰富或互动型网站都不可避免采用到相关技术语言来实现内容管理和交互功能。SEO思想指导下的技术支... 查看详情
课得在线干货|seo为什么重在细节？
...长期的SEO研究，我发现PHP程序对搜索引擎较为优化，另外前端不要采用框架式开发，代码要尽量的简洁，如果你还不懂前端代码，那么你SEO的优势就没有了，网站能不用js尽量不用js，网站的共用部分尽量放在一个文件，然后调... 查看详情
seo优化重点内容都有哪些
...的内链作为辅助，这是大型网站内链的优势。第三部分：前端搜索引擎友好，包括UI设计的搜索友好和前端代码的搜索友好两点1、首先来看UI设计的搜索引擎友好：主要是做到导航清晰，以及flash和图片等的使用，一 查看详情
Laravel Vue.js 应用程序的 SEO
...018-12-2807:32:42【问题描述】：我的Laravel5.6应用有一个Vue.js前端。Vue.js应用程序位于资源目录中。我浏览了几篇使用PrerenderSPA插件的文章。这些文章适用于独立的vue.js应用程序，并且有一个index.html文件。在Laravel的例子中，我... 查看详情