SEO是什么意思?SEO等于搜索引擎优化,它是基于搜索引擎的一种网络营销方式,隶属于SEM!

前端seo该学习什么

3420℃ 1评论

网站前端工作人员不可避免的会与seo打交道,会seo的前端也会更吃香。 很多时候,从事网站前端开发的朋友缺乏对seo的基本了解,导致整个网站建设,运营效率偏低。实际上seo对于前端来讲很有必要,学习一些通用的seo技术, […]

前端seo该学习什么

网站前端工作人员不可避免的会与seo打交道,会seo的前端也会更吃香。

很多时候,从事网站前端开发的朋友缺乏对seo的基本了解,导致整个网站建设,运营效率偏低。实际上seo对于前端来讲很有必要,学习一些通用的seo技术,不耗时不费力,又可提升工作效率,提升自身能力,很好很好。

研发的同学,其实很多人并没有深入了解SEO这个概念。在技术博客里,提及这一块的也寥寥无几。我今天就拿自己的经验,简单给大家扫个盲,有什么遗漏的地方,欢迎大家补充。

文字内容有点多,但是干货满满,请耐心阅读!

什么是SEO:

以下内容摘自百度百科:

SEO(Search Engine Optimization):汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划,使网站更适合搜索引擎的索引原则的行为。

SEO原理

其实搜索引擎做的工作是相当复杂的,我们这里简单说一下大致的过程。后续针对SEO如何优化,也会根据这几个点展开描述。

页面抓取: 蜘蛛向服务器请求页面,获取页面内容

分析入库:对获取到的内容进行分析,对优质页面进行收录

检索排序:当用户检索关键词时,从收录的页面中按照一定的规则进行排序,并返回给用户结果

SEO优化

既然是优化,那我们就得遵循SEO的原理来做,可谓知己知彼,百战不殆。针对上面提出的三点,我们分别展开叙述。我们这里主要以百度蜘蛛举例。

页面抓取

如何才能吸引蜘蛛光顾我们的网站,如何才能让蜘蛛经常光顾我们的网站。这里提出以下几个优化点:

提交页面。提交页面又分为几种不同的方式

sitemap提交。sitemap,顾名思义,就是网站地图,当蜘蛛来到我们的网站时,告诉它我们有多少页面,不同页面是按什么分类的,每个页面的地址是什么。顺着我们的指引,蜘蛛会很轻松的爬遍所有内容。另外,如果你的页面分类比较多,而且数量大,建议添加sitemap索引文件。如果站点经常更新添加新页面,建议及时更新sitemap文件;

主动提交。就是把你的页面直接丢给百度的接口,亲口告诉百度你有哪些页面,这是效率最高也是收录最快的方式了。但是需要注意,百度对每天提交的数量是有限制的,而且反复提交重复的页面,会被降低每日限额,所以已被收录的页面不建议反复提交。收录有个时间过程,请先耐心等待;

实时提交。在页面中安装百度给的提交代码,当这个页面被用户打开我,便自动把这个页面提交给百度。这里不需要考虑重复提交的问题。

以上几种提交方式可以同时使用,互不冲突。

保证我们的页面是蜘蛛可读的。

早在ajax还没流行的的时候,其实SEO对于前端的要求并没有很多,或者说,那个时候还没有前端这个职业。页面全部在服务器端由渲染好,不管是用户还是蜘蛛过来,都能很友好的返回html。ajax似乎原本是为了避免有数据交互导致必须重刷页面设计的,但是被大规模滥用,一些开发者不管三七二十一,所有数据都用ajax请求,使得蜘蛛不能顺利的获取页面内容。庆幸的是这反倒促进了前端的飞速发展。

到了后来,各种SPA单页应用框架的出现,使得前端开发者不再需要关心页面的DOM结构,只需专注业务逻辑,数据全部由Javascript发ajax请求获取数据,然后在客户端进行渲染。这也就导致了老生常谈的SEO问题。百度在国内搜索引擎的占有率最高,但是很不幸,它并不支持ajax数据的爬取。于是,开发者开始想别的解决方案,比如检测到是爬虫过来,单独把它转发到一个专门的路由去渲染,比如基于Node.js的Jade引擎(现在改名叫Pug了),就能很好地解决这个问题。React和Vue,包括一个比较小众的框架Marko也出了对应的服务端渲染解决方案。详细内容查看对应文档,我就不多说了。

URL与301

URL设置要合理规范,层次分明。如果网站到了后期发现URL不合理需要重新替换时,会导致之前收录的页面失效,就是我们所说的死链(这种情况属于死链的一种,404等也属于死链)。所以一定要在网站建设初期就做好长远的规划。一旦出现这种情况也不要过于担心,我们可以采取向搜索引擎投诉或者设置301跳转的方式解决。

URL层级嵌套不要太深,建议不超过四层。增加面包屑导航可以使页面层次分明,也有利于为蜘蛛营造顺利的爬取路径。

除此之外,将指向首页的域名全部设置301跳转到同一URL,可以避免分散权重。

分析入库

当蜘蛛把页面抓取回去之后,就需要对页面内容进行分析,并择优收录入库。为什么说是择优呢?下面我给你慢慢分析。

搜索引擎的目的是给用户提供高质量的、精准的搜索结果。如果整个页面充斥着满满的广告和各种不良信息,这无疑会很大程度上影响用户体验。

除此之外,你肯定不希望自己辛辛苦苦创作的文章被别人轻而易举的抄走,所以搜索引擎在一定程度上帮助你避免这种情况的发生。对于已经收录的内容,搜索引擎会降低其权重,甚至直接不收录这个页面。即便是这样,为了保证页面的新鲜度,很多网站都会爬取或者转载其他网站的内容。这就是我们经常听到的伪原创。所以,想要让你的页面能够以较高的权重被收录,就需要坚持更新网站内容,并且是高质量的原创内容。

检索排序

这块我的理解是,页面被收录后,会给每个页面打一些tag。这些tag将作为搜索结果排序的重要依据。比如用户搜索“seo教程”,搜索引擎会检索收录页面中被打了“seo教程”tag的页面,并根据一系列规则进行排序。所以,如何提升这些tag在搜索引擎里面的权重是至关重要的。

TDK优化

TDK是个缩写,seo页面中的页面描述与关键词设置。

其中”T”代表页头中的title元素,这里可能还要利用到分词技术,当标题(Title)写好后,我们就尽可> 能不要再去修改了,尽量简洁,没意义的词尽量不要加入到标题中,避免干扰到搜索引擎识别网站主题。

其中”D”代表页头中的description元素,要知道描述是对网页的一个概述,也是对title的补充,因为title中只能书写有限的字数,所以在description中就要稍微详细的补充起来,一般用一句两句话概括文章的内容。

其中”K”代表页头中的keywords元素,提取页面中的主要关键词,数量控制在三到六个内。想方设法让主关键字都出现。

以上内容摘自百度百科,这里需要补充几点。

TDK是搜索引擎判断页面主题内容的关键,所以要在title里面言简意赅的体现出页面的主要内容,如果主体比较多,可以用一些符号把不同的主题词隔开,但是关键词不要太多,最多不要超过五个。

keywords里面把每个关键词用英文逗号隔开,三到五个最佳。尽量覆盖每个关键词。

description就是用自然语言描述页面的主要内容,这里注意一点就是把每个关键词至少覆盖一遍才能达到最佳效果。

提升页面关键词密度

首先说个概念,叫关键词密度。简单理解就是关键词在所有文字内容中出现的比例。提升关键词的密度,有利于提升搜索引擎针对对应关键词的搜索排名。但并不是我们整个页面密密麻麻堆砌关键次就好,我们来分析一个案例。

我们在百度搜索“seo教程”,排在第一的是seo教程自学网http://www.xminseo.com/,这个就不解释了。我们就分析一下为啥携程会排名这么靠前。

前端SEO技巧

通过查看百度快照,可以一目了然的看到页面上究竟哪些地方命中了这些词。

页面头部

 前端网站seo方法

页面底部

前端开发seo学习

页面很清晰表明了关键词出现的地方,我们发现这个页面除了正文部分外,还设置了许多的模块,这些模块看似只是一些简单的链接,实际上他们更重要的使命就是服务SEO,提升关键词的密度。同时,这些链接都是指向网站内部的链接,通过这样的方式,还可以在不同的页面之间相互投权重。可以说小链接,大学问!

你以为到此结束了?并没有。请仔细观察页面上这些模块的内容设置。分别覆盖了技术、视频等等,可以说是涵盖了你要seo教程周边的大部分需求。这样一来,不管你搜哪些有关于“seo教程”的关键词,比如“seo视频教程”,“seo技术教程”等都会命中这个页面的词,这使得这个页面的关键词数量得到提升,更容易得到曝光。

细枝末节但不可忽视的优化

页面上经常会有各种图片,对于搜索引擎来说,它是不识别图片上的内容的。你可能知道代码中img标签的alt属性是为了图片加载失败的时候,给用户看的。这个属性表明了这张图的内容。其实搜索引擎在分析页面的时候,也会根据这个词去判断图片的内容,所以要给页面上有意义的图片都加上alt属性,写清楚图片索要反映的内容。

页面上的出站链接(也就是指向别的网站的A标签),我们要给它加上nofollow标签,避免它向别的网站输出权重。百度蜘蛛会忽略加了nofollow 的链接。你也可以在网页的meta标签里这么写<meta name=”robots” content=”nofollow” />,这样一来,百度蜘蛛将不追踪页面上的所有链接,但不建议这么做,除非这个页面的所有链接都指向了别的域名。

……

其他优化点

友情链接

我们经常会在页面底部看到友情链接。友情链接是作为网站之间相互交换流量,互惠互利的合作形式。事实上,友情链接对网站权重提升有着至关重要的作用。友链不仅可以引导用户浏览,而且搜索引擎也会顺着链接形成循环爬取,可以有效提升网站流量和快照的更新速度。

关键词筛选

借助站长工具、爱站网或者各种站长后台我们可以分析出ip来路,以及关键词的搜索热度和相关词,我们再把这些词以一定的密度添加到页面中,以此来提升命中率。这里主要是运营同学的工作,我不专业,也就不展开说了,更多功能大家自行摸索。

利用好分析工具

我们要在自己的站点安装百度统计代码,这样就可以分析出站点内用户的关注度和浏览流程,以此来不断优化站点结构,提升用户的留存率。同时也可以做用户画像,分析用户数据等等。

结语

想要做好SEO并不是一件简单的事,需要持之以恒,面面俱到。对网站持续关注,并保持更新。从长远打算,切不可投机取巧,只图一时的效果做违背搜索引擎的操作,也就是常说的黑帽SEO,否则被百度K掉就得不偿失了。

以上观点只是我最近学习的一些总结,并不权威,希望给不了解这块的研发同学简单扫个盲,如有错误,还请各位指正与补充!

seo教程自学网点评:

技多不压身是恒古不变的道理,作为前端,更多的学习前端周边知识如seo,对于提升工作效率的结果是明显的。作为seo技术人员,多了解前端,了解服务器知识等,也是同样的道理。

参考资料:

链接:https://www.imooc.com/article/44513

seo需要掌握哪些技术http://www.xminseo.com/13767.html

当前位置:seo教程 » SEO优化技术 »
本文地址:http://www.xminseo.com/13871.html
喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. HTTP是一种客户端/服务器协议,由请求和响应构成。浏览器向一个特定的URL发送HTTP请求,URL对应的宿主服务器发回HTTP响应。该协议使用简单的纯文本格式。请求的类型有GET、POST、HEAD、PUT、DELETE、OPTIONS和TRACE。
    前端性能优化十四个规则:
    1. 减少HTTP请求。
    a. 至少80%的最终用户响应时间花在了页面中的组件(图片、脚本、样式表、Flash等)上。
    b. 改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量。这些技术包括图片地图、CSS Sprites、内联图片和脚本、样式表的合并。运用这些技术在示例页面上估计响应时间减少到50%左右。
    c. 图片地图:
    优点:允许在一个图片上关联多个URL,目标URL的选择取决于用户点击了图片上的那个位置。这样既能减少HTTP请求,又无需改变页面外观感受。
    缺点:在定义图片地图上的区域坐标时,如果采取手工的方式则很难完成且容易出错,而且除了矩形之外几乎无法定义其他形状。通过DHTML穿件的图片地图则在IE中无法工作。
    类型:图片地图有两种类型。服务器端图片地图将所有点击提交到同一个目标URL,向其传递用户单击的x、y坐标。Web应用程序将该x、y坐标映射为适当的操作。客户端图片地图将用户的点击映射到一个操作,而无需向后端应用程序发送请求。映射通过HTML的MAP标签实现。
    d. CSS Sprites
    e. 内连图片
    f. 合并脚本和样式表
    2. 使用内容发布网络(CDN)
    a. 内容发布网络(CDN)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。
    优点:缩短响应时间、备份、扩展存储能力和进行缓存、缓和Web流量峰值压力。CDN用于发布静态内容,如图片、脚本、样式表和Flash,提供动态HTML页面会引入特殊的存储需求——数据库连接、状态管理、验证、硬件和OS优化等,这些操作比较复杂。另一方面,静态文件更容易存储并具有较少的依赖性。
    缺点:响应时间可能会受到其他网站的影响,以及无法直接控制组件服务器所带来的特殊麻烦,且严重依赖CDN的服务性能。
    无论如何也不要使用HTTP重定向来将用户指向到本地服务器,这会使Web页面反应速度变慢。
    3. 添加Expires头
    a. Expires头
    浏览器(和代理)使用缓存来减少HTTP请求的数量,并减少HTTP响应的大小,使Web页面加载得更快。Web服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的时间为止。它在HTTP响应中发送。
    缺点:因为Expires头使用一个特定的时间,它要求服务器和客户端的时钟严格同步。另外,过期日期需要经常检查,并且一旦这一天到来,还需要在服务器配置中提供一个新的日期。
    图片可缓存30天以上。
    样式表可缓存30天以上。
    脚本可缓存30天以上。
    b. Max-Age和mod_expires
    HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age指令指定组件被缓存多久。它以秒为单位定义了一个更新窗。如果从组件被请求开始过去的秒数少于max-age,浏览器就使用缓存的版本,这就避免了额外的HTTP请求。如果同时出现Expires头和Cache-Control max-age,max-age指令将重写Exipres头。
    mod_expires Apache模块,能够让Expires头像max-age那样以相对的方式设置日期。这通过ExpiresDefault指令来完成。
    c. 空缓存VS完整缓存
    指的是与页面相关的浏览器缓存的状态。
    d. 修改文件名
    为了确保用户能够获取组件的最新版本,需要在所有HTML页面中修改组件的文件名。嵌入版本号即可。
    4. 压缩组件
    a. 通过减小HTTP响应的大小来减少响应时间。
    b. 从HTTP1.1开始,Web客户端可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持。 Accept-Encoding:gzip,deflate。 如果Web服务器看到请求中有这个头,就会使用客户端列出来的方法中的一种来压缩响应。Web服务器通过响应中的Content-Encoding头来通知Web客户端,如:Content-Encoding: gzip。
    c. 网站会压缩其HTML文档、脚本和样式表等。图片和PDF不应该压缩,因为他们本来就已经被压缩了。试图对它们进行压缩只会浪费CPU资源,还有可能会增加文件大小。
    d. 压缩的成本有,服务器端会花费额外的CPU周期来完成压缩,客户端要对压缩文件进行解压缩。要检测收益是否大于开销,需要考虑响应的大小、连接的带宽和客户端与服务器之间的Internet距离。
    e. 代理缓存。在Web服务器的相应中添加Vary头。Web服务器可以告诉代理根据一个或多个请求头来改变缓存的响应。由于压缩的决定是基于Accept-Encoding请求头的,因此需要在服务器的Vary响应头中包含Accept-Encoding。Vary:Accept-Encoding。
    f. 如果拥有大量的、多变的用户群,能够应付较高的带宽开销,并且享有高质量的名声,请压缩内容并使用Cache-Control:Private。这禁用了代理,但避免了边缘情形缺陷。
    5. 将样式表放在顶部
    a. 尽量多使用link标签,少使用@import标签。因为@import标签规则必须放在其他规则之前,也有可能会导致白屏现象,即使把@import规则放在文档的HEAD标签中也是如此。
    6. 将脚本放在底部
    a. 在下载脚本时并行下载实际上是被禁用的——即使使用了不同的主机名,浏览器也不会启动其他的下载。其中一个原因是,脚本可能使用document.write来修改页面内容,因此浏览器会等待,以确保页面能够恰当地布局。另外一个原因是,为了保证脚本能够按照正确的顺序执行。
    b. 脚本对Web页面的影响:脚本会阻塞对其后面内容的呈现,以及脚本会阻塞对其后面组件的下载。
    //以下规则用于处理页面加载之后的性能问题。
    7. 避免CSS表达式
    //min-width的兼容性
    width:expression(document.body.clientWidth<600?”600px”:”auto”); //IE

    min-width:600px; //大部分浏览器

    存在问题:更新表达式

    a. 一次性表达式,在这一次执行中重写它自身。

    b. 事件处理器。

    8. 使用外部JavaScript和CSS

    纯粹而言,内联快一些。但现实中还是使用外部文件会产生较快的页面。因为JavaScript和CSS文件有机会被浏览器缓存起来。HTML文档通常不会被配置为可以缓存。另外,由于外联,HTML文档减小,HTTP请求的数量也不会增加。

    9. 减少DNS查找

    a. DNS缓存和TTL(Time-to-live)

    DNS查找可以被缓存起来提高性能。服务器可以表明记录可以被缓存多久。查找返回的DNS记录包含了一个存活时间TTL值。该值告诉客户端可以对该记录缓存多久。尽管操作系统缓存会考虑TTL值,但浏览器通常忽略该值,并设置它自己的时间限制。

    10. 精简JavaScript

    a. 精简是从代码中移除不必要的字符以减小其大小,进而改善加载时间的实践。

    b. 压缩,并建议使用gzip来完成压缩。

    c. 精简CSS。通常CSS中的注释和空白比JavaScript少。优化CSS——合并相同的类、移除不使用的类等。

    11. 避免重定向

    a. 重定向用与将用户从一个URL重新路由到另一个URL。

    b. 304并不是真的重定向——它用来响应条件GET请求,避免下载已经存在于浏览器缓存中的数据。

    c. 状态码301和302是使用得最多的。状态码303和307是在HTTP1.1规范中添加的。但是几乎没有人用303和307,绝大多数网站仍然在沿用302.301响应的示例如下:

    HTTP 1.1 301 Moved Permanently

    Location: http://stevesouders.com/newuri

    Content-Type: text/html

    浏览器会自动将用户带到Location字段所给出的URL,响应体通常是空的。不管叫什么名字,301和302响应在实际中都不会被缓存,除非有附加的头——如Expires或Cache-Control等要求它这么做。

    d. 重定向延迟了整个HTML文档的传输,在HTML文档到达之前,页面中不会呈现出任何东西,也没人有任何组件会被下载。在用户和HTML文档之间插入重定向延迟了页面中的所有东西。

    e. 当缺少结尾的斜线时发送重定向——它允许自动索引,自动转到默认的index.html上,并且能够获得与当前目录相关的URL。

    12. 移除重复脚本

    确保脚本只被包含一次。

    13. 配置ETag

    a. ETag(Entity Tag)实体标签是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。

    b. ETag是HTTP1.1中引入的。ETag是唯一标识了一个组件的一个特定版本的字符串。唯一的格式约束是该字符串必须用引号引起来。

    c. ETag的加入为验证实体提供了比最新修改日期更为灵活的机制。

    d. 例如,如果实体依据User-Agent或Accpt-Language头而改变,实体的状态可以反映到ETag中。此后,如果浏览器必须验证一个组件,它会使用If-None-Match头将ETag传回原始服务器。如果ETag是匹配的,就会返回304状态码,使响应减小了1195字节。

    14. 使Ajax可缓存

    确保Ajax请求遵守性能知道,尤其应具有长久的Expires头。