浅谈什么是前端SEO
SEO简介
全称：Search Engine Optimization，搜索引擎优化。自从有了搜索引擎，SEO便诞生了。
存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。
分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能做什么呢？
1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
2. 网站内容优化：内容与关键字的对应，增加关键字的密度；
3. 在网站上合理设置Robot.txt文件；
4. 生成针对搜索引擎友好的网站地图；
5. 增加外部链接，到各个网站上宣传；
前端SEO
通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。
(1)网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：
1. 控制首页链接数量
网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。
2.扁平化的目录层次，尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”--> "水果" --> "苹果"、“桔子”、“香蕉”，通过3级就能找到香蕉了。
3.导航优化
导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，<img>标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
4. 网站的结构布局--不可忽略的细节
页面头部：logo及主导航，以及用户的信息。
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。
特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9 下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。
5.控制页面的大小，减少http请求，提高网站的加载速度。
一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。
(2)网页代码优化
1.<title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容。
2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
4.<body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，<nav>标签是用来设置页面主导航的等。
5.<a>标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
6.正文标题要用<h1>标签：“蜘蛛” 认为它最重要，若不喜欢<h1>的默认样式可以通过CSS设置。尽量做到正文标题用<h1>标签，副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
7.<br>标签：只用于文本内容的换行，比如:
<p>第一行文字内容<br/>第二行文字内容<br/>第三行文字内容
</p>8.表格应该使用<caption>表格标题标签
9.<img>应使用 "alt" 属性加以说明
10.<strong>、<em>标签 : 需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，<em>标签强调效果仅次于<strong>标签。
<b>、<i>标签: 只是用于显示效果时使用，在SEO中不会起任何效果。
10、文本缩进不要使用特殊符号 应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。
12、巧妙利用CSS布局，将重要内容的HTML代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
13.重要内容不要用JS输出，因为“蜘蛛”不认识
14.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容
15.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
16. 不断精简代码
17.js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。
注意点：
HTML：
1.标签的有开有合。
2.避免冗余代码，例如去除空格字符。
3.合理利用标签语义化。
4.合理的嵌套规则，避免行元素内嵌套块元素。
5.img标签内需要添加title属性和alt属性。
6.a标签内需要添加title属性。
7.Meta标签的优化（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略）主要包括： Meta description、Meta keywords的设置 关键字密度要适度，通常为2%-8%，也就是说你的关键字必须 在 页面中出现若干次，或者在搜索引擎允许的范围内，要避免堆砌关键字。
8.<title>页面标题，必须列出信息的标题、网站的名称以及相关关键字，避免堆关键字。
9.合理使用注释。
CSS：
1.避免将css代码写在标签内。
2.如果css代码量少，可直接写在头部。否则请使用外部引入的方式。
3.请不要使用通配符选择器 *{margin:0;padding:0;} 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一 些不必要的元素也重置了外边距和内边距。请引用reset文件，引用reset文件在自己定义的css文件之前。
4.css代码缩写可以提高你写代码的速度，精简你的代码量，包括margin，padding，border ，font， background和颜色值等。
5.利用css继承，如果一个父元素内有多个子元素拥有相同的样式，可将相同的样式定义在元素上。
6.如果多个元素拥有相同的样式，可定义一个通用的class或使用群组选择器。
7.使用背景图合并技术。
8.适当的代码注释。
JS：
1.采用外部引入的方法。
2.合理合并JS代码，可减少服务器的压力。
3.良好的JS代码习惯。例如：减少页面重绘，减少作用域链上的查找次数。
浅谈什么是前端SEO相关推荐
- 阿里浅谈大型项目前端架构设计
1.综合 我在2年之前,写过一篇中小型项目的前端架构浅谈. 随着能力的上升,以及在阿里巴巴工作的经验,是时候写一篇大型项目的前端架构分析了. 本篇文章不会更多侧重于具体技术实现,而是尝试从更高角度出发 ...
- 浅谈Web App前端设计原则
关于Web App 随着web 2.0时代的到来,越来越多的应用程序都是基于Web环境来构建的.这样做的好处显而易见,用户可以方便地使用浏览器来访问应用,而不需要安装客户端程序.而在企业内部,很多应用 ...
- 浅谈移动端——前端适配详解
1. 什么是前端适配 从UI展现层面上: 我们期望不同尺寸的设备,页面可以自适应的展示或者进行等比缩放,从而在不同的尺寸的设备下看起来协调或者差不多. 从代码实现层面上: 我们希望前端适配可以用用尽可 ...
- 浅谈：UEO就是SEO的一种
今天在A5站长网看到一篇文章<SEO已经转向为UEO了>上面写道现在搜索引擎都是以UEO为主,自然排名都是依靠百度自己操作的,完全不具备公平性.笔者只认为这类人对SEO只在太偏激.一.如果 ...
- 浅谈业务中台前端设计
做前端中台业务一年多的时间,有一些心得体会,和大家分享分享. 中台是什么 中台业务的价值是什么 做了哪些前端中台业务 如何设计前端中台业务 未来展望 中台是什么 百度百科的解释比较言简意赅:" ...
- python seo分析器_python与SEO浅谈Python+ELK打造seo数据分析监控系统
首先,这是一门工具类的课程,当然也会讲到seo方面一些知识. 其次,这是一门能帮到90%以上从事seo工作人员提升技能和效率的课程. 接着,这门课程的内容很丰富,一定有你想要的内容. 最后,这门课程很 ...
- 浅谈高并发-前端优化
前言 最近接到个任务,业务场景是需要处理高并发. 原谅我第一时间想到的居然是前段时间阮一峰的博客系统遭到了DDoS攻击,因为在我的理解中,它们的原理是想通的,都是服务器在一定时间内无法处理所有的并行任 ...
- 浅谈5G对前端生态、发展带来的变化
前言 在过去的十几年里,2G到4G跨越,带来的是从 15-20K/s 到 1.5M/s-10M/s 的网速飞跃.而5G的到来,将会把这个速度提升至 125G/s.凭借网速的激增以及带宽的突破,5G注定 ...
- [前端面试] 浅谈SPA、SEO、SSR
原文作者:staneyffer 原文链接:浅谈SPA.SEO.SSR 前后端分离算是最近Web开发的大趋势了,目前已经有大量的公司使用了前后端分离的开发方式.那我们就来大概谈谈前后端分离开发中必须要了 ...
最新文章
- AI一分钟 | Google因跟踪用户数据接受调查；iPhone XS真机图曝光
- LeetCode 1115. Print FooBar Alternately--多线程并发问题--Java解法--CyclicBarrier, synchronized, Semaphore 信号量
- python pip 自动补全
- hdu3585 二分最大团（dp优化）
- Arduino数字引脚作为GPIO的使用
- 正则表达式：（mysql）REGEXP
- Andriod开发技巧——Fragment的懒载入
- SQL30081N 检测到通信错误。正在使用的通信协议：TCP/IP
- NWERC 2018——B.Brexit Negotiations
- IntelliJ IDEA 2020 创建xml文件
- 【C语言】（数组方式）求n名同学的平均成绩
- PHP代码规范[转]
- Linux arm 下载程序,arm-linux—gcc如何下载安装
- 电脑能开机但进不去系统，电脑只能进安全模式怎么处理？
- LGOJP1941 飞扬的小鸟
- 数据结构学习-Java实现复数类
- 《Java开发实战经典》习题第3章第12题：使用for循环打印下面的图形（用for循环打印金字塔）
- 软件质量管理QM、QA、QC的区别
- win10如何合并硬盘分区
- 【FFMpeg 命令行】基本应用