4536のサムネイルやアイキャッチ画像の表示方法について

最近のアップデートで「背景画像への変換機能」を実装し、画像の生成サイズを新たに設定しました。

サイトのパフォーマンスを高めるため、SEO対策のためのアップデートです。

今回はこの辺の変更について詳しくお話しします。

(※少し前に背景画像についての記事を書きましたが、大幅に内容を変更しております)

他のテーマから乗り換えた方とすでに4536を使っていた方へ

まずは大事なことから。

他のテーマから乗り換えた場合、サムネイルの比率が以前のテーマのままになっているので、できれば再生成した方が良いです。

再生成しなくても画像が表示されなくなるわけではありませんが、再生成した方がサイト表示のパフォーマンスが上がります。

これは、この記事を書いた日よりも前に4536を使い始めた方にも言えることですので、ぜひお試しください。

ただ、画像を再生成したくない場合はそのまま使っても特に問題はありません。

画像の再生成手順

画像の再生成には「Regenerate Thumbnails」というプラグインを使います。

手順は以下の通りです。

プラグインをインストール

ツールからRegenerate Thumbnailsを選択

下のボタンをクリック

 

記事数が少ないとすぐに終わりますし、何百記事もあっても数十分で終わります。

1つだけ補足をすると、Tiny PNG(Compress JPEG & PNG images)などの画像圧縮プラグインを使っていると生成後の画像も圧縮してしまうため、無料プランを使っている場合は一度停止した方がいいです。

また、このプラグインは再生成後に削除しても大丈夫です。

通常の画像と背景画像の違い

少し難しい話になります。

4536では通常の画像(imgタグ)の他に背景画像(CSSのbackground-image)で表示することもできます。

4536ではどちらを選んでもデザインが同じになりますが、ページの構造(意味)に違いが出てきます。

通常の画像(imgタグ)は画像として認識されますが、背景画像はあくまでもデザインなので画像としては認識されません。

つまり、背景画像は表示してもしなくてもSEO的にプラスにもマイナスにもならず、あくまでもデザイン目的として表示されます。

では、なぜ通常の画像と背景画像を選べるようにしているのかと言うと、SEO対策を意識すると「ここの画像はimgタグではなく背景画像の方が適切では?」という場合があるからです。

ただ、そこまで強く意識する必要もないと思うので、気になる方だけお好みで変更してください。

デフォルトではすべて通常の画像(imgタグ)になっています。

アイキャッチ画像は構造化データでクロールされる

別記事で書きましたが、アイキャッチ画像は構造化データ(JSON-LD)で記述しているので、背景画像で表示してもクロール・インデックスの対象になります。

つまり、通常の画像(imgタグ)で表示しても背景画像で表示してもSEO的には同じです。

サイトの環境によっては(例えば、wpXレンタルサーバーでブラウザキャッシュをオン)アイキャッチ画像が表示されないなどの不具合が発生するので、そういった場合は背景画像で表示するのもおすすめです。

サムネイルの画質

ページ読み込みの関係上、サムネイル(記事一覧)の画像は基本的に「ちょうど良いサイズ」になっています。

ただ、もっとキレイに表示したい場合もあるかと思うので、その場合はテーマカスタマイザー(外観→カスタマイズ)で「高画質」に変更してください。

サムネイルの比率

サムネイルの比率は横長と正方形の2種類あります。

デフォルトでは横長になっていますが、他のテーマで正方形で表示していた場合や正方形で画像を表示したい場合は正方形にしてください。

また、4536独自のメディアセクション(デフォルトのミュージックとムービーの部分)は決まったサイズになっています。

自動生成されるサムネイル

サムネイルはアップロードする画像の他にも複数のサイズの画像を自動生成します。

これは表示する部分、表示方法に合わせて最適化するためです。

(すべてフルサイズで表示した場合ページのサイズがかなり大きくなります)

生成される画像サイズはサムネイルの比率や、有効なメディアセクション(デフォルトのミュージック、ムービーの部分)に準拠するので、途中でサムネイルの比率を変えた場合などはそのタイミングで改めて画像を再生成することをおすすめします。

4536でミュージック・ムービー以外の作品を公開する方法
4536の開発のきっかけでもありますが、4536ではデフォルトで「音楽」と「動画...

ただ、サーバーの容量の関係などでアップロードした画像以外の画像を自動生成したくない場合は設定→メディアの画面でサムネイルの自動生成をオフにしてください。

また、WordPress側で生成される画像は幅と高さを0にすることで自動生成をオフにすることができます。

本文部分の画像について

アイキャッチ画像やサムネイル以外にも、

  • 吹き出し画像
  • オリジナルブログカード画像
  • カエレバやヨメレバの画像

も、背景画像に変換することができます。

吹き出し画像やオリジナルブログカードに関しては、サムネイルやアイキャッチ画像と同じくお好みで設定してください。

カエレバやヨメレバに関しては、おそらくリンクにrel="nofollow"を設定している方が多いと思いますし、外部の画像なので背景画像で良いと思います。

(AMPページでは背景画像で表示します)

アイキャッチ画像はフルサイズで表示することも可能

あ、それともう一つ余談?というわけではないですが、フォーラムでご意見いただき、アイキャッチ画像が背景画像の場合は「フルサイズ」で表示されるようにしました。サムネイルも同様です。

(サムネイルは最適化した画像を表示します。※背景画像除く)

WordPressはデフォルトで様々なサイズの画像が生成されるようになっているんですが、小さい画像をアイキャッチ画像に設定するテーマやプラグインがあるようです。

その場合、本来は元のサイズの画像に変更する必要があるんですが、4536のテーマ側で自動でフルサイズを取得して表示するので差し替えは特に必要ありません。

以上、何かご意見やご質問、不具合などがあればフォーラムまでお願いします。

Pickup