はてなブログでカテゴリーにnoindexを追加するだけで特定の記事を検索されないようにする方法

今回は小技です。

はてなブログの特定の記事で、カテゴリーにnoindexを追加するだけで、検索にひっかからなくする方法をまとめてみました。

この方法はぼくが新しくつくったわけではなく、検索して見つけましたが、参考記事の方法のままではうまく機能しなかったため、今回の記事のようにデバッグしました。

jQueryを機能させる方法
カテゴリー「noindex」を表示しないようにする方法
- CSSの設定
- カテゴリーの設定

jQueryを機能させる方法

以下の記事を参考に、はてなブログの特定の記事にnoindexをつけようと試みました。

clrmemory.com

しかし、はてなブログの設定＞詳細設定の「headに要素を追加」に追加する必要があるコードには「$(function(){・・・});」がないため、jQueryが機能しません。

jQueryを機能させるためには、以下のように記述する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
  <!-- NOINDEX -->
$(function(){
  if($("body").hasClass("category-noindex")){
    var doc = document;
    var head = doc.getElementsByTagName("head")[0];
    var meta = doc.createElement("meta");
    meta.setAttribute("name","robots");
    meta.setAttribute("content","noindex");
    head.appendChild(meta);
  }
});
</script>

こちらのコードを設定した状態で、以下のようにnoindexという名称のカテゴリーを追加してください。

f:id:sayadoki:20190527235909p:plain

実際にnoindexの設定ができているか、Google Chromeの検証機能で確認しましょう。該当ページで右クリックして、検証をクリックします。すると以下のような画面が表示されます。

f:id:sayadoki:20190528000504p:plain

検証の画面で、コードがだららっと並んでいるところで、「ctrl」を押した状態で「F」を押すと検索できるウィンドウが現れます。そこで「noindex」と検索して、<head>タグの間に、以下のコードがあればOKです。

<meta name="robots" content="noindex">

カテゴリー「noindex」を表示しないようにする方法

以上の設定で、カテゴリー「noindex」を追加することで<meta>タグにnoindexを追加することができました（これでしばらくすると検索対象から除外されます）。

しかし、noindexのカテゴリーを放置したままだとカッコ悪いので、以下のCSSを追加しましょう。

CSSの設定

はてなブログのデザイン＞カスタマイズ＞{} デザインCSSに以下のコードを追加してください。

a.archive-category-link.category-noindex {
    display: none;
}
a.entry-category-link.category-noindex {
    display: none;
}

これで、記事のページとnoindexのカテゴリーを選んだ際のカテゴリーページから、noindexのみ表示しないよう設定できました。ちなみに参考記事のままだと、カテゴリーの最後にnoindexを追加する必要があった（noindexを1番目のカテゴリーに設定すると、n番目（最後）のカテゴリーが表示されないようになっていた）のと、カテゴリーページにはnoindexが表示されたままでした。