Serper.dev を使って検索上位サイトの情報を取得（GAS）

機能説明

Serper.devが提供するAPIを使用して指定したキーワードでGoogle検索した際に上位表示されているサイトのURLを取得するツールです。

※ APIは異なるプログラムやシステムが情報を共有する手段であり、今回はGASでGoogleの情報を取得するために使用します。

APIの準備

はじめにAPIを使用するための準備をします。

APIを使用するための準備は少し面倒なのですがAPIが使用できるようになると作成できるプログラムも大幅にステップアップさせることができますので、頑張って準備していきましょう！

１．アカウントの作成

Serper.devにアクセスし「Get 2,500 Free queries」をクリックします。

Name、Email、Passwordを入力し「Create account」をクリックします。

確認のメールが届くのでリンクをクリックします。

EmailとPasswordを入力してサインインします。

２．APIキーの取得

ダッシュボードよりAPIキーを取得します。

左にメニューのAPI keysをクリックして、Default keyの「コピー」アイコンをクリックします。

APIキーがクリップボードにコピーされるので、別途保存しておいてください。

これでAPIの取得は完了です。

コード全体

下記コードに貼り付け、”YOUR_SERPER_API_KEY”に取得したAPIキーを設定し、実際の動作を確認してください。

◆コード

function getTopSitesBySerperdev() {
  // https://serper.dev/ で発行したAPIキー
  const apiKey = "YOUR_SERPER_API_KEY";
  const query = "アフィリエイト";
  const searchNum = 3;

  const url = "https://google.serper.dev/search";
  
  const options = {
    "method": "post",
    "contentType": "application/json",
    "headers": {
      "X-API-KEY": apiKey
    },
    "payload": JSON.stringify({
      "q": query,
      "num": searchNum,
      "gl": "jp", // 日本の検索結果
      "hl": "ja"  // 日本語
    })
  };

  // 検索結果取得
  const res = UrlFetchApp.fetch(url, options).getContentText();
  const responseJson = JSON.parse(res);

  // console.log(responseJson);
  
  let items = [];
  // Serper.devでは結果が "organic" という配列に入ります
  if (responseJson.organic) {
    for (var i = 0; i < responseJson.organic.length; i++) {
      items.push([responseJson.organic[i].link, responseJson.organic[i].title]);
    }
  }
  
  console.log(items);
}

■出力結果

コード解説

１．

const apiKey = "YOUR_SERPER_API_KEY";

apiKey 変数に、Serper.dev で取得した API キーを代入します。

２．

const query = "アフィリエイト";

query 変数に、検索キーワードを代入します。

３．

const searchNum = 3;

searchNum 変数に、検索結果の取得件数を代入します。

４．

const url = "https://google.serper.dev/search";

url 変数に、Serper.dev の API エンドポイント（アクセス先）を指定します。

５．

const options = { ... };

APIを呼び出すための設定（リクエストオプション）を指定します。
APIキーはヘッダー（”X-API-KEY”: apiKey）に、検索条件はJSON形式（”q”: query、”num”: searchNum）で送信します。

※ここは深く理解しなくても大丈夫です。このままの形で使用してください。

６．

const res = UrlFetchApp.fetch(url, options).getContentText();

UrlFetchApp.fetch() 関数を使用して、指定した設定で検索を実行し、結果を取得します。取得したコンテンツは、res 変数に格納されます。

７．

let items = [];

items 変数を、最終的な「リンク」と「タイトル」を格納する配列として初期化します。

８．

let responseJson = JSON.parse(res);

JSON.parse() 関数を使用して、res 変数に格納された文字列を JSON 形式に変換します。

９．

for (var i = 0; i < responseJson.organic.length; i++) {
  items.push([responseJson.organic[i].link, responseJson.organic[i].title]);
}

Serper.dev のデータ構造では、検索結果は「organic」という配列に格納されています。そこからリンク（link）とタイトル（title）を抽出して、items 変数に追加します。

このJSONデータの構造がわかりにくい場合は、「// console.log(responseJson);」のコメントを外して中身を確認してみましょう。

■console.log(responseJson);の結果

以上の解説を踏まえて、コード全体の動作を説明すると、以下のようになります。

最初に、Serper.dev の API キー、検索キーワード、検索結果の取得件数を定義します。
次に、APIに送信するための詳細設定（オプション）を準備し、UrlFetchApp.fetch() で検索を実行します。
取得したデータを JSON 形式に変換し、「organic」配列の中から必要なリンクとタイトルを抽出して配列に格納します。

このコードを実行することで、最新の検索結果を取得できるようになります。

カスタマイズ

１．
スプレッドシートのセルの「A1」にキーワードを記載して、記載されているのキーワードの検索結果を取得するプログラムに変更してください。

２．
取得する検索結果が３件となっていますが、これを１０件取得できるように変更してください。

３．
linkとTitleの他に「Snippet」も取得するように変更してください。

４．
結果をスプレッドシートに出力するようにしてください。