ブログにTwitterを埋め込むと画像が表示されないことがある問題の対策
皆様、いかがお過ごしでしょうか。
Twitterの投稿（ツイート）をブログ記事に埋め込んで引用するのは私だけでないと思いますが、最近、写真付きツイートをブログに埋め込むとTwitterの画像表示エリアに「センシティブな内容が含まれている可能性のあるメディアです」と表示され、画像が表示されない問題が頻発しています。
例として、以下のブログ記事を示します。
このブログで引用した本田仁美さん（AKB48）（※）のツイートは、普通にブログ編集の「リンクを挿入」機能を用いて引用すると、以下のように表示されます。
※この記事は、読者の対象として（IZ*ONE・AKB48ファンではなく）一般のブログライターを想定しています。そのため、人名の表記を普段のブログ記事と変えています。
ところが、本田さんの当該ツイート に添付された写真は、ご覧になればわかると思いますが、センシティブな要素は全くありません。
一般的に各人のTwitterアカウントで「センシティブな内容が含まれている可能性のあるメディアを表示する」設定を有効にすれば、自身のTwitterアプリからは画像は見えますが、それではブログの表示を解決できません。
これについて、「はてなブログ」の「はてなサポート窓口」に問い合わせしたところ、以下のご回答をいただきました。
こちらの表示はTwitter側の設定によって表示されているものであると考えられます。
センシティブ設定の対象となっている投稿について、twitter側で「センシティブな内容を含む可能性のあるメディアを表示する」にチェックを入れていれば特に警告なくタイムラインに表示されますが、ゲストに対しては制限対象となります。
埋め込み表示は、ご自身のアカウントのタイムラインではなく、ゲスト相当の表示内容となりますので、お尋ねいただきましたような表示になります。
センシティブでない画像がセンシティブ扱いとなっているといった場合は、Twitterまでお問い合わせください。
この回答は理解できなくもない内容ですが、これでは、ブログ管理者自身のTwitterアカウント以外では自力で解決できないことになってしまいます。
解決方法をネットで検索しましたが、明確に書かれているものは見当たらないため、以下のような回避策をとることにしました。
ツイート埋め込みのカスタマイズを利用
Twitterの埋め込みには、表示方法のカスタマイズが可能です。
具体的には、ブログのHTMLコードの blockquote 要素に対して属性を追加することでツイート表示属性を制御することが可能です。
※ツイート埋め込みのカスタマイズについては、以下の記事を参考にさせていただきました。
ここで利用する属性は、「data-cards」です。
記事の当該箇所のHTMLコードのblockquoteタグは次のようになっています。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja">
この部分を以下のように変更します。
<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja" data-cards="hidden">
すると、引用するツイートからは「センシティブな内容が含まれている可能性のあるメディアです」という表示は消えますが、残念ながら画像も消えてしまいます。
そのため、画像については別途Twitterからブログに直接引用することにしました。
その結果、以下のように見えるはずです。
なおこの対策は、Twitterでセンシティブでないはず画像が「センシティブ」にされている根本問題を解決するものではありません。（同じ投稿者でも、「センシティブ」にされる画像とされない画像があります。）これについては、いわゆる「アンチ」等が当該投稿に対し偽りの通報をしている可能性が排除できないと私は考えています。
今後、過去のブログ記事の表示不具合個所についても、順次修正していきますので、よろしくお願いいたします。
