# ブログ記事のカテゴリ分けとタグ付けを行いクローラーを修正してインデックスの設定をしました

# なんてカテゴリ分けとかタグ付けしたいの？

Algoliaで検索を行う際にテキストでの検索の他にファセットを使って絞り込みたいタイミングとかありそうかな、と。

また、現在は👇のようにヘッダ部分にテキストボックスを置いて、検索結果がブワっと出てくるようにしていますが、

今、search.htmlというのを作っていて、そちらでは👇のような検索体験を提供できるようにしています。全画面な検索用のHTMLで画面を開いたタイミングで空クエリが飛んで結果が表示されている状態。ここにファセットとか追加していきます。

# Front Matter

vuepress-plugin-social-shareというプラグインを使っていて👇のようにアイコンをクリックするとソーシャルに投稿できるようになっているのですが、投稿の際のハッシュタグのところを元々tagから取ってきていました。コレはtagsでも動くようだし、右上のTagsもtagsで大丈夫そうだったので、tagsでいくことにしました。

SocialShare

VuePressのvuepress-plugin-social-share(https://t.co/XvGErKIwez)というプラグインのソース読んでたけどFront Matterにtagsとtagが両方あったとして、tagsが空以外だったらtagはすっ飛ばされるわけよねぇ。
テーマのプラグインでtagは既に使ってて、metaタグに表示する用にtagsも使いたいのよね…笑 pic.twitter.com/gSOLQNlY84
— ヨシダレッド (東京在住 40代ソリューションエンジニア) (@red_yoshida) April 16, 2020

で、vuepress-plugin-seoでOGPとかmetaタグ周りをやりくりしていたのですが、Front Matterをtagsとしてやることで、metaタグ(twitter:data2とかarticle:tag)にtagsの中身を出力してくれるようになりました。categoriesに関しては、READMEをちゃんと読んだらカスタムなメタタグを出力できることが分かったのでconfig.jsのseoプラグインの設定に👇を追加、と。

    customMeta: (add, context) => {
      const {
        $page,
      } = context
      add('categories', $page.frontmatter.categories)
    }

vuepress-plugin-seo(https://t.co/NA9kJ8PeUB)のREADMEをちゃんと読んだら、カスタムなmetaタグを追加することが出来ることに気が付きました :) pic.twitter.com/qCaN9TIjhd
— ヨシダレッド (東京在住 40代ソリューションエンジニア) (@red_yoshida) April 17, 2020

最終的にFront Matterは👇こんな感じになっています。

date: 2020/04/17
description: このブログ(ヨシダレッド)で4月17日にやったこと
categories: 
  - blog
  - algolia
tags: 
  - VuePress
  - FrontMatter
author: yoshida.red
location: Tokyo

出てくるmetaタグ👇

# クローラーというかスクレイパー

cheerio-httpcliを使っていますが👇のような感じで他と足並み合わせて取ってくるだけで楽チン。

result.$('meta[name="categories"]').attr("content");
result.$('meta[name="twitter:data2"]').attr("content");

あとは、元々pタグの中(タグな文字列を除いたもの)の文字列をガッチャンコして最初の1000文字だけAlgoliaにインデクシングしていたのを、substrする前にlengthを取得して、記事の文字数としてAlgoliaにインデクシングするようにしました。そうすると、文字数がxxx〜xxxxくらいのもの、みたいなフィルタリングがInstantSearchのWidgetで出来るようになります(ただWidget使いたかっただけっていう話もある)

  result.$('p').each(function (idx) {
    p = p + result.$(this).text().replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
  });
  var length = p.length;
  p = p.substr(0, 1000);

# ということで、、

search.htmlという元々音声検索のデモにしていたページを諸々やっているところにしようと思うので、また苦手なUI作業のはじまりはじまり…笑

Algolia検索からの流入のみConversionボタン表示