リンクを共有したときに出る画像（OGP）を、小さなサイトに設定する手順

1. OGPで決まること

OGP（Open Graph protocol）は、ページを他のサービスに共有したとき、題名や画像などをどう見せるかを伝えるための取り決めです。<head>の中に、<meta property="og:…">の形で書きます。設定がない場合の表示は、共有先のサービスごとに異なります。意図しない画像が出たり、画像が出なかったりすることがあります。

2. 必要な項目

公式の仕様（ogp.me）は、次の4つを必須としています。

画像には、追加の項目があります。og:image:widthとog:image:heightは画像の幅と高さ（ピクセル）、og:image:typeは画像の種類（例：image/png）、og:image:altは画像の内容の説明です。仕様は、og:imageを指定するなら、og:image:altも指定するよう書いています。画像に含まれる文字を、読み上げでも伝わる文にして書きます。

3. 画像を作る

画像は、サイト全体で共通のものを1枚用意すれば始められます。記事ごとに作ると、共有されたときに内容が伝わりやすくなりますが、手間も増えます。

この記事の例では、横1200px、縦630pxのPNGを作りました。比率は約1.9対1の横長です（この大きさは、ogp.meの仕様で定められたものではなく、作った画像の大きさです）。ファイルの大きさは約68KBでした。サイト名、短い説明、アドレスだけを置き、文字は大きくしています。

from PIL import Image, ImageDraw, ImageFont

W, H = 1200, 630
im = Image.new("RGB", (W, H), "#233f34")
d = ImageDraw.Draw(im)
font = ImageFont.truetype("日本語フォントのファイルの場所", 84)
d.text((110, 120), "サイトの名前", font=font, fill="#fffefb")
im.save("og.png", optimize=True)

文字を入れるフォントは、自分のパソコンにある日本語フォントのファイルを指定します。作った画像は、サイトの公開フォルダ（例：assets/og.png）に入れます。

4. HTMLに書く

すべてのページの<head>に、次の形で書きます。URLは、公開しているアドレスから始まる完全な形で書きます。

<meta property="og:type" content="website">
<meta property="og:title" content="ページの題名">
<meta property="og:url" content="https://サイトのURL/ページのパス/">
<meta property="og:image" content="https://サイトのURL/assets/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="画像の内容の説明">

仕様によると、og:imageを複数書いたときは、上にあるものが優先されます。画像の追加の項目（幅・高さ・種類・alt）は、対応するog:imageの直後に書きます。

5. 公開後に確認する

1. 画像のURLを、ブラウザで直接開く。画像が表示されるか。
2. ページのHTMLに、og:imageなどが入っているかをコマンドで見る。
3. 実際に、自分だけが見られるチャットなどに、ページのURLを貼り、題名と画像が出るか確かめる。

# 画像が返るか（200、content-type が image/png）
curl -sI https://サイトのURL/assets/og.png | head -5

# HTMLに og: が入っているか
curl -s https://サイトのURL/ | grep -o '<meta property="og:[^>]*>'

表示が思ったとおりでないときは、画像のURLが誤っていないか、公開したフォルダに画像が入っているか、og:urlが正しいかの順に見ます。共有の見え方は、サービスごとに少しずつ違います。確認した結果は、チェックリストの公開の項目にメモします。