「競合サイトの全ページを確認して、サイト設計やコンテンツ戦略を分析したい」
「自社サイトのリニューアルで、全URLをリスト化して漏れなくチェックしたい」
わたしがSEOコンサルタントが実務で競合分析やサイト診断を行う際、避けて通れないのが「正確なURLリストの抽出」です。
しかし、最近はSvelteやReact、Vueなどで構築されたJavaScript（JS）ベースのサイトが増えており、定番の「Screaming Frog（スクリーミングフロッグ）」の無料版ではURLが1件も抜けない……という事態がよく起こります。
そこで今回は、わたしがSEOプロの現場でもよく使う「ツールに頼らず、ブラウザだけでJSサイトのURL一覧を効率よく取得する方法」を詳しく解説します。
1. サイトのURLを一覧取得する3つの基本
まずは、目的やスキルに合わせて選べる3つの方法です。
① Google検索を使う（site:検索）
最も手軽な方法です。
やり方: 検索窓に site:example.com と入力します。
メリット: インデックスされているページがすぐわかる。
デメリット: 数十ページ以上ある場合、コピペが大変。
② XMLサイトマップを確認する
サイト運営者が用意している「URLリスト」を直接見に行く方法です。
やり方: ドメインの末尾に /sitemap.xml をつけてアクセスします。
メリット: サイト全体の構造が一番正確にわかる。
デメリット: サイトマップを公開していないサイトも多い。
③ クロールツールを使う
「Screaming Frog SEO Spider」などの専用ツールでサイトを巡回させます。
メリット: ボタン一つで数千件のURLを抽出できる。
デメリット: JSベース（React/Svelte等）のサイトだと、無料版の設定ではリンクが1つも拾えないことがある。
2. URL一覧を取得する裏技（JSベースのサイトもOK）
「URL一覧を簡単に手に入れたい」
「ツールを使ってもURLが全然出てこない…」
そんな時、実はブラウザの標準機能（デベロッパーツール）を使うのが最強です。
SvelteやReactなどで作られたモダンなサイトでも、ブラウザが一度画面を表示してしまえば、そこには必ず「リンク」が存在しています。その「表示された後のデータ」を直接抜き出すので、失敗がありません。
URL一覧取得の実行手順（非エンジニアでも10秒！）
1. URLを取得したいページを開く。
2. F12（Macは Cmd+Option+I）でデベロッパーツールを開く。
3. 「Console」タブに以下のコードを貼り付けて Enter。
|
1 2 |
// ページ内のすべてのリンクを表示する Array.from(document.querySelectorAll('a')).forEach(a => console.log(a.href)); |
これだけで、ツールでは見つけられなかったJS生成後のURLもズラッと表示されます。
【応用】URL一覧をファイルとして一括ダウンロードする
「表示されるだけじゃなくて、Excelで管理したい！」という方のために、直接ファイル（TXT/CSV）として保存するコードも紹介します。
|
1 2 3 4 5 6 |
const links = Array.from(document.querySelectorAll('a')).map(a => a.href).join('\n'); const blob = new Blob([links], {type: 'text/plain'}); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = 'links.txt'; a.click(); |
【応用】どのテキストにどのリンクが貼ってあるか
|
1 2 3 4 5 6 7 8 9 10 11 |
let csv = 'リンク名,URL\n'; document.querySelectorAll('a').forEach(a => { const name = a.innerText.replace(/,/g, '').replace(/\n/g, ' '); const url = a.href; if(url) csv += `${name},${url}\n`; }); const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csv], {type: 'text/csv'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'links_list.csv'; link.click(); |
3. リンク・画像・CSSの一覧を取得する方法
さらに、普通のURL（リンク）だけでなく、画像URLやデザインファイル（CSS）もまとめてリスト化したい場合は、このコードが便利です。
|
1 2 3 4 5 |
const links = Array.from(document.querySelectorAll('a')).map(el => ({type: 'Link', url: el.href})); const imgs = Array.from(document.querySelectorAll('img')).map(el => ({type: 'Image', url: el.src})); const css = Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map(el => ({type: 'CSS', url: el.href})); const allAssets = [...links, ...imgs, ...css]; console.table(allAssets); // 表形式で見やすく表示 |
このサイトURL一覧取得のすごいところ
JS非対応ツールへの回答: 有料ツールを買わなくても、ブラウザが代わりに解析してくれる。
画像URLも一瞬: 「このサイト、どんな画像使ってるんだっけ？」という調査も一瞬で終わる。
CSSも把握できる: サイトの裏側で読み込まれているデザインファイルまでリスト化可能。
まとめ：サイトのURL取得は「Googleデベロッパーツール」が最強のツール
「サイトのURLを取得する方法」は色々ありますが、「JSベースのサイトでも無料で確実に」という条件なら、ブラウザのコンソールを使うのが一番の近道です。
スクリーミングフロッグ無料版で「URLが0件」と出て絶望したときは、ぜひこのコードを思い出してください！
-
-
【SEO実務】GoogleスプレッドシートでURL一覧からタイトルを一括取得する方法
「競合サイトのURLリストは手に入ったけど、1つずつタイトルを確認するのは面倒……」 「リニューアル時の新旧URL対照表で、ページタイトルを一気に並べたい」 前回、ブラウザのコンソールを使ってURL一 ...
続きを見る
