探討webapp的SEO難題（上）

時間 2019-11-13

標籤探討 webapp seo 難題欄目無線简体版

原文原文鏈接

前言

網絡蜘蛛沒法解析javascript，至少百度是不能的，神馬搜索差的更遠，而咱們的webapp的渲染展現徹底由javascript驅動

因此蜘蛛訪問webapp頁面會獲得一個白頁面，好比，咱們期待SEO看到的是這個樣子的網頁

其實他看到的是這個樣子的代碼：

那麼這個問題應該如何處理呢？比較早的處理方案是提供兩套代碼，一套用於webapp一套用於SEO，好比：

webapp/blade/demo/debug.html是用於webapp的

而html5/blade/demo/debug.html就是用於SEO訪問的

這樣作確實是解決了SEO的問題，業務團隊卻須要寫兩套代碼，這個狀況是開發也不是不可接受的，舉個例子來講

webapp通常是純粹的前端開發，並且邏輯會相對複雜，而seo開發必定是會服務器端語言的

也就是說要完成此等開發須要預期1.3-1.5倍的工做量（SEO頁面每每比較簡單隻作純粹展現），而開發須要掌握先後端，而這個後端多是php，java,.net

這個樣子除了有點耗費人力以外沒有什麼問題，由於從重構角度來講，不相關的模塊就是應該分離，顯然這裏的webapp與seo就是兩個東西

這裏是典型的業務關聯，而非功能關聯，寫在一塊兒總會遇到適配問題，但抱着一套代碼解決兩個問題的信念，咱們今天來探索如何使用一套代碼完成webapp與seo兩個功能

PS：此文只是我的粗淺的理解，如果有誤請您指正

.net解決思路

這裏要webapp與SEO使用同一套代碼完成不一樣的渲染的話，其實基本前提是必須的：

① 數據爲先，並且是全部須要的數據必須事先定義，是否容許異步咱們不予理睬，可是必須是實現準備好數據接口定義！

因爲數據接口事先定義好了，webapp的數據請求就有兩種方式，同步、異步

② 數據能夠與html一塊兒返回，寫入到頁面，否則就是先吐出html，而後前端解析後Ajax請求數據，渲染模板

這裏處理的一個重點你們都發現了，他就是 首屏渲染！所謂SEO其實就是要作到首屏渲染

PS：這裏可能會發生數據交錯依賴的需求，咱們這裏暫時不予理睬

而對於SEO，瀏覽器訪問後須要直接返回無缺無損的HTML，這裏便必須同步處理，因此咱們首屏的webapp的數據也採用一併返回的方法

這裏服務器只會提供統一的restful接口，webapp使用underscore渲染頁面，須要產生相同的數據就須要一個前提：

服務器須要解析前端webapp underscore模板的能力！這裏便提供了初步的方案，簡單模擬以下index.html：

<script type="text/blade_config">
  {
    url: 'restful/index',
    template: 'indexTmpt'
  }
</script>

<script id="indexTmpt" type="text/blade_template">
  <ul>
    <% for(var i = 0, len = data.length; i < len; i++) { %>
      <li><%=data[i].name %></li>
    <% } %>
  </ul>
</script>

//模擬數據返回
data = [
  {id: 0, name: 'item_0'},
  {id: 1, name: 'item_1'},
  {id: 2, name: 'item_2'}
]

這裏期待的webapp處理邏輯：

① 服務器解析config中的data，請求url後封裝爲數據

② 服務器處理模板與data，生成html，返回返回

固然這裏能夠將data返回頁面由前端渲染，可是這樣意義不大，否則直接渲染算了

期待的seo處理邏輯：

① 解析config，請求url生成data

② 根據前端模板，生成最終html

其實SEO的邏輯與前端一致了，沒有什麼不一樣，只不過生成靜態html後的處理邏輯差距便大了

爲何不直接服務器吐出完整html？

到這裏其實不少朋友就會開始質疑了，既然如此，咱們何須要定義config中的url，或者template，這裏直接使用服務器端渲染給給前端很差麼？

這裏還省了不少看似莫名其妙的配置，其實這樣作仍是有道理的

原本SEO須要會服務器端語言的，而一旦咱們給出config中的約定與模板後，事實上整個便與服務器端沒有任何聯繫了

雖然說他與服務器端吐出差距不大，可是我業務開發人員事實上只須要掌握前端技能，這個設計的緣由即是如此

整個程序對前端來講依舊只須要restful與模板，我能夠單個前端同時完成webapp與seo，這就是其意義所在

這個方案的代價是：

① blade中的靜態html須要變成動態腳本，這樣服務器才能解析內容（好比index.html->index.aspx）

② 以前造成的編寫方式須要改變，這裏只是須要onShow、onHide事件點

③ 須要按套路出牌，必須定義url與template等東西

凡有優勢就有缺點，這樣作的優勢是：

① 一套代碼解決webapp seo難題

② 可使用.net解析模板，整個服務器來講比較穩定

缺點是：

① 對前端規範約束太多，碰到複雜業務邏輯會比較頭疼，好比模板嵌套，數據依賴，這裏的配置就麻煩了

② 不太「webapp」，誠然，此種作法不太webapp

③ 脆弱，問題一樣來源於模板，一次模板語法解析錯誤，會形成服務器端拋錯，整個程序便死掉了

這個問題的提出其實有點吹毛求疵，由於模板就前端解析也會常常出錯，可是這裏的不一樣點是前端稍微好調試點，若是拋給服務器端的話其調試成本會增長

.net解析javascript

扯了這麼多，小釵這裏爲了證實本身原來是搞.net的這裏作一個簡單實現，這裏便出現了第一個難點：

由於咱們模板是underscore的語法（模板暫時不考慮嵌套），那麼.net如何解析javascript代碼呢？？

.net解析javascript須要引入第三方庫，藉助一些javascript引擎，就如node之於V8；.net的話咱們這裏暫時使用IronJS作處理

https://github.com/fholm/IronJS

這裏小釵不得不汗顏，一件事情，就是C#已經變成這個樣子了，我卻根本不知道......

PS：尼瑪這個狗東西，我看得懂個毛線啊！！！因此本着不丟臉的原則，咱們這裏省略一萬字

咱們這裏直接提供一個思路便可，由於該方案不是今日的重點，個人重心依舊是放在nodeJS上的，這裏的思路是：

① 解析頁面的config信息，取出url以及templatejavascript

② 根據url發出請求返回數據，這裏因爲是局域網應該很快php

③ 解析template，根據data生成靜態htmlhtml

④ 其它處理，返回客戶端前端

模擬處理邏輯

咱們這裏略去url請求一步，假設數據已經返回，不然這裏又要寫.net程序html5

var data = [
  {id: 0, name: 'item_0'},
  {id: 1, name: 'item_1'},
  {id: 2, name: 'item_2'}
];

這裏的模板字符串爲：java

var template = [
  '<ul>',
    '<% for(var i = 0, len = data.length; i < len; i++) { %>',
      '<li><%=data[i].name %></li>',
    '<% } %>',
  '</ul>'
].join('');

而後咱們要作的就是解析這個模板，生成對應的模板解析函數，這裏是調試代碼：node

var data = [
  { id: 0, name: 'item_0' },
  { id: 1, name: 'item_1' },
  { id: 2, name: 'item_2' }
];

var template = [
  '<ul>',
    '<% for(var i = 0, len = data.length; i < len; i++) { %>',
      '<li><%=data[i].name %></li>',
    '<% } %>',
  '</ul>'
].join('');

var templateHandler = function (text, data) {

  var noMatch = /(.)^/;

  var escapes = {
    "'": "'",
    '\\': '\\',
    '\r': 'r',
    '\n': 'n',
    '\t': 't',
    '\u2028': 'u2028',
    '\u2029': 'u2029'
  };

  var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;

  var templateSettings = {
    evaluate: /<%([\s\S]+?)%>/g,
    interpolate: /<%=([\s\S]+?)%>/g,
    escape: /<%-([\s\S]+?)%>/g
  };

  var render;
  settings = templateSettings;
  var matcher = new RegExp([
      (settings.escape || noMatch).source,
      (settings.interpolate || noMatch).source,
      (settings.evaluate || noMatch).source
    ].join('|') + '|$', 'g');

  var index = 0;
  var source = "__p+='";
  text.replace(matcher, function (match, escape, interpolate, evaluate, offset) {
    source += text.slice(index, offset)
        .replace(escaper, function (match) { return '\\' + escapes[match]; });

    if (escape) {
      source += "'+\n((__t=(" + escape + "))==null?'':escape(__t))+\n'";
    }
    if (interpolate) {
      source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
    }
    if (evaluate) {
      source += "';\n" + evaluate + "\n__p+='";
    }
    index = offset + match.length;
    return match;
  });
  source += "';\n";

  if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

  source = "var __t,__p='',__j=Array.prototype.join," +
      "print=function(){__p+=__j.call(arguments,'');};\n" +
      source + "return __p;\n";

  return source;

  try {
    render = new Function(settings.variable || 'obj', source);
  } catch (e) {
    e.source = source;
    throw e;
  }

  

  if (data) return render(data);
  var template = function (data) {
    return render.call(this, data);
  };

  template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';

  return template;
}

templateHandler(template, data)

View Code

首次調試爆了不少錯誤，並且服務器端的調試比較費力，錯了只能靠經驗去猜想c++

這裏返回的是須要構形成函數的字符串，可是咱們看到咱們的「ul」等標籤被吃掉了！！！git

var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='';
 for(var i = 0, len = data.length; i < len; i++) { 
__p+=''+
((__t=(data[i].name ))==null?'':__t)+
'';
 } 
__p+='';
}
return __p;

咱們這裏一旦調用就拋了一個錯誤，這個時候通常是模板或者傳入數據出錯了，惋惜的是他是對其中一段語法不可解析！這裏從側面反映出一個問題：github

該方法如果模板出錯會致使程序沒法運行，若是是node的話極可能就crash了！

PS:這裏因爲CLR4解析javascript的時候字符串的replace遇到正則時有問題，在此逗留3小時，這裏把我搞慘了，定位就好久最後還得重寫模板解析！！！

  1 var data = [
  2   { id: 0, name: 'item_0' },
  3   { id: 1, name: 'item_1' },
  4   { id: 2, name: 'item_2' }
  5 ];
  6 
  7 var template = [
  8   '<ul>',
  9     '<% for(var i = 0, len = data.length; i < len; i++) { %>',
 10       '<li><%=data[i].name %></li>',
 11     '<% } %>',
 12   '</ul>'
 13 ].join('');
 14 
 15 var templateHandler = function (text, data) {
 16 
 17   var noMatch = /(.)^/;
 18 
 19   var escapes = {
 20     "'": "'",
 21     '\\': '\\',
 22     '\r': 'r',
 23     '\n': 'n',
 24     '\t': 't',
 25     '\u2028': 'u2028',
 26     '\u2029': 'u2029'
 27   };
 28 
 29   var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
 30 
 31   var templateSettings = {
 32     evaluate: /<%([\s\S]+?)%>/g,
 33     interpolate: /<%=([\s\S]+?)%>/g
 34   };
 35 
 36   var render;
 37   var settings = templateSettings;
 38 
 39   var matcher = new RegExp([
 40       (settings.interpolate || noMatch).source,
 41       (settings.evaluate || noMatch).source
 42     ].join('|') + '|$', 'g');
 43 
 44   var index = 0;
 45   var source = "__p+='";
 46   var _text = text;
 47 
 48   var _treg;
 49 
 50   while (1) {
 51 
 52     var matcher = new RegExp([
 53       (settings.interpolate || noMatch).source,
 54       (settings.evaluate || noMatch).source
 55     ].join('|') + '|$', 'g');
 56 
 57     (function () {
 58       _treg = matcher.exec(_text)
 59     })();
 60 
 61     var t_str = _treg[0];
 62     var t_len = t_str.length;
 63     var t_index = _treg.index;
 64 
 65     source += _text.slice(index, t_index).replace(escaper, function (match) { return '\\' + escapes[match]; });
 66     _text = _text.slice(t_index + t_len);
 67 
 68     if (_treg[2]) {
 69       source += "';\n" + _treg[2] + "\n__p+='";
 70     }
 71     if (_treg[1]) {
 72       source += "'+\n" + _treg[1] + "\n'";
 73     }
 74     if (_text.length == 0) break;
 75 
 76   }
 77   source += "';\n";
 78 
 79   if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';
 80 
 81   source = "var __t,__p='',__j=Array.prototype.join," +
 82       "print=function(){__p+=__j.call(arguments,'');};\n" +
 83       source + "return __p;\n";
 84 
 85   try {
 86     render = new Function(settings.variable || 'obj', source);
 87   } catch (e) {
 88     e.source = source;
 89     throw e;
 90   }
 91 
 92   //return source;
 93 
 94   if (data) return render(data);
 95   var template = function (data) {
 96     return render.call(this, data);
 97   };
 98 
 99   template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
100 
101   return template;
102 }
103 
104 templateHandler(template, { data: data })