当前位置:首页 / 编程技术 / 后端技术 / AngularJS SEO 简易教程
AngularJS SEO 简易教程
发布时间:2022/07/10来源:编程网

1. 搭建Prerender服务

实际上就是搭建了一个Prerender服务器,给它传递参数,它帮你把JS动态页面静态化.

  1. git clone https://github.com/prerender/prerender.git 然后cd Prerender进入目录

  2. npm install 安装模块依赖

  3. node server.js 运行服务(可用nohup node server.js &使其运行于后台)

这里有一个坑,Prerender默认用3000端口,注意你的端口不要被占用了,否则它会给出很奇怪的错误提示.

2. 修改nginx.conf

要达到以下目的:

  1. 普通用户访问,会看到正常页面(交给localhost:4000去处理请求)

  2. 如果是爬虫访问,就交给Prerender服务去处理请求

因此,修改nginx.conf的server段如下:

    server {
        listen       80;
        server_name  www.tomi.in tomi.in;
        location ~* / {
            set $prerender 0;
            if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot") {
                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)") {
                set $prerender 0;
            }
            if ($prerender = 1) {
                rewrite .* /$scheme://$host$request_uri? break;
                proxy_pass http://localhost:3000;
            }
            if ($prerender = 0) {
                proxy_pass http://localhost:4000;
            }
        }
    }

这里做了两件事:

  • 如果是搜索引擎爬虫(header判断)或者有指定的参数_escaped_fragment_那么就反向代理给内部的Prerender服务(localhost:3000),让它去渲染页面

  • 如果是真实的用户,就走正常渠道(localhost:4000)

3. Demo

嗯,之前给过demo,但现在处于安全性的考虑,大家还是直接在百度搜索site:lsjlt.com好了。

分享到:
免责声明:本文仅代表文章作者的个人观点,与本站无关,请读者仅作参考,并自行核实相关内容。文章内容来源于网络,版权归原作者所有,如有侵权请与我们联系,我们将及时删除。
资讯推荐
热门最新
精品工具
全部评论(0)
剩余输入数量90/90
暂无任何评论,欢迎留下你的想法
你可能感兴趣的资讯
换一批