vue前端页面如何用rewrute进行SEO优化

moozik

2019 年 03 月 25 日

3969 次浏览

1 条评论

700字数

技术

前言

做了个小网站参加杨超越杯编程大赛凑热闹，我本身不会前端找了个同学写vue，现在发现vue的前端对搜索引擎的爬虫非常不友好，因为页面是空的。比如下面的html。

越言越语

<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>杨超越</title><link href=/css/chunk-0ca699f0.aa8247b9.css rel=prefetch><link href=/css/chunk-0d871063.319857f1.css rel=prefetch><link href=/js/chunk-0ca699f0.a6b13964.js rel=prefetch><link href=/js/chunk-0d871063.58914267.js rel=prefetch><link href=/js/chunk-2d21751c.ea935871.js rel=prefetch><link href=/css/app.dd2dded8.css rel=preload as=style><link href=/js/app.4c71638e.js rel=preload as=script><link href=/js/chunk-vendors.3b8d03aa.js rel=preload as=script><link href=/css/app.dd2dded8.css rel=stylesheet></head><body><noscript><strong>We're sorry but chaoyue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.3b8d03aa.js></script><script src=/js/app.4c71638e.js></script></body></html>

这样下去肯定不行的，只收录了一个标题，内容也没有关键字也没有就凉了。

rewrite重写

我的思路是这样，让apache识别出来哪些请求是爬虫请求，然后把爬虫的请求重定向到我写好的文件里面。

我本来的想法是下面这样的

RewriteCond %{HTTP_USER_AGENT} ^.*Baiduspider
RewriteRule ^(.*)$ spider/%{REQUEST_URI} [L]

上面这个看起来能访问到spider目录，然后在spider目录里面给爬虫准备的页面，可是%{REQUEST_URI}里面的地址是重写之后的地址不是重写之前的，这里也不知道是不是我的写法有问题，还请大佬指教。

我用下面的规则还有一小段php实现了

RewriteCond %{HTTP_USER_AGENT} ^.*Baiduspider
RewriteRule .* spider/ [L]

spider/index.php

<?php
$route = [
    '/'=>'index.html',
    ];
foreach($route as $uri=>$file){
    if($_SERVER['REQUEST_URI'] === $uri){
        require_once($file);
        exit;
    }
}
header('HTTP/1.1 404 Not Found');

发现爬虫后，将地址重定向到spider目录，里面的php脚本会查询$_SERVER['REQUEST_URI']参数找到本次访问的uri，然后寻找是否已定义对应的文件，再展示给爬虫就可以了。