Phantomjs对vue进行seo优化

梦幻空花~

已于 2023-08-25 19:13:46 修改

阅读量4.6k

点赞数 18

分类专栏： vue seo 文章标签： seo vue nginx

于 2021-08-08 17:08:50 首次发布

本文链接：https://blog.csdn.net/qq_38868959/article/details/119515492

版权

vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

seo

1 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用PhantomJS解决Vue应用的SEO问题，通过Nginx代理和PhantomJS解析，确保搜索引擎能抓取到完整内容。步骤包括安装PhantomJS、配置解析模板和设置Nginx条件转发。

摘要由CSDN通过智能技术生成

简介

为什么说VUE不利于SEO，SEO本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，而搜索引擎请求到的html是没有渲染数据的，所以就很不利于内容被搜索引擎搜索到。
Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”，但是已经满足对Vue的SEO处理。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置，判断访问的来源UA是否是爬虫访问，如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫。

1.安装PhantomJS

下载 PhantomJS
1.1：从官网http://phantomjs.org/download.html下载phantomjs-2.1.1-windows.zip

1.2：解压出来，然后添加系统环境变量：如我的文件夹是在D:\install\phantomjs-2.1.1-windows。我们就在系统环境变量中添加：D:\install\phantomjs-2.1.1-windows\bin即可。(不会设置环境变量的可以百度下)

1.3：随便打开一个命令窗口，运行命令phantomjs -v,如果出现版本号，则说明设置环境变量成功。

2.下载解析模板

2.1：下载地址：https://github.com/lengziyu/vue-seo-phantomjs
2.2：下载后，打开命令栏输入npm i，先安装下express依赖包。
在这里插入图片描述
2.3打开server.js文件，设置要解析的网址：http://localhost:8000/，(等下我们用nginx开启8000端口)。

3.设置nginx

在这里插入图片描述

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="<p>welcome to nginx</p>"
</script>
</html>

4.开始测试

4.1:到vue-seo-phantomjs-master文件下，启动server.js服务：node server.js
在这里插入图片描述
4.2:到nginx-1.21.1文件夹下，启动nginx：start nginx

4.3：打开谷歌浏览器然后输入：http://localhost:8000/。查看页面源代码，我们发现body中还是空的，和我们html写的代码是一样的，这是因为我们没有设置user-agent,没有触发代理。
在这里插入图片描述

4.4：设置user agent，按F12->右上角三个小点->More tools-Network conditions 把Use Browser default的勾选去掉，写上Baiduspider
在这里插入图片描述

4.5上面设置好后，刷新下页面。可以看到我们server服务窗口已经把解析到的代码返回了
在这里插入图片描述
在我们浏览器页面查看页面源代码，也可以到js中的代码已经添加到body中去了。到这里，恭喜你已经seo优化成功了！

4.7：以上是windows环境下的seo优化测试，服务器上也差不多，后续也会出服务器上的教程。如果您对上面的内容有疑问的话，可以留言我哦~