herohoroブログ

OGImageの種類からコードを学べ



🔄   2023-03-14

OGImageを実装したことで

やたらとシェアしたくなり

シェアボタンを押しては投稿手前で削除

を繰り返して夜な夜な遊ぶようになった

開発7日目続き。

(前回はこちらの記事です)

OGImageを起動させるといろんな表示になるのでまとめてみました。

*******************

この記事はv0.1.0のリリース前の内容になります

  • v0.1.0のリリースに関する記事はこちら

*********************

見え方まとめ
Twitter

▼ OGImageを登録せずデフォルト状態の記事

image block

▼ OGImageを登録している記事

image block

Facebook

▼ OGImageを登録せずデフォルト状態の記事

image block

▼ OGImageを登録している記事

image block

Slack

▼ OGImageを登録せずデフォルト状態の記事

image block

▼ OGImageを登録している記事

image block

コードをもう一度見てみる

image block

🤔
Twitterは2種類設定されているんだね。

Twitter
  • twitter:card はOGImageをnotion上で登録した時に表示される
image block

👆画像の下に記事タイトルなどが表示される正方形のことをcardと呼んでいるのかな?

  • twitter:image はOGImageが未登録のままデフォルトで予め用意した画像が表示される
image block

もう一度見てみる・・・・

image block

og系に注目してみると・・・・

  • タイトル
  • 概要
  • 画像

👆

この3つが設定されている。

むむむむむ???

image block
image block

あ、両方とも

  • タイトル
  • 概要
  • 画像

が表示されてますがな。(*´ω`*)

今日の収穫

twitterに関するコードを見返してみると、

OGImageの有無で発行されるデザインが異なるけど引っ張ってくる情報は同じじゃん\(^o^)/

以上、ちょいメモでした。

twitter以外の発行のされ方についても深堀りしてみたいなー(興味津々(*´ω`*))


Xではたま〜にする更新のお知らせを行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

Buy Me A Coffee

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/