【ITニュース解説】Stop Guessing How Your Links Look on Social Media — Preview Your OG Tags Before You Ship

Webサイトやブログ記事を公開した後、そのリンクをソーシャルメディアやメッセージングアプリで共有すると、自動的にプレビューカードが表示されることがある。しかし、このプレビューカードが意図した通りに表示されない問題が頻繁に発生する。例えば、画像が壊れたり、タイトルが空白だったり、記事と関係のない汎用的な説明が表示されたりすることがある。これは、作成したコンテンツの魅力が共有時に伝わらず、ユーザーがクリックせずに通り過ぎてしまう原因となり、結果としてコンテンツの到達率やクリック率に悪影響を及ぼす。

このような問題の主な原因は、「Open Graph (OG) タグ」というHTMLの特殊なタグにある。OGタグは、Webページの内容をソーシャルメディアなどのプラットフォームに正確に伝えるためのメタデータだ。一般的なWebサイトをブラウザで直接見ている時にはOGタグは目に見えないため、問題があることに気づきにくい。問題が明らかになるのは、リンクが共有され、プラットフォームがOGタグを読み取ってプレビューカードを生成した時であり、その時にはすでにクリック率への悪影響が出てしまっていることが多い。

OGタグは、現代のWebコンテンツがソーシャルメディアを通じて拡散される上で非常に重要だ。Twitter/X、Facebook、LinkedIn、Slack、Discord、WhatsAppといったほとんどのプラットフォームは、リンクが共有されるたびに、そのページのHTML内にある特定の<meta>タグ、つまりOGタグを読み取り、プレビューカードを作成する。

主要なOGタグとその役割は以下の通りだ。 og:titleは、プレビューカードに表示される記事のタイトルを指定する。 og:descriptionは、記事の内容を要約した短い説明文を指定する。魅力的な説明はクリックを促すために重要である。 og:imageは、プレビューカードに表示される画像のURLを指定する。画像は視覚的な魅力を高め、ユーザーの目を引きつけるために不可欠だ。 og:urlは、ページの正規のURLを指定する。

これらのOGタグが欠けていたり、記述方法が間違っていたり、指定された画像が存在しなかったりすると、各プラットフォームは代替としてページのタイトルをそのまま使用したり、汎用的なアイコンを表示したり、最悪何も表示しなかったりする。さらに複雑なことに、各プラットフォームは独自のクローラー、キャッシュの保持期間、画像の推奨サイズや縦横比に関する要件を持っている。そのため、あるプラットフォームでは完璧に表示されるプレビューカードが、別のプラットフォームでは画像が切り取られたり、全く表示されなかったりという事態が発生し得る。

よくある失敗パターンとしては、og:imageが間違っているか存在しないケースが挙げられる。例えば、ローカル環境では動く相対パスで画像を指定していても、本番環境で読み込めなくなることがあるため、常に絶対URLを指定することが重要だ。また、画像の縦横比の不一致も多く、FacebookとTwitterでは画像をトリミングする方法が異なるため、一方では綺麗に見えても他方では切れてしまうことがある。タグを修正しても、プラットフォームのキャッシュが古いためにすぐにプレビューに反映されないことも珍しくない。これらの問題は、Webサイトを直接閲覧しているだけでは発見できず、リンクが共有されて他者のフィードに表示された時に初めて判明し、その時にはすでに機会損失が発生している。

この問題を未然に防ぐためには、Webページを公開する前に、各プラットフォームで実際にどのようにプレビューカードが表示されるのかを必ず確認することが必要だ。そのための便利なツールとして、samtoolkit.comで提供されている「OG Preview」ツールがある。

OG Previewは無料で利用できるブラウザベースのツールだ。最大の特徴は、ユーザーが入力した情報がサーバーに一切送信されない点にある。すべてブラウザ内で処理が完結するため、プライバシーが保護され、未公開のドラフトURLが外部に記録されるリスクもない。このツールを使うことで、Twitter、Facebook、LinkedIn、Slackといった主要なプラットフォームでのプレビューカードの表示を、横並びで同時に確認できる。

ツールの使い方はシンプルだ。まず、公開前のページのURLをツールに貼り付けるか、もしページがまだライブになっていない場合は、HTMLから直接OGタグをコピーして貼り付ける。ツールは、入力された情報に基づいて各プラットフォームがどのようにプレビューカードをレンダリングするかをシミュレーションし、その結果を一覧で表示する。これにより、複数のプラットフォーム間で表示の不一致、例えば画像が切り取られている、説明文が途中で途切れている、タイトルが表示されていないといった問題を発見できる。問題が見つかったら、元のページのHTMLにあるOGタグを修正し、すぐにOG Previewツールで再確認する。このプロセスを繰り返すことで、ページが正式に公開され、各プラットフォームにキャッシュされる前に、すべての問題を解消することが可能になる。

すべてのリンクを徹底的に確認することが難しい場合でも、最低限、以下のOGタグを設定し、その表示を確認することが推奨される。og:titleは約60文字以内に収めると途中で切り捨てられにくい。og:descriptionは魅力的な説明文を約155文字以内にまとめると、ほとんどのプラットフォームで全文が表示される。og:imageは絶対URLで指定し、理想的なサイズは1200×630ピクセルで、ファイルサイズは5MB以下に抑えるのが良い。og:urlはページの正規URLを指定する。また、Twitterでの表示をより魅力的にするために、twitter:cardタグをsummary_large_imageに設定することも推奨される。

これらの基本設定が完了したら、OG Previewツールを使って、各プラットフォームで意図した通りにプレビューがレンダリングされるかを最終確認する。これは、作成したコンテンツがユーザーの目に最初に触れる前に、その魅力を最大限に引き出し、クリックしてもらうための非常に重要なステップだ。正確で魅力的なプレビューカードは、コンテンツの発見性を高め、より多くの人々に届けるための鍵となる。