コンテンツにスキップ
非エンジニアのためのVibeCoding入門

共有リンクの第一印象(OGP)

この章でわかること: 提案のURLをSlackやメールに貼ったときに出る「カード」の正体と、それを整えると商談相手の第一印象がどう変わるか。名刺で言えば「渡す前のひと手間」にあたる部分です。

リンクを貼ると出る「カード」の正体

Section titled “リンクを貼ると出る「カード」の正体”

URLをSlackやLINE、メールに貼りつけると、タイトル・短い説明・小さな画像がセットになったカードが展開されることがあります。あれは相手のアプリが気を利かせて描いているのではなく、あなたのページが持っている「このリンクはこう見せてほしい」という情報を読み取って表示しています。

この情報の仕組みが OGP(Open Graph Protocol) です。ページの見えない部分に「共有されたときの見出しはこれ、説明はこれ、画像はこれ」と書いておくと、Slack や各SNSがそれを拾ってカードを組み立てます。いわば、リンクという小さな窓に貼るミニ看板です。

設定しないと何が起きるか

Section titled “設定しないと何が起きるか”

OGPを用意しないと、看板の材料がない状態でカードが作られます。よくあるのは次のような残念な見え方です。

  • タイトルも説明も無く、URLの文字列だけが素っ気なく並ぶ
  • ページの中からたまたま拾われた画像(ロゴのかけらや意味のない一枚)が出る
  • 説明文が途中で切れていたり、開発中の内部的な文言が出てしまう

商談相手は、中身を見る前にこのカードを目にします。せっかく作ったプロトタイプでも、リンクの第一印象が雑だと「本当に大丈夫かな」という空気が生まれます。逆にカードがきちんとしていれば、開く前から期待値がひとつ上がるのです。

何を設定するか

Section titled “何を設定するか”

整えるのは、基本的にこの3つです。

  • タイトル(og:title): カードの見出し。提案名やサービス名を短く。
  • 説明(og:description): 見出しの下の一文。「何ができるものか」を一言で。
  • サムネイル画像(og:image): カードの顔になる画像。ここが一番印象を左右します。

画像は、横1200 × 縦630ピクセル程度を目安にしておくと、多くのサービスできれいに収まります(縦横比のイメージは、少し横長の長方形)。小さすぎる画像だと、拡大されてぼやけたり、そもそもカードに使われないことがあります。

反映を確認する(古い表示が出ることがある)

Section titled “反映を確認する(古い表示が出ることがある)”

設定したら、実際に貼って確かめます。ただし、ひとつ落とし穴があります。各サービスは一度読み取ったカードの情報をしばらく覚えておく(キャッシュ)ため、直したはずなのに古いカードが出続けることがよくあります。

  • まずは Slack やチャットに実際に貼って、出方を見る
  • 古い表示が残るときは、各サービスの**デバッガ(確認ツール)**でページを読み直させると、最新の内容に更新されます
  • 本番URLで確かめる。手元では見えないので、公開後に一度チェックするのが確実です

なぜ大事か

Section titled “なぜ大事か”

商談相手が最初に触れるのは、多くの場合プロトタイプそのものではなく、Slackやメールに貼られた1枚のカードです。中身がどれだけ良くても、入り口の見え方が雑なら、それが提案全体の印象になってしまいます。

OGPは、コードのように難しいものではなく「渡す前のひと手間」です。この小さな手間が、見せ方・限定共有で扱う「触ってもらう前の期待値づくり」を、リンクを送った瞬間から始めてくれます。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”