横浜で営業している個人事業主です。ホームページ制作、システム構築、ページ修正などお気軽にお問い合わせください。

note記事へのURL埋め込みでOGP画像が表示されなかった件

ウェブ
note記事内でURL埋め込み

運営している川柳投稿サイト「まるせん」に設定したOGP画像が、なぜかnote記事に張り付けたときに動作しなかった件について。

これまでの状況

noteの記事入力ページにおいてURLを張り付け、Enterキーを押すと、一秒くらいの間をおいて、OGPで設定した情報がパッと表示されます。(上図の1つ目のURL)

まるせんで新しいOGPを設定した直後、上図の2つ目のURLのように、どういうわけかこの情報が表示されませんでした。

TwitterやFacebookではOGPが表示されるのに、note記事では表示されない、という現象を確認していました。

問い合わせ

この件について、noteのサポートに問い合わせをしてみました。質問した内容はこちら。

いつもお世話になっております。

自身で運営しているサイトのURLをnote記事に張り付けたとき、ほぼ同じhtml記述をしているのにもかかわらず、一方ではOGP表示(プレビュー)され、一方はされないという症状が発生しています。

ツイッターやFacebookではどちらも想定したとおりに表示されています。

1)表示されるページ サイズ小
https://nananana.jp/nananana.php?nid=21726
2)表示されないページ サイズ大
https://marusenryu.com/senryu.php?sid=367643

同一サーバーで運用しています。

とくにnoteからのアクセスを拒否しているということはないと思います。
なにかおかしなデータがキャッシュされていたりするのでしょうか。

お手数ですが、お調べいただけますと幸いです。

2020/6/29にnoteから下記の返事をいただきました。

お客さま

お問い合わせくださり、ありがとうございます。
cakes/note運営事務局の倉本です。

URLの埋め込みについてご案内いたします。

新しい段落にURLを直接貼り付けて、Enterキーを押していただくだけで埋め込むことができます。
▼外部サービスを埋め込む方法

正しい操作を行なっても、埋め込みできなかった場合、URLが埋め込みができるサービス一覧のヘルプに含まれているサイトであることをお確かめくださいませ。

上記のヘルプに含まれていないサイトについては、正常に埋め込みが機能しない場合(画像が表示されない等)がありますので、予めご了承ください。
もし埋め込み機能でサポートしてほしいサイトがありましたら、カイゼン目安箱へご意見をお送りくださいますと幸いです。

なお、埋め込めるサービスにも関わらず、埋め込みが正常に動作しない場合は推奨環境をご確認いただき、ブラウザのキャッシュの削除や端末の再起動、別のブラウザの利用をご検討くださいませ。

ご不明点ありましたらお気軽にご連絡ください。
どうぞよろしくお願いいたします。

note株式会社
cakes/note運営事務局

オフィシャルに動作を保証している「URLが埋め込みできるサービス一覧」以外のサイトについては動作しない場合もあります、というテンプレ返信でしたが、確かに個々のサイトについて動作確認するのは難しいでしょうから仕方がありません。

とはいえ、開発者向けのページでも正式に提供されているサービスである「note:card」のタグを埋め込んでいますから、もう少し重ねて質問をしてみようかと思っていました。

note:card
summary_large_image 自身のサイトにnote:cardにsummary_large_imageを指定することで、記事中にURLを貼り付けた際に表示される画像を、大きく表示させることが出来ます。 利用方法 1. 以下の画像指定を対象のページに記述

状況(2020.6.30)

本日確認したところ、無事にURL埋め込みでOGP画像が表示されるようになっていました。

明確な理由はわかりませんが、問い合わせしてから少なくとも特にサイト側での変更は行っていません。

TwitterやFacebookでは、OGP画像を変更した場合などに最新の情報に更新する機能が提供されていますが、簡単ではないでしょうが、noteでもこのような機能が提供されると確認しやすくなるように思います。

Card validator – Twitter

https://cards-dev.twitter.com/validator

シェアデバッガー – Facebook

シェアデバッガー - Facebook for Developers

コメント

  1. […] ころ原因不明です。→ (2020.6.30)きちんと表示されることを確認しました。 […]

タイトルとURLをコピーしました