少し長いシリーズとして playwright を利用してサムネイルを取得する API を準備しました。今回は、これを Sitecore Search に対して適用していきます。
新しいソースの作成
今回は、https://doc.sitecore.com/xmc の XM Cloud の英語のドキュメントに対して、検索結果としてサムネイルを表示する仕組みを実装していきます。
今回はソースを作成するにあたって、Document Extractors を作成するにあたって、以下のような設定としました。
- Extractor Type としては JS を選択
- URLs to Match では Regular Expression で .*\/xmc\/.* を指定する
- Tagger に関しては、以下の JavaScript のコードを設定する
- この際、サムネイルを作成する API のサーバーに関しては image_url で指定しています
- このページのサンプルサイトの URL はダミーです
JavaScript
function extract(request, response) {
$ = response.body;
let url = request.url;
return [{
'title': $('h1').text(),
'subtitle': $('meta[name="description"]').attr('content') || $('section[data-component-name="Hero Banner"] div[class*="side-content"]>div>p, header div.lead p').text(),
'description': $('meta[name="description"]').attr('content') || $('meta[property="og:description"]').attr('content') || $('p').text(),
'name': $('meta[name="searchtitle"]').attr('content') || $('title').text(),
'image_url': "https://yoursampleserver.vercel.app/api/thumbnail?url=" + url,
'product': $('meta[name="product"]').attr('content'),
'type': 'Documentation',
'site_name': 'Sitecore Documentation',
'url': url
}];
}これでクローラーがデータを取得していき、そのページの画像に関してはサムネイルを作成、表示する API を指定する形となりました。
動作確認
今回は XM Cloud のドキュメントを読み込んでいるため、キーワードとして XM を入力してみます。まずはキーワードを入れたときのおすすめとして、画面のスクリーンショットが表示されていることがわかります。
検索結果の一覧でも、画像としてサムネイルが利用されています。
検索結果のページでも、サムネイルが利用されています。
まとめ
商品情報などでページに対して利用するべき画像が明確になっている場合は、この画像を利用する仕組みは不要です。とはいえ、すべてのページに検索結果向けの画像を用意するのは工数的にも、費用対効果を考える場合でもハードルが高くなりますが、Playwright を利用したサムネイルの仕組みで、検索結果に対して画像を表示することができました。