NoFollowの使い方を解説。rel属性が一発でわかる拡張機能!

この記事のURLとタイトルをコピーする
Chrome拡張機能
NoFollow って、どうやって使うの?
NoFollowの使い方を説明しましょう。rel="nofollow" 属性のついたリンクを、かんたんに見つけることができますよ。

この記事でわかること
  • NoFollow とは?
  • NoFollow の使い方について
  • NoFollow の設定について
  • NoFollow 開発サイト

というわけで今回は、NoFollow の使い方を、解説します。

NoFollow とは?

NoFollow とは?
NoFollow は、閲覧しているサイトの「rel="nofollow"」属性のあるリンクを判別するためのツールです。
rel="nofollow" とは?
リンクとサイトを関連づけたくないとき、またリンク先のページをサイトからクロールさせないためにリンクにつける属性のことです。広告、コメントからの信頼できないサイトへのリンクにつける必要があります。
【参考】Google に外部リンクの関係性を伝える - Search Console ヘルプ
ざっくりレビュー!
サイト運営がはじめてで、「rel="nofollow"」をいつつけたらいいかわからないですよね。参考にしているサイトでは、どこにつけているんだろう?って悩みを、解決してくれますよ。

NoFollow の使い方【3ステップ】

Chrome extension howto

NoFollow の使い方を、解説します。

3ステップで、できるだけわかりやすく解説させていただきます。

【ステップ1】NoFollow をインストール

Step1 howto

-ステップ1-
ステップ1は、NoFollow をダウンロードします。
NoFollow 拡張機能を、各配信サイトからダウンロードしてください。ダウンロードリンクをご用意しましたので、ご活用くださいませ。
配信サイトからダウンロード

【ステップ2】NoFollow を有効化する

Step2 howto

-ステップ2-
ステップ2は、NoFollow を有効化します。
操作のポイント

NoFollow new
NoFollows アイコンをクリックします。

NoFollow reload
再読み込みを、クリックします。

NoFollow check
通知が表示されます。ポップの表示を消すために、これをクリックしてみましょう。

NoFollow icon
ツールバーの NoFollow アイコンが表示されたら、機能が有効化されたということです。

コメント
機能がオンになれば、とくに設定する必要はありません。ステップ3にすすみましょう。

【ステップ3】NoFollow の赤枠リンクをチェックする

Step3 howto

-ステップ3-
ステップ3は、NoFollow の赤枠リンクをチェックします。
操作のポイント

調べたいサイト、もしくは自身のブログ記事などをひらきましょう。

NoFollow dousa

「rel="nofollow"」属性のあるリンクを、赤い点線でおしえてくれます。

以上で、基本的な使い方の3ステップ解説は、おわりです。

コメント
むずかしい設定なく、インストールすれば OK です。赤い枠線でおしえてくれるので、パッとみただけで「rel="nofollow"」属性のあるリンクがわかります。すごく、助かる!!

NoFollow の設定について

NoFollow の設定について、日本語で解説させていただきます。

設定は、「NoFollow」アイコンを右クリックして、オプションをクリックしてひらくことができます。

General

General(ジェネラル)について
  • Default extension state:
    初期状態で機能のオン(Enabled)・オフ(Disabled)
  • Extension button popup menu
    :拡張機能ボタンのポップアップメニュー表示(デフォルト設定でOK)
  • Check for alternate robots meta tags:
    ロボットメタタグを検索する。CSSスタイルのアウトラインのみに影響(デフォルトでOK)

Info Box

Info Box(インフォボックス)について
  • Never (disable):表示なし
  • Always:常に表示する
  • Conditional:条件付き。少なくともつのメタタグが見つかった場合に、インフォボックスが表示される。
Info Box Position(インフォボックスポジッション)
  • top-left:ブラウザの左上
  • top-right:ブラウザの右上
  • bottom-left:ブラウザの左下
  • bottom-right:ブラウザの右下
その他の設定
  • Check for meta-robots tag with NoFollow content:nofollowキーワードを使用してrobotsメタタグをチェック
  • Check for meta-robots tag with NoIndex content:noindexキーワードを使用してrobotsメタタグをチェック
  • Remember minimised state:ブラウザセッション全体で、最小化された状態が記憶される。すべてのブラウザタブで同期される。

CSS Styles

CSS Styles(CSS スタイル)でデザインを設定できる項目
  • NoFollow link:
    NoFollow属性のリンク
  • NoFollow image link:
    NoFollow属性のリンクのついた画像
  • DoFollow link:
    NoFollow属性のないリンク
  • NoIndex HTML tag:
    NoIndex属性のリンク
  • All links on pages with NoFollow meta tag:
    NoFollow属性すべてのリンク
  • All links on pages with NoIndex meta NoIndex:
    属性すべてのリンク
  • External links:外部リンク
コメント

この設定で、みやすい枠線などに自分でカスタマイズできます。CSSの知識が必要になりますので、参考書などあるといいでしょう。

Website Exceptions

NoFollow websiteex

Website Exceptions では、サイト URL ごとに拡張機能「NoFollow」の動作オン・オフを設定できます。

「e.g.www.example.com」に、設定したい URK を入力します。

初期状態で機能のオン(Enabled)・オフ(Disabled)をきめて、クリックします。

設定した URL がリストに追加されます。

設定削除する場合は、URL よこの バツボタンをクリックしてください。ノートとペンの編集ボタンをクリックすれば、URLや初期値を変更できます。

設定がおわったら、Saveを忘れずに!!

NoFollow save

設定がおわったら、忘れずSaveをクリックしましょう。

設定を変更しても、Save をクリックしないと反映されません。

「設定変更したのに、表示がかわらないなぁ〜」って、なんども確認してしまいました。

おなじ失敗してほしくないので、書かせていただきました!

アイコン左クリックで出てくるメニュー

左クリックで出てくるメニューの意味
  • Enable for this website:閲覧サイトで機能をオンにする
  • Temporary enable:一時的に機能をオンにする
  • Options:設定をひらく
  • Contact author:開発者に連絡
  • Close:閉じる

まとめ

「NoFollow」について、使い方を解説させていただきました。

インストールがおわったら、デフォルト設定で問題なく「rel="nofollow"」属性をみつけることができます。

HTML の書き方を、正しく理解するために有効なツールですので、ぜひインストールしてみましょう。試してみる方は、ステップ1からやってみよ〜↓

【挑戦する】【ステップ1】NoFollow をダウンロード

そのほか、便利な Chrome 拡張機能について、こちらの記事をどうぞ↓

【関連】【2020年】Google Chrome 拡張機能まとめ

関連する記事

この記事のURLとタイトルをコピーする
記事へのお問い合わせ

サウンドオルビス

2,039,291 views

「音楽」と「テクノロジー」をキーワードに、あなたの「やってみたい!」悩みを解決するために、情報発信しています。

プロフィール

あわせて、こちらもどうぞ!