OGPの設定ができていないのでここを確認しながら調整を行う。
https://gotohayato.com/content/500/
色々と試行錯誤して何をどのように設定すればよいのか理解してきたのでまとめておく。
OGP
SNSなどで投稿内のURLを画像や説明付きの表示にするにはOGPに則ったマークアップをHTML内に記述します。
サンプルとして作成したOGPの設定を掲載しておく。
<meta property="og:description" content="Symdon's works, archiving, and also Python, Emacs and Freee Software about." />
<meta property="og:image" content="https://www.symdon.info/_assets/ogp/kuma3.jpg" />
<meta property="og:site_name" content="Hello!! I am symdon" />
<meta property="og:title" content="Hello!! I am symdon." />
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="2021-08-10T14:29:54+09:00" />
<meta property="og:url" content="https://www.symdon.info" />画像サイズなどに制限があることもあるのでそれぞれのサービス毎の仕様を確認したほうが良い。
Twitter Card
Twitterでのカード表示の仕様はこちらに記載されている。
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started
サンプルとして作成したTwitterカードの設定を掲載しておく。
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@TakesxiSximada" />
<meta name="twitter:image" content="https://www.symdon.info/_assets/ogp/kuma4.jpg">
<meta name="twitter:site" content="@TakesxiSximada" />画像サイズ
Twitter Cardで使用される画像のサイズはカードのタイプ毎に異なる。
| Card Type | 横(pixel) | 縦(pixel) | アスペクト比 | 備考 |
|---|---|---|---|---|
| smmary | 144 | 144 | 1:1 | |
| summary_large_image | 600 | 314 | 1.91:1 | 760×428pxの場合、切り取らられる |
| app | ||||
| player |
検証方法
Card validator - Twitter
Twitterのcard表示はTwitterが提供しているCard validatorで表示を確認できる。