moozik

vue前端页面如何用rewrute进行SEO优化
前言做了个小网站参加杨超越杯编程大赛凑热闹,我本身不会前端找了个同学写vue,现在发现vue的前端对搜索引擎的爬虫...
扫描右侧二维码阅读全文
25
2019/03

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

前言

做了个小网站参加杨超越杯编程大赛凑热闹,我本身不会前端找了个同学写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,然后寻找是否已定义对应的文件,再展示给爬虫就可以了。

rewrute关键字科普

参考:http://httpd.apache.org/docs/current/mod/mod_rewrite.html

HTTP标头:

  • HTTP_ACCEPT
  • HTTP_COOKIE
  • HTTP_FORWARDED
  • HTTP_HOST
  • HTTP_PROXY_CONNECTION
  • HTTP_REFERER
  • HTTP_USER_AGENT

连接和请求:

  • AUTH_TYPE
  • CONN_REMOTE_ADDR
  • CONTEXT_PREFIX
  • CONTEXT_DOCUMENT_ROOT
  • IPV6
  • PATH_INFO
  • QUERY_STRING
  • REMOTE_ADDR
  • REMOTE_HOST
  • REMOTE_IDENT
  • REMOTE_PORT
  • REMOTE_USER
  • REQUEST_METHOD
  • SCRIPT_FILENAME

日期和时间:

  • TIME_YEAR
  • TIME_MON
  • TIME_DAY
  • TIME_HOUR
  • TIME_MIN
  • TIME_SEC
  • TIME_WDAY
  • TIME

服务器内部:

  • DOCUMENT_ROOT
  • SCRIPT_GROUP
  • SCRIPT_USER
  • SERVER_ADDR
  • SERVER_ADMIN
  • SERVER_NAME
  • SERVER_PORT
  • SERVER_PROTOCOL
  • SERVER_SOFTWARE

其他:

  • API_VERSION
  • CONN_REMOTE_ADDR
  • HTTPS
  • IS_SUBREQ
  • REMOTE_ADDR
  • REQUEST_FILENAME
  • REQUEST_SCHEME
  • REQUEST_URI
  • THE_REQUEST
最后修改:2019 年 03 月 25 日 03 : 26 PM

1 条评论

  1. moozik

    其实根本没必要,因为在乎seo了根本不会用vue

发表评论