在百度CDN中使用EdgeJS
|

Edge SEO，边缘计算能给你带来什么？

作者Hermes Ma

马老师第一次接触Edge SEO🤖是在2019年读了Dan Taylor在SEJ的文章《Getting Started with Edge SEO: What You Need to Know》即便是今天看来，该文章也是所有对Edge SEO感兴趣的同学应该去读一下的。2020年的时候，本来是想拿Edge SEO写一篇实例，也是答应小忻同学🦦的，谁知挖了坑忘了填了，这才一直留到现在。🦥

什么是Edge SEO？

Edge SEO 是一种技术 SEO 方法，可让你在无需开发人员帮助的情况下更快地进行网站更新。它的名字来源于“边缘计算”，SEO 使用边缘计算技术来启动更新，而无需直接与网站的基础设施进行交互。

使用边缘搜索引擎优化，企业可以减少对开发人员的依赖，同时让他们（和你自己）放心，你所做的更改是暂时的并且很容易恢复。并且因为你可以更快地进行网站更新，你也可以更快地开始看到 SEO 结果。

举个例子，有个页面的<title>标签需要修改。要去修改这个标签，你要么去CMS后台自行更新，要么拜托技术部门为你更新。他们更新完了要等下一次网站批量更新发布，这么做就耽误事了。现在有了边缘计算，你的更改可以在CDN上更改。这个页面本来就不需要回源的，或者即便回源还是可以更改。那么你就不需要对源服务器进行更改而快速发布了。

Edge SEO实例：返回204

我们举一个例子。不久前马老师介绍了Image SEO怎么操作。其中提到了防止在Google Image结果中直接展示源尺寸的方法。那就是当请求图片的referer为Google域名时返回204状态码。这个过程我们就可以通过Edge SEO来完成。

在百度CDN中使用EdgeJS
在百度CDN中使用EdgeJS

事实上百度的CDN就支持EdgeJS，因为极诣使用的是百度的CDN（百度打钱），就以此举例，其他供应商的Edge特性大同小异。

内容分发网络CDN > EdgeJS边缘服务 > 新建EdgeJS任务。选择你的域名，贴入下面的代码。然后选择调试发布即可。

var refers = ['https://*.google.com/*','https://*.google.com.hk/*','https://*.google.co.jp/*'];
var i = 0;
var referer = r.headersIn['referer'];
var url = r.uri;
for (; i < refers.length; i += 1) {
    if (baidu_utils.matchWildcard(referer, refers[i])) {
        if (url.includes('.jpg')||url.includes('.png')||url.includes('.gif')||url.includes('.jpeg')) {
            r.return(204);
            return;
        }
    }
}

上面的代码逻辑简单，当同时满足请求url为图片文件AND来源referer为谷歌时，返回204状态码。实际效果如下图。

点击结果后的详情中只显示低像素的缩略图
点击结果后的详情中只显示低像素的缩略图

我们可以发现，短短几行代码我们就省去了许多在CMS后端的开发。更重要的是，我们避免了更改服务期，快速且安全地进行了SEO部署。

Edge SEO实例：更改页面内容

上面我们小试牛刀了一把，当然EdgeJS这样的边缘计算更多可以用于改变文档的内容。当我们进行部署的时候可以通过特定的User Agent来调试。这样只有你自己才会受到影响。

比如下面这段代码，马老师在原来代码的基础上添加了几行，因为对一个域名只能添加一个任务：

var refers = ['https://*.google.com/*','https://*.google.com.hk/*','https://*.google.co.jp/*'];
var i = 0;
var referer = r.headersIn['referer'];
var ua = r.headersIn['User-Agent'];
var url = r.uri;
for (; i < refers.length; i += 1) {
    if (baidu_utils.matchWildcard(referer, refers[i])) {
        if (url.includes('.jpg')||url.includes('.png')||url.includes('.gif')||url.includes('.jpeg')) {
            r.return(204);
            return;
        }
    }
    if(ua=="Hermes Test UA"){
        r.status = 200;
        r.headersOut['Content-Type']="text/html;charset=utf-8";
        r.sendHeader();
        r.send("<html><head><title>Hello Hermes</title></head><body>hello world</body></html>");
        r.finish();
        return;
    }
}

当我们把浏览器User Agent设为”Hermes Test UA“时，就能返回hello world页面。

对自己返回Hello World页面
对自己返回Hello World页面

在这段代码的基础上，我们便可以应用ngx.fetch(url, [options])方法获得原本的Document。再对返回的Response对象进行文本处理便可以更新返回的Document。具体的实现方法就留给读者和读者的攻城狮朋友了。况且也不是大家都在用百度云的。🤣

总结一下

总的来说，Edge SEO方法就像网站整个被CDN劫持了。你可以对指定客户端针对指定请求返回指定响应。能劫持网站的当然不是普通的数字营销者，需要有技术能力加持。

原则上Edge SEO非常适合： 

  • 已经使用边缘计算的站点（或可能想要开始的站点）
  • 不灵活的网站，或不使用用户友好的内容管理系统 (CMS) 的网站 
  • 进行临时页面更改（例如特殊节日更新或限时促销）
  • 开发资源有限或等待更新时间较长的团队

懂技术的营销者是不是很可怕？分分钟可以把你公司的网站搞成个人心情展示。感谢关注和三连！🤖

类似文章