前にXでブログを紹介するときのルールを調べてから、Xで記事を紹介することを考えるようになりました。そのあとも説明文や目次など、ブログの「外から見える部分」を少しずつ整えてきています。
そこで気になったのが、Xに記事のURLを貼ったときの見た目です。URLの下に大きな画像とタイトルが出ている投稿がありますよね。あれは何で決まっているの？？
今回は、AI（Claude）にXの開発者向けドキュメント、OGPの公式サイト、Cocoonの公式サイトを調べてもらい、わかったことを整理しました。このブログで実際にどう出るかは、まだ確かめていません。今回は「調べてみた」の回です。
Xで記事を紹介したいけど、貼ったときの見た目ってどう決まるの？？
Xの開発者向けドキュメントの保存版（2024年12月〜2025年1月に保存されたページ）によると、URLを含む投稿があると、Xがそのページを読みにいって（クロール）、カードの種類と中身を取ってくる仕組みです。つまり見た目は、リンク先のページ（私のブログ）に書かれている情報で決まります。
ここで最初につまずいたよ。Xのカードの説明ページは、今のX公式の開発者サイトでは見つけられなかったんだ。だから、この記事のXの決まりは「保存版ではこう書いてあった」という話で、今も同じかは確かめられていないよ。
OGPって何？？Xのカードはどの情報を読んでいるの？？
OGP（Open Graph protocol）は、ページのタイトルや画像をSNSなどに伝えるための決まりです。公式サイトでは、どのページにも必要なものとして次の4つが挙げられていました。ページの見えない部分（head）にmetaタグで書きます。
| プロパティ | 中身 |
|---|---|
| og:title | タイトル |
| og:type | ページの種類 |
| og:image | 画像のURL |
| og:url | そのページの正式なURL |
このほか、1〜2文の説明を入れる og:description は「任意だけど、すすめる」とされていました。
Xには「twitter:」で始まる専用のタグもあります。保存版のドキュメントでは、Xはまず twitter: のタグを探し、なければ対応する OGP のタグ（og:title、og:description、og:image）を代わりに使う、と書かれていました。ただし、大きな画像のカードにしたいときは twitter:card のタグが必要、ともありました。twitter:card には、代わりになる OGP のタグがないためです。
カードの種類と画像の決まりを調べてみた！
保存版のドキュメントでは、カードは Summary Card・Summary Card with Large Image・App Card・Player Card の4種類でした。ブログで関係がありそうなのは、小さな画像の「summary」と、目立つ大きな画像つきの「summary_large_image」です。
| summary | summary_large_image | |
|---|---|---|
| 縦横比 | 1:1（正方形に切り抜かれる） | 2:1 |
| いちばん小さいサイズ | 144×144ピクセル | 300×157ピクセル |
| いちばん大きいサイズ | 4096×4096ピクセル | 4096×4096ピクセル |
| ファイルの大きさ | 5MB未満 | 5MB未満 |
大きな画像のカードで使える形式は、JPG・PNG・WEBP・GIF（最初の1コマだけ）で、SVGは使えません。ロゴのように、たくさんのページで同じ画像を使うのは避けるよう書かれていました。
文字は、twitter:title が70文字まで、twitter:description が200文字まで。大きな画像のカードでは、タイトルはスマホのアプリで2行・Webで1行に切られ、説明文はスマホのアプリでは表示されない、とありました。
スマホのXで説明文が出ないなら、画像とタイトルが勝負ってことだね。
CocoonのOGPの設定はどこ？？公式で読めたのはここまで
Cocoonの公式サイトによると、設定の場所は管理画面の「Cocoon設定」→「OGP」タブです。よくある質問では、SNSのシェアボタンが表示されないときの確認項目のひとつとして、ここで「OGPタグの挿入」が有効か確かめるよう案内されていました。
同じタブの「ホームイメージ」は、サイトのトップページをSNSで共有したときのサムネイルで、「選択」ボタンで画像を選んで保存します。初期状態ではCocoonの画像が使われるので、SNSでCocoonの画像が出てしまうときの直し方として、よくある質問にも載っていました。
ここで、画像の大きさの話が食い違いました。
| 情報のもと | 書かれていた大きさ |
|---|---|
| X（保存版のドキュメント） | 大きな画像のカードは縦横比2:1 |
| Cocoonのよくある質問 | OGP画像のおすすめは1200×630ピクセル（1.91:1） |
2:1と1.91:1、ちょっとだけ違うんだ。1200×630の画像がXでどう切られるかは、実際に貼ってみないとわからないよ。どちらが正しいとは、まだ決めつけないでおくね。
また、SEOのプラグイン（All in One SEOやYoast SEOなど）と一緒に使うと、OGPのタグが二重に出ることがあるそうです。OGPタブでほかにどんな項目が選べるのかは、公式のマニュアルでは確かめられませんでした。
アイキャッチ画像がない記事はどうなる？？
記事ごとの画像の決まり方は、Cocoonの公式マニュアルに順番を書いたページが見つかりませんでした。公式フォーラムのやりとりでは、次の流れが前提になっていました。
- アイキャッチ画像がある記事 → その画像
- アイキャッチがない記事 → 本文の中の画像
- 画像がひとつもない記事 → 「ホームイメージ」の画像
フォーラムの話なので断定はしません。ただ、これが正しければ、ホームイメージを変えていないと、画像のない記事ではCocoonの画像が出てしまうかもしれません。
説明文は、前にメタディスクリプションの回で調べた「SEO」の欄で記事ごとに設定でき、空なら本文の最初から自動で作られます。これがOGPの説明文にも使われるかは、公式では確かめられませんでした。
直したのに変わらない…はキャッシュかも！？
保存版のドキュメントでは、Xはカードの情報をおよそ7日ごとに読み直し、リンクが投稿されてから7日間は内容をキャッシュする（ためておく）とありました。反映されないときは、URLの最後に「?x=1」のような値を付ける方法や、画像のファイル名を変える方法が紹介されています。Cocoonのよくある質問でも、X側の更新には時間がかかることがあるので、設定を確かめてから待つよう案内されていました。
また保存版のドキュメントでは、Xは「Twitterbot」という名前でページを読みにくるとあり、robots.txtやセキュリティの設定でブロックされると、カードが出ない原因になるそうです。
前に記事の保存が「403」で止まって、サーバーのWAFを調べたことがあったよね。カードが出なかったら、Twitterbotが止められていないかも見てみよう。
今回わかったことと、次にやること
- カードの見た目は、リンク先のページのOGPやtwitter:のタグで決まる
- og:のタグは代わりに使われるが、大きな画像のカードには twitter:card が必要（保存版のドキュメント）
- 画像の比は、Xは2:1（保存版のドキュメント）、Cocoonのおすすめは1200×630で、少し食い違う
- Cocoonは「Cocoon設定」→「OGP」タブ。ホームイメージの初期状態はCocoonの画像
- 次にやること：このブログの記事に、og:とtwitter:のタグがどう出ているか確かめる
- 次にやること：CocoonのOGPタブを開いて、項目とホームイメージの今の状態を記録する
- 次にやること：Xの投稿の作成画面に記事のURLを貼って、カードの出方を確かめる
Xで紹介する前に「貼ったときの顔」を整えておくのが大事だとわかりました。次は自分のブログを実際に見て、どう出ているかを記録します！
コメント