herohoroブログ

SNSにシェアする時に画像を添付する_OGImage



🔄   2022-08-02
キッカケ 🥰

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

image block

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

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

image block

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

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

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

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

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

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

勇気をもらえた

開発7日目。

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

元に進んでいきます。

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

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

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

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

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

SNSにシェアする時に画像を添付しょう

  • OG Imageを登録する場所
image block

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

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

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

image block

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

image block
🧐
微妙に違うけど・・・・いいのかな?? とりあえず出力して動かなかったら書き換えればいいかな

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

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

image block

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

image block

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

😨
OG Imageが上手く機能しなかったのはさっきの header.tsxの部分が原因かも!!!

修正しよう(*´ω`*)

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

image block

まんま修正する

image block

😨
エラーじゃん!!!defaultOgImageUrlが定義されていないってさ。

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

image block

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

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

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

🤔
同じようにアクセスると自分の画像に飛べるようにすればいいのかな・・・

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

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

image block

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

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

image block

飛べるジャーーーン\(^o^)/\(^o^)/

ってことで

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

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

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

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

image block

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

まだ終わってなかったー

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

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

Twitterに通知が(´;ω;`)(天からの声・・・・)

image block

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

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

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

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

image block

👇この部分

image block

😨
そうか・・・デフォルトで設定するだけでは反応しないのか・・・。

変更すべき部分を整理
image block

twitterアカウントは・・・

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

image block

いざ修正٩(๑òωó๑)۶

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

image block

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

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

image block

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

🤨
SNSボタンを押してみたらOGImageは反応しなかった・・・・

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

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

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

SNSボタンでOGImageを作動させよう

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

image block

👆

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

🤔
SNSボタンで自分の記事リンクを追加した時にいじった部分に入れればいいってことかも

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

image block

👆ここに追加するのかな

image block

追加したらエラー(´;ω;`)

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

image block

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

image block

あちゃちゃ・・・・(´;ω;`)

🤔
ogImageUrlってこんなにリンクっぽいのを発行してくれるのか・・・・

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

image block

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

👇

OGImageが動く

ってことは・・・

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

👇

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

👇

🧐
ボタンによってリンクが貼り付けられていればOGImageも動くんじゃん?

Hey!!(´・ω・`)

image block

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

image block

できたーーーーー\(^o^)/\(^o^)/

ん????

あれ???

本日のまとめ(要はこう修正すればOK)

1、header.tsxにdefault系を追加する
image block

2、header.tsxの45行あたりの<meta>を追加する
image block
☝🏻
twitter:sitecontentの値は自分のtwitterアカウントに変更する

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

Twitterでは更新のお知らせを随時行っています

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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