以下の手順を作業用チェックリストとして使い、プロジェクトで確認できた根拠、対象範囲、制約に合わせて調整してください。
実務的な手順
- 確認対象のページとブラウザーの開発者コンソールを開きます。モバイルのはみ出し確認では、先にレスポンシブモードにします。
- コードを確認し、スクリプト全体をコンソールへ貼り付けてEnterを押します。現在のページを読み取ります。サイトマップメタデータツールと同一オリジンのチェッカーだけが、回数を制限してリクエストを送ります。
- コンソールの出力またはダウンロードしたCSV／JSONを確認します。ブラウザーのポリシー、認証状態、未対応のサーバーメソッドによって、判定できない項目が残る場合があります。
(() => {
const MAX_IMAGES = 5000;
const imageCount = document.images.length;
const images = Array.from({ length: Math.min(imageCount, MAX_IMAGES) }, (_, index) => document.images[index]).map((img) => {
const rect = img.getBoundingClientRect();
return {
src: img.currentSrc || img.src,
alt: img.hasAttribute('alt') ? img.alt : '[missing alt attribute]',
altAttribute: img.hasAttribute('alt') ? 'present' : 'missing',
naturalSize: img.naturalWidth + 'x' + img.naturalHeight,
renderedSize: Math.round(rect.width) + 'x' + Math.round(rect.height),
widthAttribute: img.hasAttribute('width') ? img.getAttribute('width') : '',
heightAttribute: img.hasAttribute('height') ? img.getAttribute('height') : '',
loading: img.loading || '',
loadState: !img.getAttribute('src') && !img.getAttribute('srcset') ? 'no source' : !img.complete ? img.loading === 'lazy' ? 'lazy: not loaded yet' : 'loading' : img.naturalWidth > 0 ? 'loaded' : 'failed',
excessPixelResolution: rect.width > 0 && img.naturalWidth > rect.width * devicePixelRatio * 2,
};
});
console.table(images);
const quote = (value) => '"' + String(value).replace(/[\u0000-\u0020]*[=+\-@]/, (match) => "'" + match).replace(/"/g, '""') + '"';
const rows = [['src', 'alt', 'alt attribute', 'natural size', 'rendered size', 'width', 'height', 'loading', 'load state', 'excess pixel resolution'], ...images.map((img) => [img.src, img.alt, img.altAttribute, img.naturalSize, img.renderedSize, img.widthAttribute, img.heightAttribute, img.loading, img.loadState, img.excessPixelResolution])];
const a = document.createElement('a');
a.href = URL.createObjectURL(new Blob(['\uFEFF' + rows.map((row) => row.map(quote).join(',')).join('\r\n')], { type: 'text/csv;charset=utf-8' }));
a.download = 'page-images.csv'; a.click(); setTimeout(() => URL.revokeObjectURL(a.href), 1000);
console.info('Images found:', images.length, '· missing alt:', images.filter((img) => img.altAttribute === 'missing').length, '· failed:', images.filter((img) => img.loadState === 'failed').length, '· lazy and not loaded yet:', images.filter((img) => img.loadState === 'lazy: not loaded yet').length);
if (imageCount > MAX_IMAGES) console.warn('Only the first ' + MAX_IMAGES + ' of ' + imageCount + ' images were checked.');
})();実行前に内容を確認してください。このスクリプトは現在のページを読み取ります。リクエストを送るのはサイトマップとリンクの監査だけで、回数は制限されています。cookieは送信せず、サイトの内容も変更しません。