ホームページのリンクを送るときの画像と文章 OGPの設定と確認

ホームページのURLを送った時に古い画像や別の見出しが出るなら、送ったページと、そのページが伝えるOGPの設定を照合します。トップと個別の案内は、それぞれの内容が分かるタイトルと画像を選びます。共有先によって切り取り方やキャッシュが異なるため、生成されたHTMLと、実際に使う媒体での表示を分けて確認します。

まず、相手に送るURLを一つ決め、共有された画像と見出しからどんな用件が分かればよいかを書きます。例えば架空の手芸教室なら、トップは教室の名前と活動、体験案内は「初回体験の内容」と申込の対象を伝えます。トップと個別記事で同じ画像を使う場合でも、見出しがページを識別できるようにします。公開範囲が限定されたページや期限がある案内なら、共有してよいURLかと終了後の案内先を先に確かめます。

短い説明は画像が表示されない場合にも内容が伝わるように書きます。営業時間や募集日を載せた画像は、変更のたびに共有用画像も更新する必要があります。具体的な日付はページ本文で案内し、共有画像は長く使える内容にする方法もあります。募集終了が伝わることが重要な場合は、カードに頼らず、URLを開いたページの冒頭に状態を書きます。

URLの候補が複数あるときは、共有の目的を明確にします。例えばトップを送るのは初めて教室を知る人へ、個別ページを送るのは体験の持ち物を確認する人へ、と分けます。既定の画像だけで両方を扱う場合も、共有カードから開いた先の内容に合っているか、各URLを実際に開いて確認します。

タイトルと説明

Open Graph protocolの基本項目には og:title、og:type、og:image、og:url があり、説明は og:description を使います。HTMLのheadを確認し、トップ用のタイトルと個別のページ名が混ざっていないかを見ます。ページで見えるH1やブラウザーのタブに出るタイトルと、共有用に指定した情報を分けて確認します。作成ソフトやテンプレートが初期値を出す場合は、同じ項目が複数出て、どちらを使う想定か分からない状態がないかを確認します。

画像の参照先とURL

og:image には、共有する側のサービスが取得できる公開URLを設定します。自分だけが閲覧できる保存先や、権限が必要なファイルは、媒体が取得できる条件を別に確認します。検証用のHTMLをブラウザーで開き、指定した画像の参照先が応答することと、タイトル・URLの値を確認しました。今回の検証はHTMLと画像取得までです。共有サービスでの表示や更新時期は、利用する媒体で別に確認します。

公開ページに出る値を確認すると、設定欄に画像を選んだのにトップの既定値が出ているケースも切り分けられます。画像の説明を指定できる場合は、人物や作品の実物を示す写真と、内容を説明するイラストを区別します。

パラメータの付いたURLや、転送されるURLを使う場合は、到達する公開先と設定された共有用のURLを照合します。OGPのURLと、検索のために設定する正規URLは用途をそれぞれ確認し、意図が分からない値を一括で変更しないようにします。複数の画像を指定する構成なら、順序と使う媒体の対応を確かめます。

共有用画像は、端を切り取っても重要な要素が残る位置に作ります。教室の体験を説明するなら、作業の手元や道具を中央寄りに置き、隅に小さい文字を並べすぎないようにします。端末や表示場所でカードの縦横比が変わることがあるので、媒体の公式条件を読み、実際に利用する表示で確認します。特定の画像寸法がどこでも同じ見え方になると考えず、公開する媒体とカードの形式を記録します。

画像で伝えたい要点と、タイトルだけでも伝えたい情報を分けます。例えば「初心者向けの体験」であることをタイトルに含め、画像は体験で使う道具を示します。イラストで架空の場所を描く場合は実店舗の入口案内として扱わず、アクセスページでは現地と照合できる写真を使います。ホームページ用の撮影リストと合わせて、画像の用途を決めておけます。

画像が縮小されたときは、載せた文字が読めるかだけでなく、対象の品や場所を特定できるかを見ます。イラストの外側に重要なボタン風の要素を置くと、切り取り後に意味が失われます。共有用の見た目を確認する時は、カードだけの画像と、実際に開いたページの先頭も並べます。

共有先のプレビューを確認する機能がある場合は、公開を認められたURLを使い、その媒体の公式手順に従います。確認結果は「取得した日時」「指定したURL」「出た画像と見出し」「実際のカードと違う点」で記録します。URLを外部のプレビューサービスへ入力すると、外部からアクセスされる場合があるため、関係者向けの検収URLや未発表の案内は入力先と閲覧範囲を確認してから扱います。

古いカードが出たら、公開済みHTMLに新しい情報があるか、画像のURLが開くか、共有先が取得できる条件かを先に見ます。HTMLが変わっていなければ、作成した内容を正しい公開先へ反映したかを確認します。HTMLが正しくても既存の投稿やプレビューに古い内容が残る場合は、媒体が提供する更新機能と対象を調べます。更新までの時間や、既に送ったメッセージへの反映は媒体ごとの扱いに従います。

社内のプレビューで見たカードと、共有した相手が見たカードが違う場合は、まず同じURLを使ったかを確認します。端末によって画像が省略される表示を見つけても、ページの内容が変わったとは限らないので、タイトルと到達先を優先して照合します。どこで観測できたかを記録し、別のアプリへ同じ結果を一般化しないようにします。

画像を差し替えたら、どのページで、どの画像を、いつ変更し、どの媒体で見たかを書きます。例えば「体験案内の公開URL。道具のイラストを差し替え。PCとスマホのカード確認、画像取得は正常。過去の投稿は未確認」と記録します。新旧の画像名を記録すると、古いHTMLを参照しているのか、同じ画像URLの内容が更新されていないのかを調べやすくなります。

次に確認する条件は、ページタイトルの変更、公開URLの移転、画像の更新、共有に使う媒体の追加です。共有結果だけを直すために公開ページの目的を変える必要はありません。ページを開いた利用者が、カードで予告された内容と同じ案内にたどり着けるかを最後に読み直します。

例えば体験募集を終了した場合は、画像だけを差し替える前に、カードを開いた人が受付の現在の状態を知れるかを確認します。終了日が過ぎても古いカードを見る人がいるため、公開ページ側の冒頭に終了と次回案内を置くと、現在の状況を伝えられます。

確認に使った資料

• Open Graph protocol

情報確認 2026/11/09。製品・サービスの仕様は参照先でご確認ください。