OGP画像が表示されなくなった原因


OGP設定のテスト用に作ったページのURLをX(旧Twitter）にpostしたところ、twitter cardをsummary_large_image形式で指定したはずなのにOGP画像が表示されなくてハマりました（図1a）。以前は同じやり方で大きな画像が表示されていたのですが……。表示されなくなった原因を探りました。

**図1a.**
![p02_edit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/81fc3cea-ca94-e10f-0082-c9176160d627.jpeg)
同じURLをfacebookに投稿した場合はOGP画像も表示されます。[^1]
[^1]: 投稿画面のプレビューには表示されないことがありますが、投稿後にタイムライン上に現れるカードにはOGP画像が表示されます。キャッシュが関連していると思います。

**図1b.** facebook
![p02_fb_edit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/3bc2432e-5fbf-0fb0-e305-c7be5f05442e.jpeg)

この違いはどうして起きるのでしょうか？

図1aのカード[^2]のリンク先にある[問題のページ](https://kazhashimoto.github.io/ogp-test/p02.html)で`og:image`プロパティに指定していたのは、[Lorem Picsum](https://picsum.photos/)経由で取得する画像のURLです。
[^2]: 本記事にスクリーンショットを掲載したカードは、テスト投稿でタイムラインを汚さないように公開範囲を自分のみのサークルにしています。Xは2023年10月31日をもって、サークルのサービス提供を終了予定。

```html:例1
<meta property="og:image" content="https://picsum.photos/id/689/1200/630">
<meta name="twitter:card" content="summary_large_image">
```

原因を切り分けるため、OGP画像をLorem Picsum経由ではなく、[問題のページ](https://kazhashimoto.github.io/ogp-test/p02.html)と同じGitHub Pages上に配置して、そのURLを`og:image`の`content`属性に指定してみます。

```html:例2
<meta property="og:image" content="https://kazhashimoto.github.io/ogp-test/img/689-1200x630.jpg">
```

[例2のページ](https://kazhashimoto.github.io/ogp-test/p04.html)のURLをpostすると、今度は正しく表示されました。画像自体の問題ではなさそうです。

**図2**
![p04_edit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/6e49e83d-0b51-d315-a2fa-1fb975b8299b.jpeg)

そこで、例1の`og:image`に指定したURLに対するHTTPのGETリクエストの応答をChromeのDevToolsを使って調べてみました。

DevToolsのコンソールから次のコマンドを打ち込んで、`img`要素に画像をロードさせます。

```javascript:例3
document.createElement('img').src = 'https://picsum.photos/id/689/1200/630'
```

Networkタブを開き、このリソースに対するHTTP GETリクエストの応答内容を表示すると、ステータスコードは[302 Found](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/302)が返されていました。これは一時的なURLの移転を意味します。

**図3**
![http_picsum@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/e6b1b502-1c80-11e1-ea8c-9449619b9c82.png)
[Location](https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Location)レスポンスヘッダーに示されたリダイレクト先のURLを`og:image`の`content`属性に直接記述してみます。

```html:例4
<meta property="og:image" content="https://fastly.picsum.photos/id/689/1200/630.jpg?hmac=jWgRidu7UW1p...（省略）">
```

[例4のページ](https://kazhashimoto.github.io/ogp-test/p03.html)のURLをpostすると、カードにOGP画像が表示されました。

**図4**
![p03_edit.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/69adefcf-3f51-5e4f-73e4-654150519ee1.jpeg)

このことから、冒頭の現象（図1a）は、X側がOGP画像の取得を試みた際に302リダイレクトが返された場合、リダイレクト先のURLから画像を取り直すことはしないためだろうと理解しました。

本記事を書いている３ヶ月前(2023年7月1日頃）の時点では、図1aの現象は起きていませんでした。旧Twitterにおいても302リダイレクトへの対応が今と変わらないのであれば、picsum側でリダイレクト時のステータスコードが変更されたのかもしれませんが、今となってはわかりません。[^3]
[^3]: 2023年10月5日頃、Xのタイムラインにてsummary_large_imageの仕様変更（記事のタイトル削除）の話題が出てたのを見て、仕様を確認するため自分が以前作ったOGP設定のテストページを使って再度postしたところ、今回の問題に気づきました。以前postしておいたテストページについて、Xの仕様変更より数週間前からOGP画像が表示から消えていたため不思議に思っていました。

## 301リダイレクトの場合、OGP画像は表示される
リダイレクトが発生するケースとして、短縮URLを指定した場合はどうなるでしょうか？

次の２つの例は、[Bitly](https://bitly.com/)で生成した短縮URLを`og:image`に設定したものです。いずれの場合もXのカードにOGP画像は表示されます。カードの表示内容は図2や図4と同じなため、スクリーンショットは省略します。

なぜ短縮URLではうまくいくのでしょうか？ 違いは、短縮URLに対するGETリクエストはステータスコードが[301 Moved Permanently](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/301)で返される点です。これは恒久的なURLの転送を意味します。

### 例: bit.ly → github
リンク先のページと同じGitHub Pages上にOGP画像のjpgファイルを配置し、そのファイルへのリンクを短縮URLにした場合。
![bitly_github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/adcdd298-e65b-6a06-f113-19b9bcedcfa4.png)

```html:例5
<meta property="og:image" content="https://bit.ly/3Q93SyY">
```

例5のページは[こちら](https://kazhashimoto.github.io/ogp-test/p05.html)
![http_bitly_github@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/10198614-97e2-6b72-f9ad-a52e54eebf31.png)

### 例: bit.ly → cloudinary
[Cloudinary](https://cloudinary.com/)のアセット管理にOGP画像のjpgファイルを格納し、そのアセットへのリンクを短縮URLにした場合。
![bitly_cloudinary.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/84384e73-743b-5173-f849-df93090c047c.png)

```html:例6
<meta property="og:image" content="https://bit.ly/46Blkl4">
```

例6のページは[こちら](https://kazhashimoto.github.io/ogp-test/p07.html)
![http_bitly_cloudinary@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/b4146f71-51d4-edf3-8d6f-2f4be5b0bd76.png)