【GAS】Googleスプレッドシートを使ってWebサイトのタイトル・Meta・パンくず等一括で取得する方法

Webサイトを運用していたりすれば様々な手段を用いてコンテンツを一元管理できている場合がほとんどだと思いますが、これからコンテンツを整理したい、Webサイトの全体感や情報を把握しておきたいとき等、ツールに頼らない方法としてGoogleスプレッドシートを利用する手があります。
取得したい情報にあわせてカスタマイズできる、コンテンツのURLを取得できている場合に使いますスプレッドシートは便利ですね。

というわけで、GASを使います。

Googleスプレッドシートを開きます。
メニューから拡張機能→Apps Scriptを選択します。

下記コードを入力します。

function getMetaData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const data = sheet.getRange('A2:A').getValues(); // A列のURLを取得
  const results = [];
  
  for (let i = 0; i < data.length; i++) {
    const url = data[i][0];
    if (url) {
      const response = UrlFetchApp.fetch(url, {muteHttpExceptions: true});
      if (response.getResponseCode() === 200) {
        const html = response.getContentText();
        const title = html.match(/<title>([\s\S]*?)<\/title>/i);
        const description = html.match(/<meta name="description" content="([\s\S]*?)"/i);
        const keywords = html.match(/<meta name="keywords" content="([\s\S]*?)"/i);
        
        // パンくずリストの取得
        const breadcrumbs = [];
        const breadcrumbHtml = html.match(/<div[^>]*id="breadcrumb"[^>]*>([\s\S]*?)<\/div>/i);
        if (breadcrumbHtml) {
          const breadcrumbItems = breadcrumbHtml[1].match(/<li[^>]*>(.*?)<\/li>/g);
          if (breadcrumbItems) {
            for (let j = 0; j < breadcrumbItems.length && j < 7; j++) {
              const text = breadcrumbItems[j]
                .replace(/<li[^>]*>|<\/li>/g, '')
                .replace(/<a[^>]*>|<\/a>/g, '')
                .replace(/<span[^>]*>|<\/span>/g, '')
                .replace(/&gt;/g, '')
                .trim();
              breadcrumbs.push(text);
            }
          }
        }
        
        // 必要な数の空文字列を追加
        while (breadcrumbs.length < 7) {
          breadcrumbs.push('');
        }
        
        results.push([
          title ? title[1] : '',
          description ? description[1] : '',
          keywords ? keywords[1] : '',
          breadcrumbs[0] || '',
          breadcrumbs[1] || '',
          breadcrumbs[2] || '',
          breadcrumbs[3] || '',
          breadcrumbs[4] || '',
          breadcrumbs[5] || '',
          breadcrumbs[6] || ''
        ]);
      } else {
        results.push(['', '', '', '', '', '', '', '', '', '']);
      }
    } else {
      results.push(['', '', '', '', '', '', '', '', '', '']);
    }
  }
  
  sheet.getRange(2, 2, results.length, 10).setValues(results);
}

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Custom Menu')
    .addItem('Fetch Meta Data', 'getMetaData')
    .addToUi();
}

パンくずは階層ごとにセルを分けたいので力技にしています。階層構造が深い場合は適宣調整をしてください。また、パンくずリストはdiv id=”breadcrumb”とマークアップされている前提なので、こちらも調整をしてください。

const breadcrumbItems = breadcrumbHtml[1].match(/<li[^>]*>(.*?)<\/li>/g);

こちらはリストの取得になりますが、場合によってはspanだったりするのでこちらも適宣変更してください。

権限の確認が出てきますので、案内に従って承認をしていってください。

うまく動くとこのように取得が完了します。上記は一行目に各項目名が入るように調整しています。
また、いちいちGASを開いて実行するのも面倒なのでメニューに「Customm Menu」が表示されるようにし、「Fetch Meta Data」を実行すると好きなタイミングで取得できます。

この応用として好きな要素、例えばh1やh2などの取得等もできたりするので、取得したい情報がうまくハマらない各ツールや自分でカスタマイズしたいという方はこんなやり方でサクッと取得すると良いと思います。