noindexタグを視覚的に検出するChrome拡張機能を作ってみた

SEO作業をしていると、noindexタグの確認って面倒ですよね？

毎回「右クリック→ソースを表示→Ctrl+Fでnoindex検索」をするのも手間だし、うっかり見落としてしまうことも。

ということで、Chrome機能拡張「NoFollow」でチェックしていたのですが、右下に控えめに表示されるので、見落としちゃって、、

だったら、生成AIのClaudeを使って、noindexタグがあるページで自動的に赤いバナーを表示するChrome拡張機能を作ってみよう！とやってみたら、できました。

結論からお伝えすると、開発時間は20分。すごい。

どんな機能なのか？

作った拡張機能の機能はシンプル：

• noindexタグを自動検出
• ページ上部に目立つ赤いバナーを表示
• 特定サイトでの警告をオン/オフ切り替え

noindexタグがあるページを開くと、ページ最上部に「NO INDEX」と大きく表示される赤いバナーが現れます。↓ こんなに目立つ感じで

これで、もうnoindexタグの見落としはありません。

そして、邪魔なぐらい目立つので、警告が不要な場合もあります。

そこで、右クリックメニューから簡単に「このサイトでは警告しない」設定ができるようにしました。

実際に使ってみた感想

良かった点：

• noindexの見落としが確実になくなった
• 開発環境での検証作業が効率化
• 視覚的に分かりやすい

コードの全体構成

拡張機能は3つのファイルで構成されています：

manifest.json（設定ファイル）

{
  "manifest_version": 3,
  "name": "No Index Detector",
  "version": "1.0",
  "permissions": ["activeTab", "storage", "contextMenus"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_end"
  }],
  "background": {
    "service_worker": "background.js"
  }
}

content.js（メイン処理）

function hasNoIndexTag() {
    const metaTags = document.querySelectorAll('meta[name="robots"]');
    for (let tag of metaTags) {
        const content = tag.getAttribute('content');
        if (content && content.toLowerCase().includes('noindex')) {
            return true;
        }
    }
    return false;
}

function createNoIndexBanner() {
    const banner = document.createElement('div');
    banner.textContent = 'NO INDEX';
    // スタイリング処理...
    document.body.insertBefore(banner, document.body.firstChild);
}

background.js（右クリックメニュー）

chrome.contextMenus.create({
    id: "toggleNoIndexDetector",
    title: "このサイトでNo Index警告を表示しない",
    contexts: ["page"]
});

ファイルはこちら

インストール方法

1. 上記3つのファイルを同一フォルダに保存
2. Chrome で chrome://extensions/ を開く
3. 「デベロッパーモード」をオン
4. 「パッケージ化されていない拡張機能を読み込む」でフォルダを選択