共计 11556 个字符，预计需要花费 29 分钟才能阅读完成。
当您的网站的内容被其他网站的网页引用时，您可能希望在用户点击链接时在网站中加载一个中间页面。这个中间页面通常是一个简单的页面，其目的是告诉用户他们将离开您的网站，并提供一个可以继续浏览的按钮。这种技术称为“网站外链跳转页面”。
在这篇文章中，我们将介绍如何创建一个网站外链跳转页面，并向您展示如何使用代码来实现这个功能。我们还将探讨一些有关 SEO 的注意事项，以确保您的网站不会因为使用外链跳转页面而降低搜索引擎排名。
一、安全加固
首先，加入了在鱼叔博客看到了的防止恶意请求的简单防护代码：
// 防止 WordPress 遭受恶意 URL 请求。From：http://blog.wpjam.com/m/block-bad-queries/
if(strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")) {@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}二、跳转方式
之前的代码使用的是 html 的 refresh 跳转方式：
<meta http-equiv="refresh" content="1;url=https://bai.du/">curl 到的是这样的一个结果：
<html>
<head>
<meta content="always" name="referrer" />
<script>try{if(window.opener&&window.opener.bds&&window.opener.bds.pdc&&window.opener.bds.pdc.sendLinkLog){window.opener.bds.pdc.sendLinkLog();}}catch(e) {};var timeout = 0;if(/bdlksmp/.test(window.location.href)){var reg = /bdlksmp=([^=&]+)/,matches = window.location.href.match(reg);timeout = matches[1] ? matches[1] : 0};setTimeout(function(){window.location.replace("http://www.baidu.com/")},timeout);</script>
<noscript>
<meta http-equiv="refresh" content="0;URL='http://www.baidu.com/'" />
</noscript>
</head>
<body></body>
</html>百度使用了一个跳转方式，成功伪造了新的 referrer 来路，从而屏蔽了搜索关键词。
很明显上面的代码使用了 html 的 refresh 和 JS 两种跳转模式，而 html 的用到了 noscript 标签，也就是说当浏览器不支持 js 的时候才会使用 html 跳转的方式。
所以，跳转代码也可以改进下：
<!-- html 备用跳转 -->
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
// 禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("zhang.ge");
if (!MyHOST.test(window.location.href)) {location.href="http://".MyHOST;}
location.href="<?php echo $url;?>";
}
// 延时 1S 跳转，可自行修改延时时间
setTimeout(link_jump, 1000);
// 延时 50S 关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>三、跳转加密
看过有博客对外链进行了一个 Base64 加密，所以我也加入了这次小改当中，而且还可以同时兼容不加密的跳转链接：
// 对传入数据进行判断，如果是加密串就进行解密：if ($t_url == base64_encode(base64_decode($t_url))) {$t_url = base64_decode($t_url);
}四、禁止收录
既然是外链跳转，肯定不希望被蜘蛛收录或抓取，所以多加入了一个禁止收录和抓取的 META 申明：
<meta name="robots" content="noindex, nofollow" />五、正式部署
①、完整跳转代码
I、PHP 版本
<?php
if(strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")) {@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
// 通过 QUERY_STRING 取得完整的传入数据，然后取得 url= 之后的所有值，兼容性更好
$t_url = preg_replace('/^url=(.*)$/i','$1',$_SERVER["QUERY_STRING"]);
// 此处可以自定义一些特别的外链，不需要可以删除以下 5 行
if($t_url=="zhangge") {$t_url="https://zhang.ge";} elseif($t_url=="baidu") {$t_url="https://www.baidu.com/";}
// 数据处理
if(!empty($t_url)) {
// 判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {$t_url = base64_decode($t_url);
}
// 对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i',$t_url,$matches);
if($matches){
$url=$t_url;
$title='页面加载中, 请稍候...';
} else {preg_match('/\./i',$t_url,$matche);
if($matche){
$url='http://'.$t_url;
$title='页面加载中, 请稍候...';
} else {$url = 'http://'.$_SERVER['HTTP_HOST'];
$title='参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://'.$_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
// 禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {location.href="http://" + MyHOST;}
location.href="<?php echo $url;?>";
}
// 延时 1S 跳转，可自行修改延时时间
setTimeout(link_jump, 1000);
// 延时 50S 关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style type="text/css">
body{background:#555}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:45%;left:50%;margin-left:-100px;margin-top:2px;color:#000;letter-spacing:1px;font-size:20px;font-family:Arial}.spinner{position:absolute;top:45%;left:50%;display:block;margin-left:-160px;width:1px;height:1px;border:20px solid rgba(255,0,0,1);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body>
<div class="loading">
<div class="spinner-wrapper">
<span class="spinner-text"> 页面加载中，请稍候...</span>
<span class="spinner"></span>
</div>
</div>
</body>
</html>
将以上代码保存为 go.php 上传到网站根目录即可。
II、HTML 版本
js+html 纯静态来搞定这个跳转功能。和 PHP 基本一致的功能，可以放心使用！
<html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="robots" content="noindex, nofollow" />
<meta name="applicable-device" content="pc,mobile">
<meta name="HandheldFriendly" content="true" />
<meta name="description" content="跳转页面" />
<meta name="keywords" content="跳转页面" />
<script>
var base64EncodeChars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var base64DecodeChars=new Array(-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,62,-1,-1,-1,63,52,53,54,55,56,57,58,59,60,61,-1,-1,-1,-1,-1,-1,-1,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,-1,-1,-1,-1,-1,-1,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,-1,-1,-1,-1,-1);function base64encode(str){var out,i,len;var c1,c2,c3;len=str.length;i=0;out="";while(i<len){c1=str.charCodeAt(i++)&255;if(i==len){out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt((c1&3)<<4);out+="==";break}c2=str.charCodeAt(i++);if(i==len){out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt(((c1&3)<<4)|((c2&240)>>4));out+=base64EncodeChars.charAt((c2&15)<<2);out+="=";break}c3=str.charCodeAt(i++);out+=base64EncodeChars.charAt(c1>>2);out+=base64EncodeChars.charAt(((c1&3)<<4)|((c2&240)>>4));out+=base64EncodeChars.charAt(((c2&15)<<2)|((c3&192)>>6));out+=base64EncodeChars.charAt(c3&63)}return out}function base64decode(str){var c1,c2,c3,c4;var i,len,out;len=str.length;i=0;out="";while(i<len){do{c1=base64DecodeChars[str.charCodeAt(i++)&255]}while(i<len&&c1==-1);if(c1==-1){break}do{c2=base64DecodeChars[str.charCodeAt(i++)&255]}while(i<len&&c2==-1);if(c2==-1){break}out+=String.fromCharCode((c1<<2)|((c2&48)>>4));do{c3=str.charCodeAt(i++)&255;if(c3==61){return out}c3=base64DecodeChars[c3]}while(i<len&&c3==-1);if(c3==-1){break}out+=String.fromCharCode(((c2&15)<<4)|((c3&60)>>2));do{c4=str.charCodeAt(i++)&255;if(c4==61){return out}c4=base64DecodeChars[c4]}while(i<len&&c4==-1);if(c4==-1){break}out+=String.fromCharCode(((c3&3)<<6)|c4)}return out}function utf16to8(str){var out,i,len,c;out="";len=str.length;for(i=0;i<len;i++){c=str.charCodeAt(i);if((c>=1)&&(c<=127)){out+=str.charAt(i)}else{if(c>2047){out+=String.fromCharCode(224|((c>>12)&15));out+=String.fromCharCode(128|((c>>6)&63));out+=String.fromCharCode(128|((c>>0)&63))}else{out+=String.fromCharCode(192|((c>>6)&31));out+=String.fromCharCode(128|((c>>0)&63))}}}return out}function utf8to16(str){var out,i,len,c;var char2,char3;out="";len=str.length;i=0;while(i<len){c=str.charCodeAt(i++);switch(c>>4){case 0:case 1:case 2:case 3:case 4:case 5:case 6:case 7:out+=str.charAt(i-1);break;case 12:case 13:char2=str.charCodeAt(i++);out+=String.fromCharCode(((c&31)<<6)|(char2&63));break;case 14:char2=str.charCodeAt(i++);char3=str.charCodeAt(i++);out+=String.fromCharCode(((c&15)<<12)|((char2&63)<<6)|((char3&63)<<0));break}}return out}function doit(){var f=document.f;f.output.value=base64encode(utf16to8(f.source.value));f.decode.value=utf8to16(base64decode(f.output.value))};
function GetQueryString(name)
{var reg = new RegExp("(^|&)"+ name +"=(.*)$");
var r = window.location.search.substr(1).match(reg);
if(r!=null) {return unescape(r[2]);
} else {return window.location.pathname.replace("/goto/",""); // 注意代码中的 /goto/ 和跳转地址 /goto/ 保持一致，请记得自行修改！}
}
jump_url = GetQueryString("url");
// 若传入的是 base 加密数据，则进行解密处理
if(jump_url == base64encode(base64decode(jump_url))) {jump_url = base64decode(jump_url);
}
// 自定义一些特殊字符串的跳转，请根据实际需求自行发挥，比如：// 访问 "/goto/baidu" 会跳转到百度首页：if(jump_url=="baidu") {jump_url="https://www.baidu.com/";}
// 网址校验
var UrlReg = "^((http|https|thunder|qqdl|ed2k|Flashget|qbrowser|ftp|rtsp|mms)://)";
if(jump_url == null || jump_url.toString().length<1 || !jump_url.match(UrlReg)) {
document.title = "参数错误，正在返回首页...";
jump_url = location.origin;
}
// 延时执行跳转
setTimeout(function link_jump()
{
// 防止盗用，但是微信等客户端无法取得 referrer，因此这里允许了 referrer 为空的访问，请自行修改 zhang.ge 为自己的域名
var MyHOST = new RegExp("zhang\.ge");
if (!MyHOST.test(document.referrer) && document.referrer.length ) {alert("请不要盗用本站跳转页面！");
location.href = "https://zhang.ge/";
return;
}
location.href = jump_url;
},1000);
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title> 页面加载中，请稍候...</title>
<style type="text/css">
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:#3498db}#loader-container{width:188px;height:188px;color:#fff;margin:0 auto;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);border:5px solid #3498db;border-radius:50%;-webkit-animation:borderScale 1s infinite ease-in-out;animation:borderScale 1s infinite ease-in-out}#loadingText{font-family:"Microsoft YaHei",Helvetica,Arial,Lucida Grande,Tahoma,sans-serif,Raleway,sans-serif;font-size:1.4em;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%)}@-webkit-keyframes borderScale{0%{border:5px solid #fff}50%{border:25px solid #3498db}100%{border:5px solid #fff}}@keyframes borderScale{0%{border:5px solid #fff}50%{border:25px solid #3498db}100%{border:5px solid #fff}}
</style>
</head>
<body>
<div id="loader-container"><p id="loadingText"> 页面加载中...</p></div>
</body>
</html>
选择 JS 版本将以上代码保存为 go.html 上传到网站根目录即可。
Ps：2 个版本的功能是一致的，优缺点区别：PHP 版本是动态的，会略微产生服务器的性能负载，而 HTML 版本则需要浏览器支持 JS 才可以功能。不过目前来看，绝大部分浏览器都是支持的！
②、Nginx 伪静态
之前的代码用的都是“go.php?url= 外链地址”的形式，经常也看到有个别网站对 外链跳转 做了伪静态，也就是“/go/ 外链”这种形式。
这次，也试了下，感觉还不错，所以就整了下。只要在 Nginx 中加入如下规则即可：
I、PHP 版本
# 外链跳转伪静态 php 版本
rewrite ^/go/(.*)$ /go.php?url=$1 last; #注意 go.php 的实际路径，默认为网站根目录II、HTML 版本
# 外链跳转伪静态 HTML 版本
rewrite ^/go/(.*)$ /go.html?url=$1 last; #注意 go.html 的实际路径，默认为网站根目录正文完
