基于scrapy-splash进行单页应用网站seo处理

最新推荐文章于 2021-07-16 11:40:15 发布

weixin_34168700

最新推荐文章于 2021-07-16 11:40:15 发布

阅读量274

点赞数

原文链接：https://juejin.im/post/5c8f7f236fb9a070ab7e1cae

版权

提示，本文暂时对百度收录有不确定性。(google/bing等收录成功，并能正常自定义title,meta,content)

单页应用在于seo上有较大局限

异步加载的数据
异步加载的组件

实现原理

scrapy-splash：基于docker的无头浏览器，类似phantomjs（16年已经不再更新了），同时提供api可以获取网页内容（可以把他作为一个没有界面的浏览器，会按照正常浏览器的顺序打开网页加载依赖，发送请求，渲染界面）
nginx或其他中间件中判断当前访问的请求头为baiduspider/googlebot之类的搜索引擎头，利用proxy_pass将请求转至自己写的node服务或者响应的服务
我们的node服务可以执行get请求向scrapy-splash获取经nginx转向得到的页面整体，将这个页面由node返回给搜索引擎，这里还可以补充诸如301等跳转的功能，自定义强度高

实现步骤

1.下载docker安装～splash，参考文章最后的安装链接

2.执行splash,值得注意的是对于单页应用需要关闭私有模式https://splash-cn-doc.readthedocs.io/zh_CN/latest/faq.html#how-do-i-disable-private-mode

    docker run -d -p 8050:8050 --memory=4.5G --restart=always scrapinghub/splash:3.1 --disable-private-mode --maxrss 4000
    -d后台运行 --memory最高占用内存为4.5G --restart崩溃重启 --disable-private-mode 用于处理单页应用的私有模式 --maxrss 内存缓冲
复制代码

3.开启完毕之后你可以尝试一下,检测是否能渲染百度的界面
- http://127.0.0.1:8050/render.html?url=http://www.baidu.com

4.至为关键的一步nginx配置

    upstream spider_server {
        server localhost:3000;
    }
    server {
        listen       80;
        server_name  www.test.com;
        # 当UA里面含有Baiduspider,或者相关的spider的时候，流量Nginx以反向代理的形式，将流量传递给spider_server，文件相关不需要处理
	    set $prerender 0;
    	if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|		W3C_Validator") {
        	set $prerender 1;
   	    }
    	if ($args ~ "_escaped_fragment_") {
        	set $prerender 1;
    	}
    	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)") {
        	set $prerender 0;
    	}
	    if ($prerender = 1) {
            proxy_pass  http://spider_server;
        }
        root /Users/dist; # 自己的dist目录
    	try_files $uri $uri/ @router;   # 这个是history模式需要的
    	index index.html index.html;
    }

复制代码

4.1 如何检测这个nginx配置有没错呢，自己拿postman设置个请求头为baiduspider发给自己的80看看能否转到3000端口呗～

5.node服务配置

这一步相对简单，主要考虑缓存与301，这样下一次搜索引擎获取页面时的相对速度就能提升

memory-cache控制缓存释放，在首次访问时采用cache.get(req.originalUrl)对当前的链接及对应数据进行缓存在下次访问时即可弹出cache.put(req.originalUrl,result.data)
if (无效页面) {res.redirect(301,'www.xx.com')}

复制代码

我们可以采用pm2对该应用进行管理（负载均衡及挂机重启）

    pm2 start xxx --max_memory_restart 99999M
复制代码

6.究极重要，超级有效的是在做完以上步骤之后最好为你的网站生成一个全网的sitemap!并提交到谷歌searchconsole百度站长！谷歌生效时间估计在3天内，百度。。。我至今3个月过去还不行（评分下降/海外地址太卡/目前方案不兼容百度/被判断作弊等）。但幸运的是我司只做海外
- 相关内容
  - npm install sitemap node-schedule 每晚定时任务生成sitemap,保证新页面及时被google收录
  - pm2 xxxx 挂掉重启
```
 <url>
    <loc>https://www.xxx.com/sitemap</loc>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
</url>
复制代码
```

参考文献

www.deboy.cn/prerender-v… （对搜索引擎的请求头判断后基于prerender预渲染完毕后返回给搜索引擎，同时缓存，避免下一次对服务器的访问）
ahrefs.com/blog/zh/seo… （深入理解谷歌搜索引擎的优化策略）
www.jianshu.com/p/e1520ea19… （splash的基本操作,及安装过程）
splash-cn-doc.readthedocs.io/zh_CN/lates… （文档！！重点）

转载于:https://juejin.im/post/5c8f7f236fb9a070ab7e1cae