Closed5

Amazonの短縮URLからOG画像取得する

蔀

OGP対応したけども、Amazonの短縮URLに対してうまくカード表示できていない
このページ

蔀

open-graph-scraperのオプションに onlyGetOpenGraphInfo: true を指定していて、これがあると情報が取れなかった

蔀

↓この短縮URLに対する情報が返ってきたが、画像が複数返ってきている

https://amzn.to/4fpBdzD

{
  "ogTitle": "アンナ・カレーニナ 1 (光文社古典新訳文庫 Aト 3-2) | レフ・ニコラエヴィチ トルストイ, 哲男, 望月 |本 | 通販 | Amazon",
  "ogImage": [
    {
      "url": "https://m.media-amazon.com/images/G/09/gno/sprites/nav-sprite-global-1x-reorg-privacy._CB541718393_.png",
      "type": "png"
    },
    {
      "url": "https://m.media-amazon.com/images/G/09/Digital_Video/svod/2024/PrimeVideo_GW_DesktopSWM_400x39_T1._CB566491576_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/31yuiXEkE0L.jpg",
      "type": "jpg",
      "width": 650,
      "height": 45
    },
    {
      "url": "https://m.media-amazon.com/images/G/09/kindle/app/kindle-app-logo._CB666561098_.png",
      "type": "png",
      "width": 92
    },
    {
      "url": "https://m.media-amazon.com/images/G/09/kindle/app/QR-store-link-kindle-app._CB626291047_.png",
      "type": "png",
      "width": 92
    },
    {
      "url": "https://m.media-amazon.com/images/I/51tDCnOWe8L._SY445_SX342_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/G/09/samplePlayers/assets/Spinner._CB575171076_.svg",
      "type": "svg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/3168KetUBOL._SY600_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://images-fe.ssl-images-amazon.com/images/I/51tDCnOWe8L._AC_UL116_SR116,116_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://images-fe.ssl-images-amazon.com/images/I/41glowaLPDL._AC_UL116_SR116,116_.jpg",
      "type": "jpg"
    }
  ],
  "ogLocale": "ja-jp",
  "ogUrl": "https://www.amazon.co.jp/%E3%82%A2%E3%83%B3%E3%83%8A%E3%83%BB%E3%82%AB%E3%83%AC%E3%83%BC%E3%83%8B%E3%83%8A-1-%E5%85%89%E6%96%87%E7%A4%BE%E5%8F%A4%E5%85%B8%E6%96%B0%E8%A8%B3%E6%96%87%E5%BA%AB-A%E3%83%88-3-2/dp/4334751598",
  "charset": "utf-8",
  "requestUrl": "https://www.amazon.co.jp/%E3%82%A2%E3%83%B3%E3%83%8A%E3%83%BB%E3%82%AB%E3%83%AC%E3%83%BC%E3%83%8B%E3%83%8A-1-%E5%85%89%E6%96%87%E7%A4%BE%E5%8F%A4%E5%85%B8%E6%96%B0%E8%A8%B3%E6%96%87%E5%BA%AB-A%E3%83%88-3-2/dp/4334751598",
  "success": true
}

蔀

SDカードの例
画像URLの法則ビミョいなあ

{
  "ogTitle": "Amazon | Samsung EVO Plus 512GB MicroSDメモリーカード (2024) + SDアダプター。 | サムスン(SAMSUNG) | microSDカード 通販",
  "ogImage": [
    {
      "url": "https://m.media-amazon.com/images/G/09/gno/sprites/nav-sprite-global-1x-reorg-privacy._CB541718393_.png",
      "type": "png"
    },
    {
      "url": "https://m.media-amazon.com/images/G/09/Digital_Video/svod/2024/PrimeVideo_GW_DesktopSWM_400x39_T1._CB566491576_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/31ckXw22iYL._AC_US40_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/31-9rlQ5twL._AC_US40_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/31ukHqOSqvL._AC_US40_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/31CeTUnDVcL._AC_US40_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/31EAiZTI7CL._AC_US40_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://images-na.ssl-images-amazon.com/images/G/01/x-locale/common/transparent-pixel._V192234675_.gif",
      "type": "gif"
    },
    {
      "url": "https://m.media-amazon.com/images/I/41eeESMYP0L.__AC_SX300_SY300_QL70_ML2_.jpg",
      "type": "jpg"
    },
    {
      "url": "https://m.media-amazon.com/images/I/612SKs+CB1L._SS100_.jpg",
      "type": "jpg"
    }
  ],
  "ogLocale": "ja-jp",
  "ogUrl": "https://www.amazon.co.jp/Samsung-Plus-512GB-MicroSD%E3%83%A1%E3%83%A2%E3%83%AA%E3%83%BC%E3%82%AB%E3%83%BC%E3%83%89-SD%E3%82%A2%E3%83%80%E3%83%97%E3%82%BF%E3%83%BC%E3%80%82/dp/B0D1CHNC49",
  "charset": "utf-8",
  "requestUrl": "https://www.amazon.co.jp/Samsung-Plus-512GB-MicroSD%E3%83%A1%E3%83%A2%E3%83%AA%E3%83%BC%E3%82%AB%E3%83%BC%E3%83%89-SD%E3%82%A2%E3%83%80%E3%83%97%E3%82%BF%E3%83%BC%E3%80%82/dp/B0D1CHNC49/?_encoding=UTF8&pd_rd_w=RBZ7I&content-id=amzn1.sym.52da45e7-4dda-44f8-9513-1e825af44f78%3Aamzn1.symc.9473e197-1ae0-49a9-a264-2b4637782ba2&pf_rd_p=52da45e7-4dda-44f8-9513-1e825af44f78&pf_rd_r=NHTM9KKX0S8TV2740H42&pd_rd_wg=mC71r&pd_rd_r=ccfe265f-f65c-4be7-a393-fc564a561a3c&ref_=pd_hp_d_btf_ci_mcx_mr_ca_id_hp_d",
  "success": true
}
蔀

若干汚いけど、これで対応

export default function linkCard(url: string, ogpData: OgObject) {
    const urls = ogpData.ogImage?.map(image => image.url).filter(url => url != null && url != undefined) ?? []
    const bestImageUrl = findBestImage(urls, url)
    return (
        <div className={styles.linkCard}>
            <a href={url} target="_blank" rel="noopener noreferrer">
                {bestImageUrl && (
                    <div className={styles.linkCardImage}>
                    <img src={bestImageUrl} alt={ogpData.ogTitle} />
                    </div>
                )}
                <div className={styles.linkCardContent}>
                    <h3 className={styles.linkCardTitle}>{ogpData.ogTitle}</h3>
                    <p className={styles.linkCardDescription}>{ogpData.ogDescription}</p>
                    {url}
                </div>
            </a>
        </div>
    )
}

// amazonが複数のOG画像を返してくるので、その対策
function findBestImage(originalUrls: string[], domain: string) {
    // ex: https://m.media-amazon.com/images/I/51tDCnOWe8L._SY445_SX342_.jpg
    if (domain.includes('amazon') || domain.includes('amzn')) {
        const urls = originalUrls.filter(url => {
            return url.includes('/I/') && url.includes('_SX') && url.includes('_SY')
        })
        return urls[0] || originalUrls[0]
    } else {
        return originalUrls[0]
    }
}
  
このスクラップは4ヶ月前にクローズされました