网站终于被收录了!
优采云 发布时间: 2022-04-30 08:30网站终于被收录了!
陌溪的学习笔记:
大家好,我是陌溪
之前一直有小伙伴跑来问我,为啥蘑菇博客上线了这么久,百度出来只有首页?
百度收录
在聊这个问题之前,我们先谈谈什么是 SEO。搜索引擎优化(Search engine optimization,简称 SEO ),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从搜索引擎中获得更多的免费流量,以及更好的展现形象。
其实蘑菇网站上线快几年了,但是只收录了首页,归根到底还是因为之前项目选型的时候,采用了 Vue 作为前端开发框架,而我们知道 Vue 作为单页面应用框架,所有的数据都是通过 axios 进行返回的,也可以想成是 ajax 请求异步返回的,是非常不利于 SEO 的。
而百度收录的原理,其实就是百度的爬虫程序去爬取咱们的网站网站,但是因为我们内容都是通过 axios 异步返回,所以只能看到下面这样的骨架代码,因此百度也就只会收录咱们的首页了。
蘑菇页面源码
一般爬虫抓取页面内容是先从一个页面出发,从中提取出其他页面的链接,然后当作下一个请求的对象,一直重复这个过程。所以要有良好的 SEO,需要你在各大网站上拥有外链,这样会提高你的网站被搜索引擎爬虫的几率。
而 Vue 为了解决 SEO 问题,官方有 Vue SSR 方案,后面又推出了 Nuxt.js 框架。
蘑菇其实在旧版本中,也是使用 nuxt.js 实现了一波,经过测试后也确实能够被百度所收录,但是因为同时维护两份代码,有些耗时耗力,并且切换到 nuxt.js后,因为是服务器渲染,网站打开也变慢了很多,因此在种种因素下,也放弃了维护 nuxt_mogu_web 项目
nuxt.js版蘑菇博客
同时,后面也在积极的探索更优雅的 SEO 实现方案,预期是不会较大的改变现有逻辑的基础上,就能够实现。
回归到原始需求,为了提高用户体验我们用了 Vue、React 这些 SPA 技术、为了 SEO 我们用了 SSR、预渲染等技术。
不同技术方案有一定差距,不能兼顾优点。但仔细想,需要这些技术优点的 "用户",其实时不一样的,SPA 针对的是浏览器普通用户、SSR 针对的是网页爬虫,如 googlebot、baiduspider 等,那为什么我们不能给不同“用户”不同的页面呢,服务端动态渲染就是这种方案。
后来,陌溪在网上冲浪的时候,在 Github 上发现了 prender-alpine 这个开源项目
prerender项目
prender-alpine 的原理,在 Alpine Linux 上构建的轻量级 Prerender 容器,带有 Node 和 Headless Chrome
Prerender :可以当做是一个预渲染的容器,项目的原理其实就是相当于跑了一层 node.js 的 Render 层,帮助我们做服务器渲染。
针对爬虫的预渲染
服务端对请求的 user-agent 进行判断,浏览器端直接给 SPA 页面,如果是爬虫,需要通过 Prerender 容器动态渲染的 html 页面进行返回
完整的流程图如下,我们需要通过 nginx 识别出访问我们网站的用户是否是爬虫,还是普通用户,从而请求不同的页面。
完整流程蘑菇 SEO 改造
为了方便小伙伴们的使用,陌溪也把 prender-alpine 项目放到了蘑菇镜像仓库,同时提供了一份 prerender.yml 文件
version: '3.1'<br />services:<br /> prerender:<br /> restart: always<br /> image: registry.cn-shenzhen.aliyuncs.com/mogublog/prerender<br /> container_name: prerender<br /> ports:<br /> - 3000:3000<br /> environment:<br /> MEMORY_CACHE: 1<br /> CACHE_MAXSIZE: 300<br /> CACHE_TTL: 6000<br /> networks:<br /> - mogu<br /><br />networks:<br /> mogu:<br /> external: true<br />
只需要将其拷贝到蘑菇一键部署的 yaml 目录下即可,同时使用命令进行启动
docker-compose -f prerender.yml<br />
启动完成后,可以看到项目运行在 3000 端口
容器运行
搭建完成后,我们可以打开浏览器进行测试,打开 172.184.166.150:3000/ 页面,后面挂着的就是你要预渲染的页面,如果能够打开下面的页面,说明已经预渲染成功了
预渲染成功
同时,通过查看网页源码,也能够看到页面的文字和链接了,这样爬虫也就能爬取到我们网站的其它信息
查看源码
下面,我们就需要改造我们的 nginx 了,通过 $http_user_agent 来识别请求的 user_agent 是否属于 Google、百度、必应、360…. 的爬虫
如果识别成功,那么会跳转到刚刚搭建的 prerender 容器中进行预渲染,否则继续返回原来的 Vue 页面
下面是完整的 nginx 配置文件 vue_mogu_web.conf
server {<br /> listen 80;<br /> server_name localhost;<br /><br /> add_header Access-Control-Allow-Origin *;<br /> add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';<br /> add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,lang,access-token';<br /> if ($request_method = 'OPTIONS') {<br /> return 204;<br /> }<br /><br /> root /usr/share/nginx/html/;<br /> index index.html;<br /><br /> location / {<br /> try_files $uri @render;<br /> }<br /><br /> location @render {<br /> set $render 0;<br /> if ($http_user_agent ~* "googlebot|bingbot|Baiduspider|360Spider|Sogou web spider|Bytespider") {<br /> set $render 1;<br /> }<br /><br /> if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {<br /> set $render 0;<br /> }<br />
if ($render = 1) {<br /> set $render "172.184.166.150:3000";<br /> rewrite .* /$scheme://$host:$server_port$request_uri? break;<br /> proxy_pass http://$render;<br /> }<br /><br /> if ($render = 0) {<br /> rewrite .* /index.html break;<br /> }<br /><br /> }<br />}<br />
注意,这个配置需要修改 vue_mogu_web.yml,把刚刚创建的配置文件挂载出来
version: '3'<br />services:<br /> #授权服务<br /> vue_mogu_web:<br /> image: registry.cn-shenzhen.aliyuncs.com/mogublog_business/vue_mogu_web:latest<br /> container_name: vue_mogu_web<br /> restart: always<br /> ports:<br /> - 9527:80<br /> networks:<br /> - mogu<br /> env_file:<br /> - ../config/vue_mogu_web.env<br /> environment:<br /> - COMPOSE_PROJECT_NAME=vue_mogu_web<br /> volumes:<br /> - ../config/vue_mogu_web.conf:/etc/nginx/conf.d/default.conf<br /><br />networks:<br /> mogu:<br /> external: true<br />
修改完成后,就可以开始使用接口工具进行测试了,通过设置 Headers 设置请求头信息,加入 User-agent = googlebot 用来标识这个请求是爬虫
调用接口可以看到,我们的页面能够把完整的数据给返回
模拟爬虫请求
同时,如果我们把 User-agent 删掉,这个时候返回的就是我们正常的 SPA 单应用页面了
模拟正常用户
到这里,网站针对爬虫专属的 SEO 就改造完毕了
经过几天测试后,通过 site: 进行查询,也可以看到被百度收录了好几个页面了~
百度收录多个页面
好了,本期蘑菇 SEO 优化讲解就到这里
我是陌溪,我们下期再见~
往期推荐
博主就职于字节跳动商业化部门,一直维护校招笔记仓库LearningNote「在Gitee上已有5kstar,地址」,公众号上的文章也会在此同步更新,欢迎各位小伙伴一起交流学习,回复「PDF」获取PDF笔记。
同时,想要丰富项目经验的小伙伴,可以参考我维护的开源微服务博客项目:蘑菇博客「Gitee官方推荐项目,博客类搜索排名第一,在Gitee已有4.7Kstar,仓库地址:」。
本公众号申请较晚,暂时没有开通留言功能,欢迎小伙伴们添加我的私人微信coder_moxi【备注:加群】,我将邀请你加入到蘑菇博客交流群中,欢迎小伙伴们找陌溪一块聊天唠嗑,共同学习进步。最后,如果你觉得本文对你有所帮助,麻烦小伙伴们动动手指给文章点个「赞」和「在看」,非常感谢大家的支持。
快来找陌溪唠嗑吧
点个在看你最好看