Open Graphチェッカー
公開URLを貼り付けると、og:title、og:image、og:description、およびTwitterカードを取得し、Slack、LinkedIn、Xでの表示をそのまま確認できます。
表示されないプレビューを直す方法
- 01
共有されるURL自体にタグがあるか確認する
ホームページや、リダイレクトの先にあるバージョンではなく、実際に人が貼り付けるそのURLで確認します。プレビューは最終的なレスポンスから読み取られるため、リダイレクト前のページにしか存在しないタグは、存在しないのと同じです。
- 02
画像を確実に取得できるようにする
og:imageには、見知らぬ第三者でも取得できる完全なhttps URLが必要です。相対パス、ログイン要求、ホットリンク対策、リダイレクトはいずれも避けてください。プライベートウィンドウで開けない画像は、各プラットフォームも取得できません。
- 03
プラットフォームが想定する形にする
無難なデフォルトは1200×630ピクセルで、アスペクト比はおよそ1.91:1です。ファイルサイズは数メガバイト以内に収め、JPEGかPNGを使用してください。プラットフォームによって切り取られる端が異なるため、テキストは枠の内側に余裕を持たせて配置します。
- 04
再試行ではなく再クロールさせる
どのプラットフォームも、最初に取得した結果を失敗も含めてキャッシュします。修正した後は、そのプラットフォーム自身のデバッガーを使って強制的に再取得させてください。そうしなければ、見ているのはキャッシュされた古い失敗であり、実際には壊れていない部分をいじることになります。
各タグの役割
og:titleとog:description
カードの見出しと補足テキストです。共有時にはページのtitleとmeta descriptionより優先され、これは実用的な仕組みです。検索結果で機能する言い回しが、フィードでもそのまま機能するとは限らないからです。
og:image
最も目に留まるタグであり、同時に最も失敗しやすいタグでもあります。原因のほとんどは内容の誤りではなく、単に到達できないことです。可能な場合はwidthとheightを明示的に指定してください。プラットフォームによっては、画像のダウンロードが終わる前にカードのレイアウトを組んでしまうことがあります。
og:url
共有されているものの正規アドレスです。同じページが異なるトラッキングパラメータ付きで出回っている場合でも、エンゲージメント数を1つに集約する役割を持つため、タグなしのクリーンなURLを指定すべきです。
twitter:card
小さなサムネイルにするか大きな画像にするかを選択します。それ以外の項目についてXはOpen Graphのタグにフォールバックするため、通常追加する価値があるtwitter:タグはこれだけです。
リンクプレビューについてよくある質問
なぜリンクのプレビューが空白になるのですか？
10回中9回は画像に到達できないことが原因です。相対パス、非公開バケット、あるいは取得側がたどらないリダイレクトなどが挙げられます。残りは、タグをJavaScriptで描画しているページで、ほとんどのプレビュー取得クローラーはJavaScriptを実行しません。
キャッシュされたプレビューをクリアするにはどうすればよいですか？
各プラットフォーム自身が持つデバッガーを使います。それぞれが独自のキャッシュを保持しているためです。FacebookのSharing Debugger、LinkedInのPost Inspector、Xのカード検証ツールなどです。すべてを一括で消去する方法はなく、リンクを共有し直すだけでは反映されません。
Open Graphタグが既にある場合でも、twitter:タグは必要ですか？
必要なのはtwitter:cardだけで、しかも大きな画像レイアウトにしたい場合に限られます。タイトル、説明文、画像はいずれもog:側の値にフォールバックします。
プレビューはSEOに影響しますか？
直接的には影響しません。Open Graphタグはランキングシグナルではないからです。影響するのは、共有されたリンクが実際にクリックされるかどうかであり、これは順位とは別の、多くの場合それ以上に重要な指標です。
同じリンクなのに、プラットフォームごとに見え方が違うのはなぜですか？
切り取り比率も、説明文の表示可能な長さも、キャッシュの保持期間もプラットフォームごとに異なるためです。端が切り取られても、説明文が途中で切れても内容が伝わるように画像をデザインしてください。