OGPとは

https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html

Open Graph Protocolの略
SNSでのシェアの際に、正しく情報を伝えるためのプロトコル
like this:

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#">
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />

0si43 commented 3 years ago

とりあえず試しに静的画像でTwitterカード出そうとした。
localhostだと試せなかったので、Vercelのプレビュー環境で、 https://cards-dev.twitter.com/validator に通す
が、Invalidと言われる
twitter:cardに表示したい画像名を指定するのかと思っていたら違った
twitter:cardは、“summary”、“summary_large_image”、“app”、“player”のいずれか

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

見え方は下記を参照

https://www.granfairs.com/blog/staff/setting-twitter-cards

app / playerはモバイルアプリ/動画プレイヤーの指定みたいで、あんま使わないかも

0si43 commented 3 years ago

summary

summary_large_image

0si43 commented 3 years ago

相対パスで画像を指定したかったけれど、それはできないみたい

<meta property="og:image" content="/profile.png" />

これだとダメだった。画像のフルパスを指定する必要アリ

https://stackoverflow.com/questions/9858577/open-graph-can-resolve-relative-url

0si43 commented 3 years ago

Next.jsのOGP、ここがわかりやすかった

https://www.to-r.net/media/next-meta-tags/

0si43 commented 3 years ago

Facebookは別にいいかとも思ったが、ついでに設定しておく

参考

https://www.onecruise.co.jp/degiodegiko/what-is-facebook-ogp-settings/

公式のデバッガー

https://developers.facebook.com/tools/debug/

0si43 commented 3 years ago

無事、表示できるようになった。閉じる

https://twitter.com/0si43/status/1446366812598259716?s=20

0si43 / shetommy.com

OGP設定をする #8

OGPとは

summary

summary_large_image

参考

公式のデバッガー