Phantomjs对vue进行seo优化

Phantomjs对vue进行seo优化

  • 1.安装PhantomJS
  • 2.下载解析模板
  • 3.设置nginx
  • 4.开始测试

1.安装PhantomJS

  1. 下载 PhantomJS
    1.1:从官网http://phantomjs.org/download.html下载phantomjs-2.1.1-windows.zip
    Phantomjs对vue进行seo优化_第1张图片

    1.2:解压出来,然后添加系统环境变量:如我的文件夹是在D:\install\phantomjs-2.1.1-windows。我们就在系统环境变量中添加:D:\install\phantomjs-2.1.1-windows\bin即可。(不会设置环境变量的可以百度下)
    Phantomjs对vue进行seo优化_第2张图片
    Phantomjs对vue进行seo优化_第3张图片

    1.3:随便打开一个命令窗口,运行命令phantomjs -v,如果出现版本号,则说明设置环境变量成功。
    Phantomjs对vue进行seo优化_第4张图片

2.下载解析模板

2.1:下载地址:https://github.com/lengziyu/vue-seo-phantomjs
2.2:下载后,打开命令栏输入npm i,先安装下express依赖包。
Phantomjs对vue进行seo优化_第5张图片
2.3打开server.js文件,设置要解析的网址:http://localhost:8000/,(等下我们用nginx开启8000端口)。
Phantomjs对vue进行seo优化_第6张图片

3.设置nginx

Phantomjs对vue进行seo优化_第7张图片

3.1:在conf文件夹下的nginx.conf文件中写上(我用的nginx版本为:nginx-1.21.1)

 location / {
            root   html;
            index  index.html index.htm;
			  proxy_set_header  Host            $host:$proxy_port;
			      proxy_set_header  X-Real-IP       $remote_addr;
			      proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
			
			      if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
					proxy_pass  http://localhost:8081;
			      }
        }

3.2:把html文件夹下的index.html的内容改为:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>


</body>

<script>
	document.body.innerHTML="

welcome to nginx

"
</script> </html>

4.开始测试

4.1:到vue-seo-phantomjs-master文件下,启动server.js服务:node server.js
Phantomjs对vue进行seo优化_第8张图片
4.2:到nginx-1.21.1文件夹下,启动nginx:start nginx
Phantomjs对vue进行seo优化_第9张图片
4.3:打开谷歌浏览器然后输入:http://localhost:8000/。查看页面源代码,我们发现body中还是空的,和我们html写的代码是一样的,这是因为我们没有设置user-agent,没有触发代理。
Phantomjs对vue进行seo优化_第10张图片

4.4:设置user agent,按F12->右上角三个小点->More tools-Network conditions 把Use Browser default的勾选去掉,写上Baiduspider
Phantomjs对vue进行seo优化_第11张图片

4.5上面设置好后,刷新下页面。可以看到我们server服务窗口已经把解析到的代码返回了
Phantomjs对vue进行seo优化_第12张图片
在我们浏览器页面查看页面源代码,也可以到js中的代码已经添加到body中去了。到这里,恭喜你已经seo优化成功了!
Phantomjs对vue进行seo优化_第13张图片
4.7:以上是windows环境下的seo优化测试,服务器上也差不多,后续也会出服务器上的教程。如果您对上面的内容有疑问的话,可以留言我哦~

你可能感兴趣的:(vue,seo,seo,vue,nginx)