MENU
お問い合わせ

ブックマークレットで超時短！ページ内リンク＆画像を一発で抽出する方法

広告

ウェブ制作・運用やSEOチェックで、
「このページどこにリンク貼ってたっけ？」「画像の ALT 抜けてないかな？」って思うこと、ありませんか？
そんな作業を ワンクリックでCSV出力 にしてくれる便利ツールをご紹介します。
社内でも、個人サイトでも使える“隠し玉”です。

目次
スポンサーリンク

何ができるの？

このブックマークレットを使えば、

  • ページ中のリンク（内部・外部・メール・電話・ファイル）を抽出
  • 画像も全部拾って、ALT の有無もチェック
  • リダイレクトしてるURL、404の可能性ありURLも判定
  • 画像の拡張子（PNG／JPG／WebP／その他）も自動分類
  • 相対パスも絶対URLに変換してくれる

つまり、リンク・画像まわりの“抜け／おかしな所”を一気に洗えるます！

登録＆実行がめっちゃ簡単

STEP
ブラウザのブックマークバーを表示
STEP
新規ブックマークを作成（名前は「URL抽出ツール」など自由でOK）
STEP
URL欄に以下のコードを全て貼り付け
javascript:(function(){function d(f,g){const b=new Blob(["\uFEFF"+f],{type:'text/csv;charset=utf-8;'});const l=document.createElement("a");l.href=URL.createObjectURL(b);l.download=g;l.click()}function abs(u){const x=document.createElement('a');x.href=u;return x.href}function clean(t){const div=document.createElement('div');div.innerHTML=t;return div.textContent.trim()}function getType(h){if(!h)return'LINK';if(h.startsWith('mailto:'))return'MAIL';if(h.startsWith('tel:'))return'TEL';const ext=h.split('.').pop().split(/\?|#/)[0].toLowerCase();if(['pdf','doc','docx','xls','xlsx','ppt','pptx','zip','rar'].includes(ext))return'FILE';try{const u=new URL(h,location.href);return u.hostname!==location.hostname?'EXTERNAL':'LINK'}catch(e){return'LINK'}}function imgType(u){const e=u.split('.').pop().split(/\?|#/)[0].toLowerCase();if(['png'].includes(e))return'PNG';if(['jpg','jpeg'].includes(e))return'JPG';if(['webp'].includes(e))return'WEBP';return'OTHER'}async function check(url){try{const u=new URL(url);const r=await fetch(url,{method:'HEAD',redirect:'manual'});if(r.status>=301&&r.status<=308)return'REDIRECT';if(r.status===200)return'OK';return'POSSIBLE-404'}catch(e){return'POSSIBLE-404'}}(async()=>{const rows=[['※TYPE説明: LINK=内部, EXTERNAL=外部, MAIL=メール, TEL=電話, FILE=ファイル, IMG=画像'],['TYPE','URL','TEXT/ALT','STATUS','IMG-TYPE']];const tasks=[];document.querySelectorAll('a').forEach(e=>{const href=e.getAttribute('href')||'';const url=abs(href);const t=clean(e.innerHTML);const type=getType(href);tasks.push(check(url).then(st=>rows.push([type,url,t,st,''])))});document.querySelectorAll('img').forEach(e=>{const src=e.getAttribute('src')||'';const url=abs(src);const alt=(e.getAttribute('alt')||'').replace(/ /g,' ').trim();const it=imgType(src);tasks.push(check(url).then(st=>rows.push(['IMG',url,alt,st,it])))});await Promise.all(tasks);d(rows.map(r=>r.map(v=>`"${v.replace(/"/g,'""')}"`).join(',')).join('\r\n'),'INTWAK:URL抽出.csv')})();})();
JavaScript
STEP
チェックしたいページを開き、登録したブックマークをクリック
STEP
自動で INTWAK:URL抽出.csv というファイルがダウンロードされる

※コード終盤のINTWAK:URL抽出.csvの文言を任意のものに変更するとダウンロードするファイル名が変わりますのでお試しください！

CSV出力されたデータの見方

TYPE

リンク・画像の種類を表示します。

  • LINK＝内部リンク
  • EXTERNAL＝外部サイトリンク
  • MAIL＝メールリンク（mailto:）
  • TEL＝電話リンク（tel:）
  • FILE＝ファイルリンク（PDF／ZIPなど）
  • IMG＝画像

URL

実際のリンク先／画像URLを絶対パスで表示します。

TEXT/ALT

リンクテキスト、もしくは画像の ALT テキストを表示します。

STATUS

URLの生死・挙動チェックをします。

  • OK＝200で正常
  • REDIRECT＝301〜308でリダイレクトあり
  • POSSIBLE-404＝404の可能性あり・取得失敗
  • UNKNOWN＝外部ドメインなどで HEAD チェックできない

IMG-TYPE

画像の場合のみ“PNG／JPG／WEBP／OTHER”で分類。リンクの場合は空白で表示します。

使いどころと裏技

  • リニューアル前に一括チェック：リンク先や画像ALT漏れをワンクリックで見つけられる
  • SEO内部監査用に：ALT設定漏れ・404リンクを見逃さない
  • 制作納品前のクオリティチェックに：制作会社やチームで使えばレビュー効率アップ
  • 画像最適化チェック：PNGばかり使ってる？WebP使えてる？って可視化できる

よくある質問（FAQ）

すべてのリンクがCSVに表示されますか？

JavaScriptで動的生成されるリンクや iframe 内のリンクは検出できない場合があります。

外部サイトのURLのステータスもちゃんと出ますか？

他ドメイン（自分のサイトとは違うドメイン）の場合、CORS制限で HEAD チェックができないことがあります。この場合、STATUS は UNKNOWN になります。

まとめ

ほんの5分で設定できて、何十ページ分ものリンク・画像調査を秒で済ませられるこのブックマークレット。
制作側も運用側も、「地味だけど時間を取る」作業を一気に片付けられる強力ツールです。

登録しておけば、「他の人もこれ使ってたら便利だよね」って、社内共有・チーム共有しておけば、社内や制作チームのヒーローになれるかも！？

ぜひ、あなたのブラウザに入れて活用してみてください。

スポンサーリンク
便利ツール
  • URLをコピーしました！
目次