LINEでサイトのURLを貼り付けると、サイトによってはアイコンとタイトルが綺麗に表示される。ところが自分のサイトはアイコンが出ない。調べると原因が2つあった。
原因①：ogのURLにスラッシュが足りない
コードをよく見ると、こんな書き方になっていた。
export const SITE_URL = 'https://example.com'; // 末尾スラッシュなし
export const SITE_IMAGE = 'thumbnail.png'; // 先頭スラッシュなし<meta property="og:image" content={`${SITE_URL}${SITE_IMAGE}`}>この結果、生成されるURLは：
https://example.comthumbnail.pngドメインとファイル名がくっついてしまっている。LINEはこのURLに画像を取得しに行くが当然404になる。
修正は簡単で、どちらかにスラッシュを加えるだけ：
export const SITE_IMAGE = '/thumbnail.png'; // 先頭にスラッシュ原因②：faviconがSVGだけ
Astroのデフォルト設定はこうなっている：
<link rel="icon" type="image/svg+xml" href="/favicon.svg">SVGファビコンはChromeやFirefoxでは動くが、LINEのリンクプレビューでは使われない。LINEはPNGまたはICO形式のファビコンを要求する。
対策はPNGとICOも追加すること：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">PNGとICOファイルはfavicon.svgを変換して作れる。Macならターミナルで：
# SVG→PNG変換（qlmanage使用）
qlmanage -t -s 192 -o /tmp/ /path/to/favicon.svg
# 出力: /tmp/favicon.svg.pngあとはPythonのPillowで複数サイズのICOに変換できる。
OGP画像のデバッグ
LINEのキャッシュが残っていると修正後もすぐ反映されないことがある。確認には Facebook Debugger が使える。
<!-- 正常なog:image -->
<meta property="og:image" content="https://example.com/thumbnail.png">
<!-- 壊れたog:image -->
<meta property="og:image" content="https://example.comthumbnail.png">スラッシュ1文字の差でLINEのプレビューが出るかどうかが決まる。地味だが確認する価値がある。