业界动态
前端页面SEO优化
2024-10-05 11:06

SEO 是 Search Engine Optimizatio(搜索引擎优化) 的首字母缩写,利用搜索引擎的规则对网站进行内部及外部的调整优化,提高网页或网站在搜索引擎中关键词的自然排名, 以求得获得更多的展现量和吸引免费的点击流量,从而达到互联网营销及品牌建设的目标。

对页面点击率有直接影响,因为这是用户对网站页面的第一印象,而且也是爬虫重点的爬取对象,填写的文字要对网页内容有准确而简洁的描述,能够吸引用户点击,而且长度要适中。

meta标签共有两个属性,分别是http-equiv属性和name属性,不同的属性又有不同的参数值,另外还有主要作用于社交平台的OG标签。

(1) name属性

  • meta Keywords: 是排名的重要组成部分,因为早期的搜索引擎机器人使用该值对网站进行分类,但在后来逐渐被放弃了。 Google 在2009年正式宣布,keyword标签不再是排名的一部分。 在百度站长论坛上官方曾表示这个标签目前对SEO的影响可以忽略不计。
 
  • description: 告诉搜索引擎你的网站主要内容
 
  • robots: 告诉搜索机器人哪些页面需要索引,哪些页面不需要索引
 
  • author: 标注网页的作者
 

(2)http-equiv属性

  • Expires: 可以用于设定网页的到期时间,一旦网页过期,必须到服务器上重新传输
 
  • Pragma: 禁止浏览器从本地计算机的缓存中访问页面内容
 
  • Refresh: 自动刷新并指向新页面
 
  • Set-cookie: 如果网页过期,那么存盘的cookie将被删除
 
  • Window-target: 强制页面在当前窗口以独立页面显
 
  • content-Type: 设定页面使用的字符集
 

(3) OG标签

它是 Facebook 在 2010 年 F8 开发者大会公布的一种网页元信息(meta Information)标记协议,属于 meta Tag (meta 标签)的范畴,是一种为社交分享而生的 meta 标签。 为了让信息内容加速流动和准确呈现,Facebook 早年极力推动这个协议,到目前几乎主流的社交媒体网站都支持 OG 协议。包括 Twitter、Pinterest、linkedIn 和 Google+ 都可以识别 OG 协议。虽然 Twitter 也有自家的 Twitter Cards 协议,但是 Twitter 只要发现网页上没有使用自家的协议,就会用 OG 协议代替。国内的百度、360 搜索、微博、微信、人人网等也支持该协议。

  • 使用方法
 
  • 作用:

OG在社交媒体上具有丰富的内容展示,比如分享一个网址链接在社交平台后,这个链接会显示缩略图、标题和描述等,增加访客点进来的概率,左图加了OG标签,右图没有
前端页面SEO优化

标签详细属性可以看官网: ogp.me/

H系列标签

从H1到H6(重要性从高到低)一共有6个,而且在页面中的作用性极高,所以不能乱用,得根据内容的重要性进行排列,最后不要有断层,比如从H1直接到H3,错过了H2;另外,H1标签最好只存在一个,更多细节可以网上搜下。

img标签

img的alt属性,为搜索引擎提供替代文本,图片使用alt标签优化,对搜索引擎排名产生积极影响;另外,网速不佳等原因造成无法加载图片文件时,将在图片的位置显示alt里的文字

其他

还有HTML5新出的 Header, Nav,Aside,Article,Footer等语义化标签,这些都能帮助爬虫更好的获取页面内容

站点地图一般是xml格式的文件,放在网站的根目录下,有些网站甚至可以通过 直接访问到(手动狗头),文件里包含了每个网页的链接(loc),更新时间(lastmod),权重(priority)等信息,权重从0到1,依次递增,一般主页设为1,然后其他按重要性递减,拿掘金举例说明:
前端页面SEO优化

搜索引擎可以通过查看快速获取网站的整体结构,并将精力集中在重要页面的索引上,这对于提高搜索引擎的爬行效率和索引速度非常有帮助。

robots.txt,是一个给爬虫下指令的文本文件,能让其合理地抓取网站内资源,而且可以将网站不重要的内容、模块等进行屏蔽,从而抓取更多有价值高质量的内容和网页,提高网站排名。大多数网站都可以通过进行获取, 还是拿掘金来举例:

前端页面SEO优化

  • : 后面填你要针对的搜索引擎,*代表全部搜索引擎
  • : 后面填你要禁止抓取的网站内容和文件夹,/做前缀
  • : 后面填你允许抓取的网站内容,文件夹和链接,/做前缀
  • : 后面填数字,意思是抓取延迟,小网站不建议使用
  • : 站点地图的存放位置

内链

在自己的网站当中通过链接的方式在各个内容页面之间相互链接,从而提高爬虫以及一些搜索引擎对于网站的爬行索引效率;另外,为了避免内链起到反作用,在进行网站待更新的时候,一定要注意定期清理死链和断链,方便爬虫可以顺着链接进行收录爬行,达到更好的收录效果。

外链

通过在其他一些高流量的网站放置自己的链接,相较于内链的内部操作,外链可以达到网络之间的信息分享,不再让我们的网站内容形成孤立,可以很快的增加网站的浏览数量,提升搜索排名,这对一个刚刚建立起来的新站来说,外链的数量基本上可以成为这个网站快速提升流量的关键所在,不过对于后期优化,外链的发布一定要以质量为主,数量为辅。

nofollow

  • 作用: 超链接a标签中的一个属性(还有meta标签),意思是不向这个页面导出权重,也就是说,加上了nofollow标签的链接,目的是告诉搜索引擎不要跟踪加这个链接,不要传递链接权重,不要在搜索算法中计算这个链接。通过设置nofollow标签,我们可以控制网站权重的流动(也就是说常说的“集中权重”),避免链接指向垃圾页面,这样就可以让网站主要的页面能够更快的获得关键词排名了。有的公司在导航上有在线留言,这个就可以加上,因为这个是没有用的,属于垃圾页面,页面会向这个页面导出权重,权重就分散了,另外还有类似广告链接等无意义的页面

  • nofollow 和 external nofollow: 从字面上意思来看,external是“外部的”,nofollow是“不要追踪”,综合来看extenal nofollow 则表示“外部的不要追踪”,这两根本就是同一个意思,external nofollow 只是nofollow比较规范的书写而已。

 
 

结构化数据标记并不能直接帮助提高搜索排名,但它能带来很多好处:

(1)丰富搜索结果

比如搜索 掘金 出现的页面,红色框部分就是结构化标记的成果,从框内可以更好的了解该网站的内容,而且占据了大版面也有利于吸引用户注意。
前端页面SEO优化

(2)拥有知识面板

在右侧会有个知识面板,该面版可提供更高的品牌知名度和权威性,如下图的右侧红框:
前端页面SEO优化

(3)支持语义搜索

不再是关键词的匹配搜索,而是通过关键词去寻找问题的答案。当你搜索如下模糊内容时,Google 会通过这种方式设法返回合适的结果:
前端页面SEO优化

(4)体现 E-A?T

E?A-T 意思 是专业(Expertise), 权威(Authoritativeness)和可信(Trustworthiness)的缩写, E-A-T是谷歌算法的一部分,并被写入谷歌搜索质量评估指南中。

结构化数据形式

结构化数据有三种形式:JSON-LD,Microdata和RDFa。个人之前一直用的JSON-LD,如下:

 
Tips

这段代码可以放在 或 HTML 部分的任意位置,更多的JSON-LD款式可以参考 Google官方

  1. 告诉爬虫当前所处的位置,提供抓取路径的引导,让其更快速的了解网站的整体架构,在抓取网页时也能清楚知道网页的层级及分类索引,有助于提升搜索结果的排名。此外,设定面包屑之后,网站在搜索结果页上也会呈现网址路径,因此可以适时在面包屑的名称中加入关键词,增加用户点击率

  2. 优化用户体验,让用户清楚的知道自己所在的位置,更容易筛选自己需要的信息

前端页面SEO优化

爬虫只会爬取源码,不会执行网站的Js脚本,使用了Vue或者React之类的框架后,页面大多数DOM元素都是在客户端根据js动态生成,可供爬虫抓取分析的内容大大减少。另外,浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行Js脚本的最终HTML,网络爬中就可以抓取到完整页面的信息,所以就要用到SSR渲染了。

如果是项目开始的时候,就知道要做SEO,建议使用比较成熟的SSR框架

  1. 基于Vue的 Nuxtjs
  2. 基于Reactde Nextjs

如果是项目已经成形或者只想优化部分页面,建议使用一些插件来实现,比如 prerender-spa-plugin、vue-server-renderer ( 适用于Vue )

Tips: 爬虫不会抓取iframe里的内容,所以尽量避免使用

  1. 和产品关键词或者公司名字高度相关的域名,能够有效提升网站的SEO排名。

  2. 各个页面的路径地址尽量不要过长,以及不能出现中文,否则会影响收录。

  3. 由于网站改版或者其他因素,可能会出现部分链接地址生效,这时候可以进行301重定向到新的页面,尽量避免出现过多的死链(404页面),如果死链太多,搜索引擎可能认为网站不可靠,从而影响网站的排名和流量。

  4. 下面两个链接都是百度页面,像这种有多个URL为相同页面的情况,就是网址规范化问题。 无论是对搜索引擎还是网站来说,多个URL为相同页面,浪费了抓取资源,而且如果多个网址内容相同时或者高度相同,可能会认为网站重复页面过多一类的因素导致影响收录甚至降权。 在一个页面有多个URL时,还会对页面找出权重分散,降低了页面排名能力,网站无意义收录等问题 当页面出现URL规范问题,搜索引擎也会自动判断并选择一个认为是规范的页面进行索引。

  • baidu.com

  • www.baidu.com

解决方案: 可通过在每个非规范版本的 HTML 网页的 部分中,添加一个 链接来进行指定规范网址。

 
 

网站打开速度越快,识别效果越好,否则爬虫会认为该网站对用户不友好,降低爬取效率,这时候就要考虑压缩文件体积之类的性能优化了。

Google和其他搜索引擎已经明确表示,他们更喜欢使用HTTPS,因为它提供更高的安全性和更好的用户体验。当您的网站使用HTTPS时,搜索引擎会将其视为更可信和更安全的网站,从而为其排名增加积极因素。

将创建好的网站地图提交给搜索引擎,以便搜索引擎能够更快更及时地抓取和索引网站。

  1. 百度
  2. google
  3. Bing

后期维护需要一定的网站访问数据做分析,比如流量来源,页面点击,地域分布等,不同的搜索引擎都有自己的一套分析工具,我们只要按照官网的教程,把埋点的代码嵌入到项目即可。

  • 百度统计
  • Google Analytics

附赠

  1. 检测Title Tag & meta Description优化
  2. 站点地图生成
    以上就是本篇文章【前端页面SEO优化】的全部内容了,欢迎阅览 ! 文章地址:http://www78564.xrbh.cn/news/22611.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 迅博思语移动站 http://www78564.xrbh.cn/mobile/ , 查看更多   
最新文章
今天有好东西,大折扣!
仰仰铺子·好物盘点这一期好物盘点,千万别错过!都是好宝贝,超低价,就连我们好久没有福利活动的丝蓓缇黑姜分解酵母也弄到了特
SEO推广排名的奥秘,全面解析实现路径与战略意义
SEO推广排名是指通过搜索引擎优化技术提高网站在搜索引擎结果页面(SERP)中的排名。实现SEO排名需要优化网站内容、结构、技术等
【图】领克05欢迎莅临赏鉴 价格直降1.1万 详询:4009728340
购好车来领福新年享9重好礼【试驾礼】进店试乘试驾均享受精美礼品一份【大客户】指定企业员工购车享3000元补贴。【置换礼】至高
快步剪辑师(快剪辑教学)
摘要:快步剪辑师,快剪辑教学课程,场课为您整理出关于快步剪辑师的相关在线教程知识,欢迎访问了解快步剪辑师(快剪辑教学)的
推动手机能效标准化:从用户呼声看行业未来
近年来,智能设备的普及让我们越来越依赖手机,而手机的能效问题逐渐引起了用户的关注。近期,有用户提出建议,希望将手机能效列
GPT-4 接入 Office 全家桶:Word 一键变成 PPT,打工人的春天来了!
作者 | 屠敏出品 | CSDN(ID:CSDNnews)这一周的科技圈异常地热闹,且多数都是大模型给的:周二
双十二荣耀手机别乱买!这三款物美价廉,性价比几乎“零差评”
每年到了双十二,买手机这件事就像一场“技术与钱包的拔河赛”。想选性价比高的,又怕踩雷;想要配置好的,又担心被钱包发出“哀
分析Android 搜狗输入法在微信和QQ中发送图片和表情
好记性不如烂笔头。生活中多做笔记,不仅可以方便自己,还可以方便他人。有没有发现,有时候表情或图片的交流更能让气氛更愉悦。
企业SEO用什么程序:提升搜索引擎排名的必备工具与策略
在当今数字化时代,企业的在线存在变得日益重要。为了在激烈的市场竞争中取得优势,企业必须充分利用搜索引擎优化(SEO)技术。
Python 到底能干嘛?—次学会Python所有开发技能_学python能干嘛,需要全学吗 (2)
最后 Python崛起并且风靡,因为优点多、应用领域广、被大牛们认可。学习 Python 门槛很低,但它的晋级路线很多ÿ