Nuxt.jsでnoindexを設定する方法

今回は、Nuxt.jsでnoindexを設定する方法ついて解説します。
noindexは、価値の低いページを検索結果に表示させないようにして、サイト全体の評価を下げるのを防ぎます。

noindexを設定する方法

noindexを設定するには、<head>に以下のような<meta>を設定します。

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

Vueファイルでnoindexを設定する

記事ページのhead()に以下のようなコードを書きます。

head() {
  return {
    meta: [
      this.article.fields.noindex
        ? { hid: "robots", name: "robots", content: "noindex" }
        : {},
    ]
  }
}

Contentfulを使っているので、ArticleモデルにBoolean型のnoindexカラムを追加しています。
他のCMSやWebフレームワークでも同じような形にできると思います。

this.article.fields.noindextrueの場合に、nofollowのリンクが設定されます。

以上でnoindexの設定はおわりです。

noindexを確認する

設定すると、以下のようなリンクが設定されているはずです。

noindex

実際に、インデックスされているかどうかはGoogleサーチコンソールから確認できます。
価値が低いページはnoindexを貼っておいた方がいいでしょう。

noindexとnofollowの違い

nofollowと類似するリンクで、noindexがあります。

noindexとの違いは、

  • noindexは、検索結果に表示させないようにする。
  • nofollowは、クローラーにページ内のリンクを辿らせないようにする。

ことです。

nofollowは、外部リンクをページの評価(ページランク)に含めないようにすることです。

noindexは、各記事ページに設定しますが、nofollowは、外部リンクに対して設定します。

nofollowの場合

nofollowの場合は、以下のようにリンクを設定します。

<a href="リンク先URL" rel="nofollow">リンクテキスト</a>

nofollowは、外部リンクをサイト評価に含めたくない場合に貼っておいた方がいいでしょう。