プラットフォームが実際に読み取るもの
Slack、LinkedIn、X、iMessageにリンクを貼ると、そのプラットフォームはページを取得しメタタグからカードを作成します。JavaScriptは実行せずCSSも見ず、head内のタグだけを読み取ります。
フォールバックの順序
ほとんどのプラットフォームは同じ順序で処理し、このプレビューもそれに従っています。
- タイトル -
twitter:title次にog:title次に<title> - 説明文 -
twitter:description次にog:description次にメタディスクリプション - 画像 -
twitter:image次にog:imageその後はなし
だからOpen GraphタグをすべてTwitterタグに複製するのは大抵無駄。別に設定すべき唯一のタグは twitter:card大きな画像か小さなサムネイルかを決めるから。
カードが壊れる主な3つの原因
- 相対パスのog:image。 クローラーはページの文脈がなく解決できない。絶対HTTPS URLかなしでなければならない。
- アクセス不能な画像。 認証が必要、robots.txtでブロック、または不明なユーザーエージェントを拒否するホストから提供されている。
- 過剰なキャッシュ。 タグを直しても古いカードが数日残る。Facebook Sharing DebuggerやLinkedIn Post Inspectorは再スクレイプを強制。Xはキャッシュの期限切れを待つだけ。
SEO機能ではない
これらのタグはランキング要因ではない。リンクがクリックに値するかどうかを決めるだけで、URLだけの灰色ボックスは共有もクリックも明らかに減る。
タグを書くにはまず、 メタタグジェネレーター 代わりに。