はてブのエントリーでサムネイル画像が表示されない時の設定&変更方法

2017/07/08Webサービス・アプリはてなブックマーク

はてなブックマークでサムネイル画像が表示されない時の対処法

どうもコアラ(@hotkoala_)です。

はてなブックマークのエントリーページに表示されているサムネイル画像。
はてなブックマーク経由で記事を読みに来てもらうためには重要ですよね。

画像1枚で記事イメージを伝えたり、興味を引くための材料になります。

ですが、せっかくエントリーされても画像サムネイルが表示されないことがあります。

今回はそんな時の対処法として、『サムネイル画像を表示する設定』『表示されなかった場合の対処法』『それでも変更できない場合』について解説したいと思います。

サムネイル画像を表示する設定

はてなブログを利用している人は設定されているので問題なく表示されるはずですが、Wordpressのブログなどでは設定していないと自動取得されない場合があります。

通常、はてなブックマークのエントリーページのサムネイル画像は記事のog:imageというmetaタグに指定されている画像を自動で取得するようです。

はてなブックマークではエントリーページに、該当ページの概要、サムネイルを自動で掲載する機能があります。この該当ページの概要については、そのページのテキストから適切な箇所を抽出し、サムネイルについてはog:imageに設定されている画像や記事に含まれている画像を自動で掲載します。

引用:エントリーの概要とサムネイルの表示について | はてなブックマークヘルプ

表示されない場合はog:imageが設定されているか確認してみましょう。
確認方法は記事のページで「F12」キーを押して開発ツールを開きます。headタグの中にog:imageというmetaタグがあるか探してみてください。

WordPressでOGPを設定する場合、All in one SEOなどのプラグインで設定するか、プラグインなしの場合は下記のサイトがわかりやすかったので紹介しておきます。

画像サムネイルが『表示されない場合』や『後から変更したい時』の設定方法

画像が設定できていなかったなど、以下のようにサムネイル画像を後から変更したい場合があるかと思います。

  • 画像が表示されない設定のままエントリーされてしまった。
  • アイキャッチを変えたから変更したい。
  • 想定していた画像と違う画像が表示されてしまった。

このように、はてブにエントリーされた後でサムネイル画像を変更する場合、ブラウザの拡張機能を使います。(PCからのみ変更可能)

Chrome 拡張機能

【はてなブックマークGoogle Chrome拡張で新しい情報を発見しよう 】

Safari 拡張機能

【Safariでも快適ブックマーク!はてなブックマークSafari拡張登場!】

Firefox 拡張機能

【はてなブックマークFirefox拡張で新しいインターネットを体験しよう】

拡張機能を使ってはてブのエントリー画像を変更する方法

Chromeで解説しますが基本的には他でも使い方は同様です。

上記のリンクから拡張機能をインストールしたら…

  1. 画像を変更したいページで拡張機能のはてなブックマークのアイコンをクリック
  2. 右上の『NO IMAGES』をクリック
  3. 画像のサムネイル一覧が表示されるので、設定したい画像をクリック
  4. 変更が完了したら『保存』をクリックしてタイトルが変更できます。

※設定できる画像はページ内で読み込まれた画像のみです。そのため、『Lazyload』などで画像の読み込み遅延を設定している場合はページ上で画像を表示させてからじゃないと画像の選択肢に表示されません。

ちなみに、このプラグインでは画像の他に、エントリーされているタイトルも変更可能です。
記事がブックマークされてはてなブックマークにエントリーされた後にタイトルを変更した場合は自動で変更されないようです。

そんな時は以下の手順でタイトルを変更しましょう。

  1. タイトルを変更したい場合は変更したいページで拡張機能のはてなブックマークのアイコンをクリック
  2. タイトル横の鉛筆のマークをクリック
  3. タイトルが変更できるようになるので、タイトルを入力して変更をクリック
  4. 変更が完了したら『保存』をクリックしてタイトルが変更できます。

注意点として、画像やタイトルを変更する場合はガイドラインがあります。
ガイドライン違反をすると最悪の場合アカウントの凍結などの恐れがあるようなので、変更する際は下記のガイドラインを確認の上で変更するようにしましょう。

エントリーの画像変更のガイドライン | はてなブックマークヘルプ

エントリーのタイトル変更のガイドライン | はてなブックマークヘルプ

サムネイル画像を設定・変更ができない場合がある

実は僕のブログがこの状況なのです。
上記の方法で『NO IMAGES』をクリックして試しても何も変化がないのです。

「あれ?この手順であっているんじゃないの?」と思って、Chrome、Firefoxで試しましたがダメでした。

調べても出てこなかったので、はてなに直接問い合わせをしてみところ以下のような内容で回答を頂きました。

  • httpsの一部のサイトで表示されないことがある
  • httpsのサイトでも表示されるサイトもある
  • 表示される場合とされない場合の原因が不明で調査中

ということで残念ながら現状はどうしようもないようですね。
サイトによって個別に原因がある可能性もあるということでした。

まとめ

上記変更できない理由はなぜでしょうかね。解決方法をご存知の方がいたら教えてほしいです。
あまり根拠はないですが、僕の予想ではHTTP/2.0ではないかと考えています。
公式側でも調査中ということなので改善されることを期待して待つしかないさそうですが、早く改善してくれることを願います。

似たようなケースでも別の原因の可能性もあるようなので、はてな側としても個別の情報が欲しいようです。
この件に関して詳細を確認したい場合や解決しない場合は公式のサポートに連絡をしてみるといいかもしれません。

はてなブックマーク お問い合わせ | はてな