Skip to content
This repository has been archived by the owner on Mar 12, 2023. It is now read-only.

不具合:記事リンクを直接SNSに貼り付けた際、デフォルト画像が表示されず #17

Closed
herohoro opened this issue Dec 19, 2021 · 5 comments

Comments

@herohoro
Copy link
Contributor

スクリーンショット 2021-12-19 22 25 20

👇

スクリーンショット 2021-12-19 22 10 10

@otoyo
Copy link
Owner

otoyo commented Dec 20, 2021

easy-notion-blog ではデフォルトの og:image は対応していなくて(ちょうど良い画像が
用意できないため)、私個人の notion-blog の方では対応しているので、defaultOgImageUrl のあたりを参考にした後に差分が上書きされてしまったのだと思います。

header.tsx の下記の箇所に修正を入れていただくとデフォルト画像が表示されるようになると思います。

-         {ogImageUrl ? <meta property="og:image" content={ogImageUrl} /> : ''}
-         {ogImageUrl ? (
-           <meta property="twitter:image" content={ogImageUrl} />
-         ) : (
-           ''
-         )}
+         <meta property="og:image" content={ogImageUrl ? ogImageUrl : defaultOgImageUrl} />
+         <meta property="twitter:image" content={ogImageUrl ? ogImageUrl : defaultOgImageUrl} />

https://github.com/herohoro/easy-notion-blog-02/blob/7eddd19a8a4a1c692a4fd06deae8d7fd75e27d50/src/components/header.tsx#L44-L49

@herohoro
Copy link
Contributor Author

コードを修正後、確認してみましたが、変わらず非表示でした。
少し待てば改善されるかとも思うので急がず待つことにします。

修正後に1点気になる変化がありまして、
SNSボタン押下時も試してみると新規タブではなく謎のwindowが開くようになりました(´・ω・`)
スクリーンショット 2021-12-20 11 21 05

@herohoro
Copy link
Contributor Author

少し待ってから再度確認したところ無事に表示されました\(^o^)/
スクリーンショット 2021-12-20 12 43 15

@otoyo
Copy link
Owner

otoyo commented Dec 20, 2021

修正のご確認ありがとうございました。
og:image がすぐに反映されない時は Twitter Card Validator でプレビューしてみてください。
別 Window で開くのはおそらくブラウザによるものと思います(私のブラウザでは最初から別ウィンドウで開いていました)。

@otoyo otoyo closed this as completed Dec 20, 2021
@herohoro
Copy link
Contributor Author

Twitter Card Validator今後活用させていただきます⭐
勉強になりました。ありがとうございます(´ω`)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants