XやLINEでURLを送ると出てくる、画像つきの大きなカード——あの正体がOGP（Open Graph Protocol）です。設定していないページは、シェアされたときただの文字のリンクになってしまいます。metaタグ4行と画像1枚で、シェアされて嬉しいページに仕上げましょう。
シェアカードの正体
OGPを設定すると、URLがこんなカードに化けます。
og:image、太字がog:title、説明文がog:descriptionです。基本の4行
<head>の中に、property="og:〜"のmetaタグを4行書きます。
<head>
<meta property="og:title" content="しまちゃんのページ">
<meta property="og:description" content="はじめて作った、じぶんのホームページです。">
<meta property="og:image" content="https://shima-page.example.com/ogp.png">
<meta property="og:url" content="https://shima-page.example.com/">
</head>| 行 | カードのどこになるか |
|---|---|
og:title | カードのタイトル（太字部分） |
og:description | タイトルの下の説明文 |
og:image | カードの大きな画像 |
og:url | このページの正式なURL |
X（旧Twitter）向けの1行
Xで大きな画像のカードにしてもらうには、この1行も足します。
<meta name="twitter:card" content="summary_large_image">これが無いと、Xでは小さなサムネイルのカードになることがあります。タイトルや説明はog:〜のものが使われるので、追加はこの1行だけで十分です。
画像は1200×630で作る
OGP画像の標準サイズは1200×630ピクセル。サイトのタイトルとキャラクターやロゴを大きく置いた、シンプルな1枚が定番です。スマホの小さなカードでも読めるよう、文字は思いきって大きく入れるのがコツです。
べんりワザ画像を軽くしてページを速くする作った画像はシェアのたびに読み込まれます。軽くしてから置くとスマート設定できたか確認する
書けたら、公開したURLを確認ツールに通してみましょう。カードの見え方をまとめてチェックできます。
ラッコツールズ OGP確認
URLを貼るだけで、OGPの取得結果と各SNSでのカードの見え方をまとめて確認できる無料ツールです。
まとめ
- OGPはシェアされたときのカードの設計図。
og:title・og:description・og:image・og:urlの4行が基本 og:imageは**https://からの完全な住所**で、画像は**1200×630**で作る- Xには
twitter:cardの1行を追加。設定後は確認ツールでカードの見え方をチェック
シェアされた瞬間が、あなたのページの第一印象。カード1枚分の手間で、開いてもらえる確率が変わります。