「SNSボタンを自分の記事リンクに変更する」の記事で

こんなことをボヤいていたんです。

そしたら開発者のアルパカさんから返信が来て・・・(感動(´；ω；｀))

参考記事を教えてくださった＼(^o^)／＼(^o^)／

(自分で探せよっ(；´Д｀)って感じですよね。あれれれ)

実は以前読んでみたんです。

ですが、easy-notion-blogでも適用されるのか、notion-blogのみなのかが分からず後回しにしていたへろほろでした・・・・・(゜o゜;

アルパカさんから直接「これ使えます！」と断言していただけたので、

今回自信を持って改造していこうと思います＼(^o^)／＼(^o^)／(ありがたやー)

勇気をもらえた

開発７日目。

アルパカさんのブログ「Notion Blog公式APIでOG Imageに対応する」を

元に進んでいきます。

以下、シェア時に表示される画像 = 【OG Image】と表記して説明します。

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

• v0.1.0のリリースに関する記事はこちら
• v0.1.0以降のclone後にデフォルト画像設定をする場合

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

• OG Imageを登録する場所

notionのdatabaseにある「OGImage」の列に画像を登録していきます。

• 登録したOG Imageの情報を収集している場所

▼　アルパカさんの記事によると・・・

scr/components/header.tsxからそれっぽいのを探す。。。

• 収集したOG Imageデータを使う記述

▼ アルパカさんの記事によると・・・

src/pages/blog/[slug].tsxからogImageUrl={post.OGImage}を探す

異常なし・・・・ってことは・・・

▼　見本：アルパカさんの記事

まんま修正する

▼　アルパカさんの記事を再度確認

defaultUrlはこの前の「SNSシェアで自分のリンクに変更する」の記事で手打ちしていた部分【https://easy-notion-blog-02.vercel.app】と重なるので、後日defaultUrlを呼び出して活用できたらいいなーって欲が出てきました。

ついでに追加しちゃいます。(*´ω｀*)(ちゃっかり)

https://alpacat.com/og-image.pngに行ってみるとアルパカさんの画像が表示される状態。

画像といえば、今まで追加するにはpublicフォルダーに入れてきた。

(詳細は「Homeに画像を中央揃いで追加する」の記事)

この画像でもアクセスできるのか試してみる。

https://easy-notion-blog-02.vercel.app/hero-room.jpg

飛べるジャーーーン＼(^o^)／＼(^o^)／

ってことで

OG Imageが空の場合に表示させるdefaultOgImageUrlは

publicフォルダーに収納しておけばいいみたい⭐

私は特に別途用意しないでいいかなーって思ったので、

Home画面に表示しているお部屋の画像を設定することにしました。

さて、これがどう機能するかはVercelへアップロードしてからのお楽しみ。。。。

ドキドキ待機していながらもう結構な時間がすぎ、

失敗確定フラグで落ち込んでいたところ・・・・

Twitterに通知が(´；ω；｀)(天からの声・・・・)

ってことで、og:imageだけでなく

twitter:imageとtwitter:cardも設定する必要があるということが分かったので、

さっそく着手٩(๑òωó๑)۶

👇この部分

twitterアカウントは・・・

プロフィールからでも確認できる。(他にもいろんなやり方ある)

自分のコードに追加していきましょー٩(๑òωó๑)۶

アップロード後確認してみる・・・・(ドキドキ)

でたっ!!!!!!!!!!!

今回、記事リンクをコピーしてtwitterに貼り付けるとOGImageが作動した。

試行錯誤して気づいたオチですが、少し待ってからSNSボタンの確認をすれば反応していたっぽいです。。。。(´；ω；｀)

以下、そんなオチに気づかず試行錯誤を始めたへろほろです。。。。

(興味ない方は「本日のまとめ」まで飛んでくださいー)

もう一度アルパカさんの記事を読み直す・・・

👆

この記述をすればOGImageが動いてくれるっていうことだから・・・・

src/pages/blog/[slug].tsxより

👆ここに追加するのかな

追加したらエラー(´；ω；｀)

えっと・・・とりあえず入れたらダメっぽいから、その上の<div>に入れることにした。

さてどうなるかな・・・・(*´ω｀*)

あちゃちゃ・・・・(´；ω；｀)

もう一度発行されたものを見てみる・・・

記事のリンクを貼り付けると・・・

👇

OGImageが動く

ってことは・・・

SNSボタンを押すと・・・・

👇

記事のリンクが自動発行される(ここまでは既に機能してる)

👇

Hey!!(´・ω・`)

Come on!!!!!!!!!!٩(๑òωó๑)۶

できたーーーーー＼(^o^)／＼(^o^)／

ん？？？？

あれ？？？

以上(´・ω・｀)(えーこんなにいろいろやったのにー　www)