作为前端,你不得不知道的搜索引擎优化(代码片段)

一只看夕阳的猫 一只看夕阳的猫     2022-11-21     150

关键词:

今天在看文章时,看到了这篇文章。自己对搜索引擎优化了解并不是深入,以此分享给大家。

向搜索引擎提交网站地址:http://www.runoob.com/web/web-search.html

文章原文链接:掘金-志如

什么是SEO:

  以下内容摘自百度百科:

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

SEO原理

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

  • 页面抓取: 蜘蛛向服务器请求页面,获取页面内容
  • 分析入库:对获取到的内容进行分析,对优质页面进行收录
  • 检索排序:当用户检索关键词时,从收录的页面中按照一定的规则进行排序,并返回给用户结果

SEO优化

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

页面抓取

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

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

    1. sitemap提交。sitemap,顾名思义,就是网站地图,当蜘蛛来到我们的网站时,告诉它我们有多少页面,不同页面是按什么分类的,每个页面的地址是什么。顺着我们的指引,蜘蛛会很轻松的爬遍所有内容。另外,如果你的页面分类比较多,而且数量大,建议添加sitemap索引文件。如果站点经常更新添加新页面,建议及时更新sitemap文件;
    2. 主动提交。就是把你的页面直接丢给百度的接口,亲口告诉百度你有哪些页面,这是效率最高也是收录最快的方式了。但是需要注意,百度对每天提交的数量是有限制的,而且反复提交重复的页面,会被降低每日限额,所以已被收录的页面不建议反复提交。收录有个时间过程,请先耐心等待;
    3. 实时提交。在页面中安装百度给的提交代码,当这个页面被用户打开我,便自动把这个页面提交给百度。这里不需要考虑重复提交的问题。 以上几种提交方式可以同时使用,互不冲突。
  2. 保证我们的页面是蜘蛛可读的。

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

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

  3. URL与301

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

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

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

分析入库

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

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

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

检索排序

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

  1. TDK优化

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

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

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

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

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

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

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

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

  1. 提升页面关键词密度

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

  我们在百度搜索“北京旅游”,排在第一的是百度旅游,这个就不解释了。排第二位是携程,我们就分析一下为啥携程会排名这么靠前。

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

 

  页面头部

技术分享图片   页面底部 技术分享图片

 

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

  你以为到此结束了?并没有。请仔细观察页面上这些模块的内容设置。分别覆盖了地区、景点、攻略、导航、住宿、交通等等,可以说是涵盖了你要旅游所需要的任何需求。这样一来,不管你搜哪些有关于“北京旅游”的关键词,比如“北京旅游住宿”,“北京特色美食”等都会命中这个页面的词,这使得这个页面的关键词数量得到提升,更容易得到曝光。

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

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

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

  ......

其他优化点

友情链接

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

关键词筛选

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

利用好分析工具

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

结语

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

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

你知道的前端优化手段(代码片段)

...0c;也是每个工程师心中永远在撩拨的刺。总结一下常用的前端性能优化的方法,希望对大家有些帮助~。性能可能带来的影响(贩卖焦虑警告❗️)试想当你做的酷炫特效因为慢了0.1秒就少被一个人看到时的落寞(ㄒoㄒ)& 查看详情

数据分析师不得不知道的sql优化(代码片段)

什么叫做sql优化?优化sql,最重要就是优化sql索引索引相当于字典的目录,利用字典目录查找汉字的过程相当于利用sql索引查找某条记录的过程,有了索引就能很快地定位到某条记录,加快查询速率。为什么需要优化?进行多表... 查看详情

关于数据库优化你知道多少?(代码片段)

文章目录什么是数据库优化?优化MySQL的查询使用索引:优化子查询:优化MySQL的插入MyISAM引擎InnoDB引擎海量数据处理优化表中包含几千万条数据该怎么办?MySQL的慢查询优化慢查询概念开启慢查询日志:分析... 查看详情

你可能不知道的viewport(代码片段)

...然看到一个pc端网页,发现用手机打开竟然同比缩放了,作为一个前端从业者,我自然想要弄清它到底是怎么缩放的。之后查了它的meta信息,css和js,发现没有任何兼容手机端的代码,那它到底是怎么缩放的呢?百思不得其解,... 查看详情

作为程序员,你一定要知道函数底层运行机制!!!(代码片段)

...前,但是我的出生环境和身世却很少被人所知。今天不得不借助鹿哥的平台,进行一次自白。这么多年过去了,总是被别人当做“工具人”,却总是不能够被人理 查看详情

「offer来了」快来关注这些性能优化问题(代码片段)

...。9、你知道哪些优化性能的方法?10、你知道哪些SEO搜索引擎优化的方法?🗯️三、代码、服务器端优化1、平时你是如何对代码进行性能优化的?2、如何优化服务器端?3、如何优化服务器端的接 查看详情

「offer来了」快来关注这些性能优化问题(代码片段)

...。9、你知道哪些优化性能的方法?10、你知道哪些SEO搜索引擎优化的方法?🗯️三、代码、服务器端优化1、平时你是如何对代码进行性能优化的?2、如何优化服务器端?3、如何优化服务器端的接 查看详情

前端性能优化之gzip(代码片段)

背景如果你是个前端开发人员,你肯定知道线上环境要把js,css,图片等压缩,尽量减少文件的大小,提升响应速度,特别是对移动端,这个非常重要。压缩压缩方式前端压缩的方式很多,依赖java的有ant工具,前端自己打包压缩... 查看详情

前端高效开发不得不知道的一些javascript库!(代码片段)

 工欲善其事,必先利其器;器欲尽其能,必先得其法。函数库lodash推荐指数:⭐️⭐️⭐️⭐️⭐️Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。地址:https://www.lodashjs.com/请求库 axios推荐指数:⭐️... 查看详情

前端高效开发不得不知道的一些javascript库!(代码片段)

 工欲善其事,必先利其器;器欲尽其能,必先得其法。函数库lodash推荐指数:⭐️⭐️⭐️⭐️⭐️Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。地址:https://www.lodashjs.com/请求库 axios推荐指数:⭐️... 查看详情

[react]你知道的react性能优化有哪些方法?(代码片段)

...坚持一定很酷。欢迎大家一起讨论主目录与歌谣一起通关前端面试题 查看详情

前端应该知道的webcomponents(代码片段)

...行的今天,确实极大的提升了开发效率。不过有一个问题不得不被重视,拟引入的这些html、css、js代码有可能对你的其他代码造成影响。虽然我们可以通过命名空间、闭包等一系列措施来加以防备,不过还是存在这些隐患。为了... 查看详情

前端seo优化详细方案(代码片段)

前言:在好久之前就总结过一个版本的搜索引擎优化,但是那时只是很肤浅的做一些meta中的,description,keywords,以及一些简单的语义化标签,并没有在谷歌搜索引擎中心搜索到自己的网站,这次更新才是真正的做到... 查看详情

matlab|那些你不得不知道的matlab小技巧(代码片段)

1:比较常用绘图函数介绍1.1:填充图半透明填充图:设置faceAlpha属性为0-1的数值即可调整透明度:%生成三组x,y数据x=linspace(-8,12,100);y1=normpdf(x,4,6);y2=normpdf(x,0,1).*0.5+normpdf(x,4,2).*0.5;y3=normpdf(x,-3,2); 查看详情

matlab|那些你不得不知道的matlab小技巧(代码片段)

1:比较常用绘图函数介绍1.1:填充图半透明填充图:设置faceAlpha属性为0-1的数值即可调整透明度:%生成三组x,y数据x=linspace(-8,12,100);y1=normpdf(x,4,6);y2=normpdf(x,0,1).*0.5+normpdf(x,4,2).*0.5;y3=normpdf(x,-3,2); 查看详情

搜索入门问题---滑雪(代码片段)

...得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你。现想知道在一个区域中最长的滑坡。区域由一个二维数组给出。数组的每个数字代表点的高度。下面是一个例子:123451617181961524... 查看详情

2021年要了解的34种javascript简写优化技术(代码片段)

...的动机是介绍所有JavaScript的最佳实践,比如简写功能,作为一个前端开发者,我们必须知道,让我们的生活在2021年变得更轻松。你可能做了很长时间的JavaScript开发,但有时你可能没有更新最新的特性,这些特性可以解决你的问... 查看详情

前端开发不得不看的书籍分享(代码片段)

整理了两套前端书单,一份是针对自学,一份是针对提升。一、前端入门学习①都知道前端从三驾马车HTML+CSS+JavaScript开始,但是这三驾马车背后是碎片化的场景,不管是跨平台还是语言特性都会让初学者觉... 查看详情