Milkcocoaで読み込んだデータはGooglebotのクロール対象になりますでしょうか？

Question

初心者ですみません。

Milkcocoaの利用はSEO的にも全く問題なく、通常と同じく検索エンジンでヒットするのでしょうか？

Answer 1

※画像を貼るため、再度回答するかたちですみません。

以下のURLは確かにレンダリングを確認したものです。ソースコードをご覧頂ければと思います。
http://google-rendering-milkcocoa.netlify.com/

以下が証拠になります(Search Consoleを使うためにURLは上記のものとは違うものを使用しましたが、ソースコードは全く同じものを使っています)。

重要な点は、GooglebotにはMilkcocoaインスタンスを作らせない（var milkcocoa = new Milkcocoa()を回避させる）点であるようです。

上で私が回答しているコードは再度回答用に書き直してしまって間違っているものです。。混乱させてしまいすみません。。

Comments

[wevenainc]

わかりやすいご説明ありがとうございます。無事解決致しました。今後とも宜しくお願い致します。

Answer 2

Milkcocoa開発チームのものです。

「Milkcocoaで取得したデータを元にHTMLを生成している場合、Google Botがそれをレンダリングしてくれるか？」という質問だと解釈して回答します。

こちら検証した結果、以下のようにSDKのAPIをそのまま使用した場合、現状だとGoogle Botはレンダリングしてくれませんでした。

milkcocoa.dataStore('test').stream().next(function (err, data) {
  renderMessage(data); // HTMLを生成する関数
});

ただ、stream()自体は、実質URLに対してHTTPのGETを発行しているだけなので、SDKを使う代わりにAjaxで取得することが可能です。試しに以下のURLにアクセスするとMilkcocoaのドットアプリのデータが見れることがわかるかと思います。
-> https://dogi9jz8c16.mlkcca.com/api?appid=dogi9jz8c16&api=query&limit=10&sort=DESC&path=dots

Ajaxを使うとGoogle Botもレンダリングしてくれるようになりますので（Ajaxのクロールについての参考記事）、以下のようにUserAgentで分岐をすると良いかと思います（レンダリングの検証も行いました）。

var ua = window.navigator.userAgent.toLowerCase();
var app_id = 'your-app-id';
var milkcocoa = new MilkCocoa(app_id+'.mlkcca.com');

if(ua.indexOf('googlebot') != -1){
  $.get('https://'+app_id+'.mlkcca.com/api', {
    path : 'message',
    limit : 50,
    sort : 'DESC',
    api : 'query',
    appid : app_id
  }, function(data) {
    data.content.d.map(function(d) {
      return {
        id : d.id,
        value : JSON.parse(d.value)
      }
    }).forEach(function(data) {
       renderMessage(data); // HTMLを生成する関数
    });
  }, 'json');
} else {
  milkcocoa.dataStore('message').stream().next(function (err, data) {
    renderMessage(data); // HTMLを生成する関数
  });
}

お役に立てれば幸いです。

Comments

[wevenainc]

ご回答ありがとうございます。
以下のコードを試してみたところ、適切に表示はされるのですが、やはり、Googleのレンダリングでは、HTMLの生成部分が反映されません。コードのミスや、Javascript以外の原因は何かありますでしょうか？

$(function() {
function getData() {
var ua = window.navigator.userAgent.toLowerCase();
var app_id = 'your-app-id';
var milkcocoa = new MilkCocoa(app_id+'.mlkcca.com');

$.get('https://'+app_id+'.mlkcca.com/api', {
path : 'message',
limit : 50,
sort : 'DESC',
api : 'query',
appid : app_id
}, function(data) {
data.content.d.map(function(d) {
return {
id : d.id,
value : JSON.parse(d.value)
}
}).forEach(function(data) {
renderMessage(data);
});
}, 'json');
}

getData();

function renderMessage(message, before) {
var message_html = '<p class="post-text">' + escapeHTML(message.value.content) + '</p>';
var date_html = '';
if(message.value.date) {
date_html = '<p class="post-date">'+escapeHTML( new Date(message.value.date).toLocaleString())+'</p>';
}
if(before) $("#messages div:first-child").before('<div id="'+message.id+'" class="post">'+message_html + date_html +'</div>');
else $("#messages").append('<div id="'+message.id+'" class="post">'+message_html + date_html +'</div>');
}

});

function escapeHTML(val) {
return $('<div>').text(val).html();
};