vue.js做到seo的方法:1、使用SSR伺服器渲染;2、在【Nuxt.js】執行generate靜態化打包時,需要動態路由先生成靜態頁;3、預渲染【 prerender-spa-plugin】;4.使用Phantomjs針對爬蟲做處理。
【相關文章推薦:#vue.js##】
vue.js做到seo的方法:
1、SSR伺服器渲染
關於伺服器渲染:Vue官網介紹,對Vue版本有要求,對伺服器也有一定要求,需要支援nodejs環境。 使用SSR權衡之處:if(process.browser){ console.log(window); }
if (process.browser) { var { WOW } = require('wowjs'); require('wowjs/css/libs/animate.css'); }
// 并发加载多个接口: async asyncData ({ app, query }) { let [resA, resB, resC] = await Promise.all([ app.$axios.get('/api/a'), app.$axios.get('/api/b'), app.$axios.get('/api/c'), ]) return { dataA: resA.data, dataB: resB.data, dataC: resC.data, } }
/list/:id' ==> '/list/123
async asyncData ({ app, query }) { console.log(app.context.params.id) //123 }
/list?id=123
async asyncData ({ app, query }) { console.log(query.id) //123 }
2、靜態化
在 Nuxt.js 執行 generate 靜態化打包時,動態路由會被忽略。-| pages/ ---| index.vue ---| users/ -----| _id.vue
// nuxt.config.js module.exports = { generate: { routes: [ '/users/1', '/users/2', '/users/3' ] } }
// nuxt.config.js import axios from 'axios' export default { generate: { routes: function () { return axios.get('https://my-api/users') .then((res) => { return res.data.map((user) => { return { route: '/users/' + user.id, payload: user } }) }) } } }
async asyncData ({ params, error, payload }) { if (payload) return { user: payload } else return { user: await backend.fetchUser(params.id) } }
3、預渲染prerender-spa-plugin
#如果你只是用來改善少數行銷頁面(例如/, /about, /contact 等)的SEO,那你可能需要預渲染。無需使用 web 伺服器即時動態編譯 HTML,而是使用預先渲染方式,在建置時 (build time) 簡單地產生針對特定路由的靜態 HTML 檔案。優點是設定預渲染更簡單,並且可以將你的前端作為一個完全靜態的網站。$ cnpm install prerender-spa-plugin --save
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径,也可以与webpakc打包的一致。 // 下面这句话非常重要!!! // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname,'dist'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。 routes: ['/', '/product','/about'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; } }
new Vue({ router, render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app')
4、使用Phantomjs针对爬虫做处理
Phantomjs是一个基于webkit内核的无头浏览器,即没有UI界面,即它就是一个浏览器,只是其内的点击、翻页等人为相关操作需要程序设计实现。
虽然“PhantomJS宣布终止开发”,但是已经满足对Vue的SEO处理。
这种解决方案其实是一种旁路机制,原理就是通过Nginx配置, 判断访问的来源UA是否是爬虫访问,如果是则将搜索引擎的爬虫请求转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫。
具体代码戳这里: vue-seo-phantomjs
。
要安装全局 phantomjs ,局部 express ,测试:
$ phantomjs spider.js 'https://www.baidu.com'
如果见到在命令行里出现了一推html,那恭喜你,你已经征服PhantomJS啦。
启动之后或者用postman在请求头增加 User-Agent 值为 Baiduspider ,效果一样的。
部署上线
线上要安装 node 、 pm2 、 phantomjs ,nginx相关配置:
upstream spider_server { server localhost:3000; } server { listen 80; server_name example.com; location / { 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://spider_server; } } }
优势:
完全不用改动项目代码,按原本的SPA开发即可,对比开发SSR成本小不要太多;
对已用SPA开发完成的项目,这是不二之选。
不足:
部署需要node服务器支持;
爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;
如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,解决方法是判断访问的IP,是否是百度官方爬虫的IP。
总结
如果构建大型网站,如商城类,别犹豫,直接上SSR服务器渲染,当然也有相应的坑等你,社区较成熟,英文好点,一切问题都迎刃而解。
如果只是个人博客、公司官网这类,其余三种都可以。
如果对已用SPA开发完成的项目进行SEO优化,而且支持node服务器,请使用 Phantomjs 。
很少写文章,这是我这个月对Vue SEO方案的探索,写的不对的地方请指出,谢谢理解~
相关免费学习推荐:javascript(视频)
以上是vue.js如何做到seo的詳細內容。更多資訊請關注PHP中文網其他相關文章!