Glósóli

うーん

忘備録:LP 作る際の OGP 周り

Google Maps の埋め込みくらい地味に面倒な OGP 周りの設定である。
LP 作るときとかにサクサクやりたいので備忘録を書くのだった。

テンプレ

これを埋めるとよい。og:image は 1200 × 630 px で作る。URL は絶対パスで。

<!-- OGP -->
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:site_name" content="">

<meta property="fb:app_id" content="">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image:src" content="">

Facebook 云々

fb:app_id を取得する

https://hazimaru.jp/2054/
なぜ、こんなことに、、、
まぁ Google アナリティクスの Facebook シェアバージョンみたいな感じだと思うので特に設定しなくてもよい。

デバッガーにかける

https://developers.facebook.com/tools/debug/og/object/
デバッガー - 開発者向けFacebook

よくわからんがデバッガー増えた?

Twitter 云々

カードバリデーターにかける

https://cards-dev.twitter.com/validator

特に必須ではないがやると安心する。