HTMLの他サービスでの表示設定


htmlhead内に適切なmetaタグを書くことで他SNSなどでの表示を指定できます。

ogpとtwitter cardについて確認したことのスクショ付き覚書きです。

 

まずは内容がわかりやすいように画像を用意しました。

画像が小さすぎるとよくないようなので300×300サイズです。

OGP:Open Graph Protocol

OGPはWEBページ内容を記載するプロトコルです。

これがないと一部が表示されなかったり自動で作られた変な内容になります。

<meta property="og:xxx" content="yyy">でページ内容を記述します。

適当な公開ページに画像とHTMLファイルを参照できるようにします。

注意点として相対パスでなく実際にアクセス可能なURL*を書く必要があります。

*ここで書いてるURLは実際のものでないです。

 

DiscordでこのURLを張り付けるとOGPの内容が表示されます。

またツイッターのツールでプレビューを見てみます。

開発ツール:https://cards-dev.twitter.com/validator

こちらも問題なく表示されました。

Twitter card

続いてツイッターカード用の記述方法です。

<meta name="twitter:xxx" content="yyy" />でページ内容を記述します。

これを先ほどのHTMLに追記しました。

Twitterではtwitter:cardの方の内容が優先されます。

Discordの方は変化がありませんでした。

 

ツイッターカードは4種類あります。

  • summary(デフォルト)
  • summary_large_image(画像大き目)
  • app(アプリリンク)
  • player(動画)

下2つは設定が色々必要なので割愛しますが大きめの画像にするとこうなります。

<meta name="twitter:card" content="summary_large_image" />

ちなみにこれにするとDiscordのサムネイル表示もなぜか代わります。

内容はOGPのものなのに何でツイッターカードタイプが反映されるのかわよくわかりませんが、サービスによって何を参照してカードを作るかは異なるので公式フォーラムを読んだり実際に試してみるのが良いと思います。

コメントを残す

メールアドレスが公開されることはありません。