投稿する前に、シェアカードを確認しましょう
最終更新:
シェアカードとは、誰かがあなたのページへのリンクを貼ったときに、ソーシャルネットワークやチャットアプリが作る小さなプレビュー——タイトル、説明文、画像——のことです。そのページに出会うほとんどの人にとって、カードは彼らが目にする唯一の姿です。スクロールの途中でそれに出会い、1秒ほどで判断し、その背後にあるページがタップする価値があるかを決めます。厄介なのは、カードの不具合が静かだということです。カードは画面で見ているものから作られるのではなく、ページの head にある一握りの meta タグから、あなたが見たことのないスクレイパーが一度だけ取得して作るものなので、自分のブラウザではページが完璧に見えるのに、カードには画像がなかったり、先月の見出しが載っていたり、説明文が単語の途中で切れていたりします。だから、シェアするつもりのものを公開する前に、下書きの URL を Open Graph チェッカー に通し、読者が見る姿——4枚の小さなカード——でページを見てください。
リンクが広告である
リンクがソーシャルフィードやチャットのスレッドに貼られても、最初にあなたのページを訪れる人間はいません。プラットフォームはスクレイパー——小さくてせっかちなクローラー——を送り出し、それがページを一度取得し、head で見つけた meta タグからカードを作ります。その連鎖の誰も、あなたのレイアウト、タイポグラフィ、入念に調整したヒーローセクション、折り目の上に置いたスクリーンショットを見ることはありません。彼らが目にするのは、正確に3つのフィールドと1枚の画像です。og:title、og:description、og:image。この3つが間違っていたり、欠けていたり、古かったりすれば、受け手にとってあなたのページはまさに間違っており、欠けており、古いのです。カードの背後にある美しいページが、その印象を正す機会を得ることは決してありません。
カードは頑固でもあります。プラットフォームはその取得結果を、通常は正確な URL に対してキャッシュするので、スクレイパーが最初に作ったバージョンが、ページを編集したずっと後まで、数週間、数か月にわたってシェアされ続けるバージョンになることがよくあります。だからシェアカードは広告クリエイティブと同じ敬意に値します。シェアされること自体が目的の投稿にとって、リンクこそ広告であり、meta タグがコピーなのです。それらを後付けとして書くこと——あるいはサイト生成ツールに、近くにたまたまあるテキストで埋めさせること——は、誰もレビューしなかったクリエイティブでキャンペーンを回すのと同じです。
各プラットフォームが実際に読むもの
まず土台から。Facebook と LinkedIn は Open Graph を読みます。Open Graph プロトコルが定義する og:title、og:description、og:image、og:url、og:type です。この5つが揃ってまともであれば、最大の2つのプロフェッショナルなシェア面はカバーできます。X はまず自前の Twitter Card タグ——twitter:card、twitter:title、twitter:description、twitter:image——を読み、Twitter タグがない場合は Open Graph の同等タグにフォールバックします。Slack は Open Graph を先に読み、Twitter Card タグをフォールバックとします。言い換えれば、プラットフォームは材料については一致し、どの棚に先に手を伸ばすかでわずかに意見が異なるのです。
どこでも最後の頼みは同じです。素の <title> 要素と meta description が、Open Graph も Twitter タグも存在しないときに駆り出されます。このフォールバックは、私たちのものを含め、あらゆるチェッカーの読み方にとって重要です。ツールがカードのタイトルを見せたとき、正直な問いはその値がどこから来たか——意図を持って書いた専用タグからか、それとも検索結果ページ向けに書かれ、あなたのカードとは共有されていない文字数予算を持つ title 要素から救出されたフォールバックか——です。フォールバックを静かに差し替え、それをタグとして見せるチェッカーは、省略によって嘘をついています。だからこそ Open Graph チェッカー は、タグが存在するふりをせず、すべてのフォールバックをフォールバックと表示します。
カードを壊れて見せる失敗
古典は相対パスの og:image です。タグは content="/images/share.png"——URL ではなくパス——と言っており、ブラウザは自分がどのサイトにいるか知っているので、あなたのブラウザでは動きます。スクレイパーはそれを解決しません。スクレイパーが欲しいのは https:// で始まる完全な絶対 URL で、それが得られなければ、画像のないカードを作るだけで、読者は自分が何を見逃したか知ることもなく通り過ぎます。そのすぐ後ろには、存在はするが合わない画像があります。プラットフォームが推奨する 1200×630 ピクセルよりはるかに小さい、あるいは中央クロップで意味不明になる比率のものです。1200×630 は、それが何であるかとして扱ってください——広く公開されたプラットフォームのガイダンスであって、誰かが批准した標準ではありません——それでも、無視されたガイダンスは、見出しが画像から切り落とされたカードを意味します。
残りはもっと静かです。twitter:card タグが欠けていると、大きくて美しい画像を用意し、全幅の summary_large_image の扱いを期待していたとしても、X は小さなサマリーカード——テキストの横のサムネイル——にフォールバックします。空のタグ値は、欠けたタグより悪いです。content="" の og:title はフォールバックを発動させず、それを無で上書きします。そして間違った og:url——コピーされたテンプレートがよくやるように、ステージング用ドメインやホームページ、先週の記事を指すもの——は、すべてのプラットフォームに正規のページは別の場所にあると伝え、シェア、カウント、キャッシュのエントリを、実際に公開したページから引き離してしまいます。
タグを修正しても古いカードが表示され続ける理由
タグを修正し、再デプロイし、リンクをもう一度貼った——それでも古いタイトルがそこにいて、あなたに微笑んでいます。何も壊れていません。各プラットフォームは、あなたの URL に対して作ったカードをキャッシュし、そのキャッシュはあなたのサイトの変更を監視しません。プラットフォームの視点では、あなたのページがどんな姿かはすでに知っており、シェアのたびにすべての URL を再取得するのは、わずかな利益のための膨大なクロールになるからです。古いカードは、修正が失敗した証拠ではありません。キャッシュに、もう一度見に行くようまだ伝えられていない証拠です。そして伝えられるまで、リンクをシェアする同僚や読者はみな、古い取得結果を再配膳します。
だから伝えてください。主要プラットフォームはいずれも、単一 URL の新たな取得を強制する方法を提供しています。Facebook の Sharing Debugger と LinkedIn の Post Inspector はどちらもページを再取得し、再構築したカードを見せてくれます——X は歴史的に、同じ仕事のためのカードバリデーターを提供していました。タグを修正したら、該当するツールに URL を通し、投稿を告知する前に新しいカードを確認してください。再取得ツールが存在しない場所では、URL を変えればキャッシュキーが変わります。?v=2 のようなクエリ文字列を付けると、プラットフォームはそのリンクを見たことのないものとして扱います。一度きりのシェアにはまったく立派な手です。そして少しの忍耐を残しておいてください。再取得の後でもキャッシュが手放すには時間がかかることがあるので、すでに正しかったタグを編集し始める前に、確認し、待ち、もう一度確認してください。
2分間の公開前ルーチン
調査ではなくルーチンにしましょう。1つ目: 下書きの URL を Open Graph チェッカー に貼ります——スクレイパーが取得するページである限り、ステージングやプレビューの URL で構いません。2つ目: 4枚のカード——Facebook、X、LinkedIn、Slack——すべてが意図したタイトル、説明文、画像を表示していることを確認し、フォールバックと表示されたものに注意します。自分で選んだフォールバックは問題ありませんが、つまずいて陥ったフォールバックは、書かれるのを待っているタグです。3つ目: 画像の URL が絶対 URL であり、画像自体が少なくとも 1200×630 であることを確認します。4つ目: X で大きな形式を使いたい場所では twitter:card が summary_large_image であること、そして og:url がこれから公開する正規のページを指名していることを確認します。
5つ目: 公開します——そして、まだ見ている間に最初の取得を強制するために、自分でリンクをどこかに一度貼り、返ってくるカードを見ます。それが古かったり間違っていたりすれば、パニックで編集するのではなく、プラットフォーム自前のツールで再取得してください。2分、5つの手順、そしてほとんどの人が目にするあなたのページの姿が、あなたが実際に承認した姿になります。より広い公開前の総点検——TLS、セキュリティヘッダー、リダイレクト、ページが出発前に値する残りの定例チェック——については、並行して ウェブサイトヘルスチェック を実行してください。カードは表玄関ですが、家全体ではありません。