herohoroブログ

デフォルト画像を設定しよう_OGImage



🔄   2023-03-14

v0.1.1にOGImege機能が追加されました。

取り込んで確認をすると・・・

image block

https://github.com/otoyo/easy-notion-blog/issues/17

デフォルト画像が非表示になってしまいます(´・ω・`)

Issueで投稿し、アルパカ先生から回答をいただけたので

今回は簡単に解説していきます\(^o^)/

前提条件:デフォルト画像の追加

publicフォルダへデフォルト画像として使いたいデータを収納する

image block

※ 当ブログの記事「Homeに画像を中央揃いで追加する_意外と大変」より

scr/components/header.tsxにあるデフォルト関連の値(「”」で囲まれた部分)を修正する

image block

※ 当ブログの記事「SNSにシェアする時に画像を添付する_OGImage」より

(-ω☆)キラリ

さっそく本題に入ります!!!!!!!!!

デフォルト画像に必要なコードについて

image block

リリースの際に同期したAdd og tags for twitter #3の部分に対して微調整していきます。

image block

自分のコードを修正する

追加部分をコピペ

image block

不要箇所削除

image block

確認する

SNSボタンを押してみる

image block

直接リンクを貼り付けてみる

image block

notionにリンクを貼り付けてみる

image block

ブログでの見え方を確認してみる

🚧
執筆以降easy-notion-blogはバージョンアップを重ね、今ではサムネ画像も表示されています。

無事設定できました\(^o^)/\(^o^)/


今回情報元となったGitHub上でのやりとりはこちらになります⭐

詳しく知りたい方はのぞいてみてください。

v0.5.0以降の大規模バージョンアップ後に設定したデフォルト画像の設定

▼ 考える過程を残したログはこちら


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

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

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

Buy Me A Coffee

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


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

https://herohoro.com/atom

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

Twitter Timeline


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