基于AngularJS+nodeJS的单页web的SEO处理

来源:互联网 时间:2017-01-22


前言


转载请注明出处,然后完整转载。



做过单页web的都知道,页面可以理解为只是一个空架子,里面什么都没有,比如我的网站 多色图片网
的核心显示部分:




<
section
class=
"contentcontent-top"
>



<
section
id=
"doocr-header-top"
class=
"text-center"
>



<
article
class=
"jumpotroncontainer-fluid"
>



<
h1
class=
"top-header-title"
>
多色网--做中国最好的在线图片处理网站 </
h1
>



</
article
>


</
section

>




<
section
>




<sectionui-viewclass=" section-style
"></section>



</
section
>



</
section
>



都是由ui-route来做的页面路由,js完成的操作是不会被seo解析的。



首先,网上有很多说单页web处理seo的办法,比如AngularJS的处理,都是这样做的:



在html里面添加:



<

meta


name=


"fragment"


content=


"!"

>



然后,google看到这一行,就认为这个site需要解析html,那么就会在之后的爬虫请求网页的时候,在后面添加一个query参数:_escaped_fragment_=,这里=后面是没有东西的。最后就能看到爬的过程:



"GET /?_escaped_fragment_= HTTP/1.1"



那么网站就需要根据这个查询参数来做预渲染 ,但是这种处理,中国的搜索引擎是不支持的,baidu bing等都不支持(我看过了他们爬虫的请求报文。。。)



没有关系,现在我就来提供一种对自己网站几乎无损的操作,来实现seo的需求,所以本文旨在提供一种适配国内搜索引擎比如bing baidu sougo等的SEO的方案。



正文


1.自己做一个prerender的server:


详细的使用说明参考:



https://github.com/prerender/prerender



大部分用不上,按照我这里的操作就可以了。


$gitclonehttps://github.com/prerender/prerender.git$cdprerender$npminstall


$nodeserver.js



当然我在这个上面修改了,做了一个pm2的job启动:



https://git.doocr.com:15001/ztz0223/Seo-Prerender-Server



因为,这个server启动之后默认是监听3000接口的,这样,很容易和使用默认node的接口冲突所以我添加了一个pm2的ecosystem的脚本: ecosystem.config.js



module. exports
={







apps

:[



{




name

:
"Prerender"

,




script

:
"server.js"

,




log_date_format

:
"YYYY-MM-DDHH:mmZ"

,




env

:{




PORT

:

"12001"





}

}


]




};



之后只要pm2 start ecosystem.config.js, 就能在12001端口上面侦听请求了。



这个server其实很简单,比如server的url是 http://prerender:12001
,那么就是在收到一个请求之后:



GET http://prerender:12001/https://www.google.com



server会认为后面的
https://www.google.com是请求的网址,然后使用phantomjs来获取里面的js渲染化之后的内容,简单的理解就是这样做:





var

page
=require(
'webpage'

). create
();




phantom

.
outputEncoding

=
"gbk"

;


page
. open
(
"http://www.doocr.com/about"

,



function


(status){





if

(status===
"success"

){




console

. log
( page
.
content

);




}
else

{




console

. log
(
"Pagefailedtoload."

);


}



phantom

. exit

(


0


);




});



把获取到的page的东西返回给请求端就行了,也就是这里的: page
.
content




有人有疑问,我请求的是

https://www.google.com,怎么会变成了
http://prerender:12001/https://www.google.com,这个就是后面要说的中间件自己处理的,自己组装了一下。



2.单页web网站seo适配


node网站一般都是基于connect或者express的,使用上面说的server的网站提供的中间件就可以了,具体参考:



https://github.com/prerender/prerender-node



这里就说一下,实际上怎么操作:



安装



$npminstallprerender-node--save



然后使用,在express里面:




var

prerender
=

require


(
'prerender-node'

);



prerender
. set
(
'prerenderServiceUrl'

,
'http://localhost:12001'

);




//Seowithprerender



app
. use
( prerender
);



这里要指定自己server的url:
prerenderServiceUrl 为你自己的prerender server的url,记住是url不是host,要加侦听端口的。



如上面这样,就可以了,这个中间件就会把带了_escaped_fragment_=这个查询字符串的请求网址发送给server解析了。



3.web服务适配


现在做site,中间都要使用服务代理,apache或者nginx等,我使用的是nginx,这里说说nginx的办法。很简单,就是检查user agent是不是你需要处理的搜索引擎就行了,比如我的nginx代码这么写的:



server



{



listen 80;



server_tokens off; ## Don't show the nginx version number, a security best practice



## Increase this if you want to upload large attachments



## Or if you want to accept large git objects over http



client_max_body_size 0;



server_name doocr.com www.doocr.com;



location / {



proxy_redirect off;



proxy_set_header Host $host;



proxy_set_header X-Real-IP $remote_addr;



proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;



proxy_pass http://localhost:4050;



client_max_body_size 18m;



}



access_log /var/log/nginx/www.doocr.com.log;



}



添加一个处理:



if ($http_user_agent ~* (baiduspider|googlebot|soso|bing|sogou|yahoo|sohu-search|yodao|YoudaoBot|robozilla|msnbot|MJ12bot|NHN|Twiceler|Sitemaps)){



set $args $args&_escaped_fragment_=;



}



放在这个前面:



proxy_pass http://localhost:4050;



重启nginx服务



最后的agent检查有一个Sitemaps,这个是是个什么东西?这个是网站:



https://www.xml-sitemaps.com/



我都是用这个在线生成sitemap,他会用自己的user agent,如果他变了,这里也要改。否则你生成不了sitemap,总不至于自己去写sitemap吧,小网站自便了。



4.测试


最重要的也要算上测试,怎么知道这么处理对不对?



其实很简单,curl,指定一个agent就好了,比如我要指定bing的爬虫,来看看爬出来的结果:



curl -A
"Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)"

http://www.doocr.com



同时不指定爬虫,再看看结果,就很清楚了:



curl

http://www.doocr.com



就可以了。



相关阅读:
Top